Configuración de favicons en apps de React

Configura los recursos estáticos de marca en apps de React de una sola página. Aprende a mapear carpetas públicas.

Dónde colocar los archivos de favicon en React

Independientemente de si usas Vite, Create React App o Next.js, todos los archivos estáticos, como los favicons, deben estar dentro del directorio public/ en la raíz de tu proyecto.

  1. Convierte tu PNG usando nuestro generador de páginas de inicio para obtener los archivos ZIP.
  2. Extrae todos los archivos directamente en la carpeta public/ en la raíz de tu proyecto de React.
  3. Abre index.html (ubicado en la raíz del proyecto si usas Vite, o dentro de public/ si usas Create React App).
  4. Agrega o modifica las etiquetas meta de encabezado HTML estándar, apuntando URL relativas al directorio 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">