Guía de Especificación de Configuración Completa para Favicon de Sitios Frontend

Un archivo ICO estándar admite la incrustación de múltiples mapas de bits de diferentes tamaños en un solo contenedor, y la configuración común incluye tres tamaños: 16×16, 32×32 y 48×48. Diferentes escenarios de uso coinciden automáticamente con el tamaño correspondiente: 16×16 se usa para las barras de pestañas del navegador, 32×32 para las barras de marcadores y 48×48 para los accesos directos del escritorio.

El almacenamiento de múltiples tamaños de los archivos ICO sigue la especificación del formato ICO, cada tamaño corresponde a un bloque de datos de mapa de bits independiente, y el navegador lee el mapa de bits del tamaño correspondiente según el escenario de renderizado actual, por lo que no es necesario generar múltiples archivos independientes. Los navegadores IE más antiguos solo admiten la lectura de favicons en formato ICO, por lo que mantener favicon.ico en el directorio raíz puede ser compatible con el acceso de versiones anteriores.

Los navegadores modernos como Chrome, Firefox y Edge admiten favicons en formato PNG. El método de declaración utiliza la etiqueta link para agregar el atributo de tamaño correspondiente, y la configuración principal requiere dos especificaciones: 32×32 y 192×192. 32×32 coincide con el renderizado de barras de pestañas de alta resolución en navegadores modernos, y 192×192 se usa para iconos de aplicaciones PWA nativas en Android.

El código de declaración estándar es <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> y <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">. Los navegadores seleccionarán automáticamente el tamaño correspondiente para cargar según el escenario.

Algunos navegadores modernos admiten favicons en formato SVG. SVG puede lograr la adaptación de color bajo diferentes temas a través de consultas de medios integradas para adaptarse al cambio de modo oscuro del sistema. El principio de adaptación de SVG es agregar una consulta de medios para prefers-color-scheme en el código SVG, y definir el color de relleno del icono en modo claro y oscuro respectivamente.

Para declarar un favicon SVG, use type="image/svg+xml" para especificar el formato de archivo. Tiene una prioridad mayor que ICO y PNG tradicionales, y los navegadores cargan el formato SVG primero. Los desarrolladores pueden usar un conversor de SVG a ICO para convertir el SVG adaptado editado a formato ICO para ser compatible con más escenarios de acceso.

Apple iOS proporciona un icono dedicado para las páginas web agregadas a la pantalla de inicio, es decir apple-touch-icon. La especificación actual requiere un icono PNG de 180×180. Las versiones anteriores admitían declaraciones de múltiples tamaños diferentes, y las versiones a partir de iOS 12 priorizan el tamaño 180×180 para coincidir con todos los dispositivos Apple.

El código de declaración estándar es <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">. No es necesario agregar el atributo size, y el sistema iOS reconocerá automáticamente el tamaño 180×180 para la adaptación. Los bordes redondeados y los efectos de resaltado son procesados automáticamente por el sistema iOS, y los desarrolladores no necesitan preprocesar los bordes redondeados.

Las aplicaciones PWA necesitan configurar el archivo manifest.json para declarar la información básica de la aplicación, que debe incluir un campo icon con el tamaño correspondiente, declarando un icono de aplicación de 512×512 para cumplir con los requisitos de instalación de PWA. theme-color debe declararse tanto en la etiqueta meta como en manifest, y se usa para la coincidencia de color del tema de la barra de direcciones del navegador.

Para una configuración completa, agregue <meta name="theme-color" content="#ffffff">, y agregue un campo con el mismo nombre en manifest.json, manteniendo el valor consistente con la etiqueta meta, para adaptarse a la lógica de renderizado de la barra de direcciones de diferentes navegadores.