Guía Práctica para la Implementación de Favicon en Sitios Web: Archivos, Declaraciones y Actualización de Caché

Un paquete de favicon estándar contiene 5 tipos de archivos, que se adaptan a diferentes dispositivos y navegadores. El favicon.ico en formato ICO es un formato tradicional, con tamaños más frecuentes de 16×16, 32×32 y 48×48. Colocarlo en el directorio raíz del sitio web permite su reconocimiento automático por versiones antiguas de IE.

Los iconos de múltiples tamaños en formato PNG se usan para navegadores modernos y dispositivos móviles, con tamaños comunes que incluyen 16×16, 32×32 y 180×180. El apple-touch-icon está diseñado específicamente para iOS Safari, para mostrar un icono nítido cuando los usuarios agregan el sitio web a la pantalla de inicio. El archivo de manifiesto Web proporciona la configuración de iconos para aplicaciones PWA, adaptándose al escenario de adición a la pantalla de inicio en sistemas Android.

El orden de declaración sigue la regla de compatibilidad retrospectiva: declarar primero los formatos modernos de alta prioridad, y luego recurrir a los formatos tradicionales. El orden específico es: declarar primero el icono en formato PNG de 32×32, luego el apple-touch-icon, y finalmente el favicon en formato ICO.

Todas las etiquetas link necesitan el atributo rel y el atributo size correctos. Los iconos PNG requieren que el atributo sizes indique el tamaño correspondiente. El apple-touch-icon tiene un tamaño por defecto de 180×180, por lo que se puede omitir la indicación extra de tamaño. El archivo de manifiesto necesita el atributo rel="manifest" que apunte a la ruta de archivo correspondiente.

Al usar App Router en Next.js 13+, es necesario colocar favicon.ico en el nivel raíz del directorio app, y Next.js se encargará automáticamente de la salida de rutas. Los archivos PNG de múltiples tamaños, el apple-touch-icon y el archivo de manifiesto se pueden colocar en el directorio app/public, y referenciarlos con una ruta raíz absoluta. Si se usa Pages Router, se pueden colocar todos los archivos directamente en el directorio raíz público.

Al implementar un favicon para un tema personalizado de WordPress, se pueden colocar todos los archivos de favicon en la subcarpeta assets del directorio del tema, o cargarlos directamente al directorio raíz del sitio web, y luego agregar las declaraciones de etiquetas link correspondientes a través del archivo functions.php del tema. Algunas versiones de WordPress admiten la carga de favicon a través del menú Apariencia → Personalizar en el panel de administración, y el sistema generará automáticamente las declaraciones y rutas.

Los navegadores implementan un caché fuerte a largo plazo para los favicon de los sitios web, y la mayoría de los navegadores de escritorio tienen un período de caché de más de 7 días. Después de modificar el favicon, simplemente actualizar la página no activa que el navegador vuelva a solicitar el nuevo archivo, lo que provoca que el icono antiguo siga mostrándose.

El método de actualización más fiable es agregar un parámetro de consulta de versión a la URL del recurso de favicon. Por ejemplo, cambiar href="/favicon.ico" a href="/favicon.ico?v=2". Después de que el parámetro cambie, el navegador lo trata como un recurso nuevo y solicita directamente el archivo más reciente, omitiendo el caché original. También se puede limpiar el caché del navegador y volver a visitar la página, pero este método solo es adecuado para la depuración local de los desarrolladores, y no puede afectar al caché de los usuarios finales.

Después de la implementación, es necesario verificar el estado de visualización del icono en múltiples escenarios para confirmar el efecto de adaptación uno por uno. Primero verifique la visualización del icono en la pestaña del navegador de escritorio, y compruebe si los tamaños de 16×16 y 32×32 son nítidos. En segundo lugar verifique la visualización del icono en la barra de marcadores del navegador, y confirme que la adaptación de tamaño es correcta.

Los dispositivos móviles requieren la verificación de dos escenarios: visualización del icono después de agregar el sitio web a la pantalla de inicio en iOS Safari, y visualización del icono después de agregar un PWA de Android a la pantalla de inicio. Finalmente, compruebe el código fuente del sitio web para confirmar que todas las rutas de las etiquetas link son correctas, y que no existen errores 404 causados por rutas relativas incorrectas. Puede usar el panel de red en las herramientas de desarrollador del navegador para confirmar que todos los archivos de icono devuelven el código de estado 200.