Configurar Favicons em Aplicações React

Configure recursos estáticos da marca em aplicações React de página única. Aprenda a mapear pastas públicas.

Onde Colocar Ficheiros Favicon no React

Independentemente de estar a utilizar Vite, Create React App ou Next.js, todos os ficheiros estáticos, como favicons, devem estar dentro do diretório public/ na raiz do seu projeto.

  1. Converta o seu PNG utilizando o nosso gerador de página inicial para obter o ficheiro ZIP.
  2. Extraia todos os ficheiros diretamente para a pasta public/ na raiz do seu projeto React.
  3. Abra o ficheiro index.html (localizado na raiz do projeto para Vite ou dentro de public/ para Create React App).
  4. Adicione ou modifique as meta tags HTML padrão do cabeçalho, apontando URLs relativos para o diretório público:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">