He estado tratando de obtener el favicon para mi sitio (usa next.js) para que aparezca. Después de revisar innumerables publicaciones y tutoriales de Stack Overflow, estoy empezando a sentirme frustrado. La estructura de mi proyecto, y específicamente el directorio público, se ve así:
. ├── Dockerfile ├── README.md ├── components ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── css │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest └── utilsEl comienzo de mi archivo app.js se ve así:
export default function Layout({ children, page }) { return ( <> <Head> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" /> ..... </Head> Después de seguir este tutorial, me quedan errores de consola que dicen: GET http://localhost:3000/favicon-32x32.png 404 (Not Found) . También traté de cargar los favicons a través de un archivo site.webmanifest vinculado en Head con <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials"> pero esta etiqueta también dejó un 404 (Not Found) error en la consola.
He verificado que los png de favicon tienen el tamaño correcto, 16x16 y 32x32. Parece que no se encuentran los activos que viven en mi directorio público al que estoy tratando de vincular en <Head> .
¿Hay algo más que pueda intentar para que aparezcan estos favicons?
Editar: Aquí está el contenido de mi archivo next.config.js :
module.exports = { basePath: '/my-path', webpack: (config) => { return config }, env: { }, publicRuntimeConfig: { BACKEND_API_URL: ... CONSENT_COOKIE_NAME: ... }, }Debido a que configuró su basePath en /my-path en su next.config.js , también deberá incluirlo en sus otras referencias de ruta, por ejemplo:
<link rel="icon" type="image/png" sizes="32x32" href="/my-path/favicon-32x32.png" /> <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />Creo que el favicon debería estar en formato ICO. Se supone que el favicon es un conjunto de 16x16, 32x32 y 48x48. Si usa el generador de favicon en línea, establecen el tamaño automáticamente