Favicons por plataforma

Next.js resuelve los iconos a partir de archivos en lugar de las etiquetas link que escribes a mano. Coloca el nombre de archivo correcto en el directorio correcto y el framework genera el marcado por ti.

React nunca toca el head del documento. Tus enlaces de iconos van en el armazón HTML, y qué archivo es ese depende de si el proyecto se generó con Create React App o con Vite.

Un componente de un solo archivo de Vue no puede renderizar una etiqueta link en el head. Los iconos se declaran en index.html, que vive en la raíz del proyecto con Vite y dentro de public/ con Vue CLI.

Angular copia los archivos estáticos solo si la configuración de compilación se lo indica. Un archivo que no coincida con la entrada assets de angular.json nunca llega a dist/, sin importar dónde lo coloques en el proyecto.

SvelteKit copia todo lo que hay en static/ a la raíz de la compilación, y el armazón del documento es src/app.html en lugar de un componente. Las etiquetas de iconos van ahí para que estén en el HTML servido antes de que se ejecute cualquier JavaScript.

Nuxt inyecta por defecto un enlace a /favicon.ico en cada página, así que un proyecto nuevo registra un 404 para él hasta que dejas un archivo en public/. Los iconos restantes se declaran en el bloque app.head de nuxt.config.

Vite es peculiar por tratar index.html como código fuente y no como un recurso estático: está en la raíz del proyecto y se reescribe durante la compilación. Todo lo que hay en public/ se copia a la raíz de salida sin modificar.

Astro procesa y aplica una huella a los recursos importados desde src/, y copia public/ a la salida de compilación exactamente como lo encontró. Los iconos necesitan nombres de archivo estables, así que van en public/ y se enlazan desde un layout.

Gatsby es el único stack aquí que genera el conjunto de iconos por ti. gatsby-plugin-manifest toma una única imagen de origen nombrada en gatsby-config.js y produce los tamaños, el manifest de aplicación web y las etiquetas link durante la compilación.

Hugo copia static/ a la raíz del sitio publicado, pero el marcado del head pertenece al tema que hayas instalado. El truco está en sobrescribir el partial del tema desde tu propio proyecto en lugar de editar archivos dentro de themes/.

WordPress no quiere una carpeta con archivos de iconos. Subes una única imagen cuadrada como Icono del sitio, y el núcleo la recorta en los tamaños que sirve e imprime las etiquetas link en cada página.

En Shopify el favicon es un ajuste del tema respaldado por la CDN de imágenes, no un archivo que colocas en un servidor. El tema decide qué etiquetas se renderizan, y la mayoría de los temas renderiza exactamente una.

Squarespace llama al favicon icono del navegador, y es una única imagen cuadrada subida en los ajustes del sitio. No hay sistema de archivos ni plantilla que editar, así que esa única subida es la mayor parte de lo que obtienes.

Wix vincula el favicon personalizado a un plan de pago con un dominio conectado. Un sitio que aún esté en un subdominio wix.com muestra el icono propio de Wix sin importar lo que subas. No hay sistema de archivos ni head que editar.