¿Qué es un favicon y para qué sirve?
Un favicon es una insignia (icono) que aparece en las pestañas del navegador, los marcadores y en fragmentos de los resultados de búsqueda.
Favicon juega un papel importante en las aplicaciones web. Puede mejorar la apariencia del sitio en los resultados de búsqueda, aumentar el reconocimiento de su sitio, ayudar al usuario a encontrar rápidamente la página deseada en marcadores y pestañas.
Además, el usuario puede agregar una página de su sitio a la pantalla de inicio del teléfono o guardarla como una aplicación web. En este caso, utilizando favicon, puede encontrar rápidamente un sitio entre una gran cantidad de otras aplicaciones.
¿Qué formato usar para favicon?
Anteriormente, ICO se utilizaba como formato principal. La peculiaridad de este formato es su multidimensionalidad. Este archivo puede almacenar varios tamaños de iconos. La ICO fue reemplazada por el formato PNG. Las ICO siguen siendo compatibles, pero la mayoría de los navegadores modernos optan por el formato de icono PNG, que es más ligero. Algunos navegadores no pueden seleccionar el ícono correcto en el archivo ICO, lo que resulta en un mal uso del ícono de baja resolución.
¿Qué plataformas cubrirá este artículo?
- Navegadores de escritorio clásicos
- Android Chrome
- Clip web iOS Safari
- Mac OS
- Ventanas
Navegadores de escritorio clásicos
Comencemos con el escritorio clásico.
Como se mencionó anteriormente, el formato ICO está desactualizado hoy, pero esto no significa que deba olvidarse de él. El formato ICO puede guardar su icono y mostrar el favicon correctamente en algunos casos. Por ejemplo, antes de IE 11, el formato PNG no es compatible. Por lo tanto, para IE10 y versiones inferiores, debe utilizar el antiguo formato ICO. En este caso, es recomendable utilizar la siguiente combinación de formatos ICO y PNG:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">Para crear un icono ICO de varios tamaños, puede utilizar el servicio de conversión icoconvert . Al generar un icono, seleccione las siguientes dimensiones: 16x16, 32x32, 48x48 (icono de mayor resolución).
Los iconos PNG tienen los siguientes tamaños: 16x16, 32x32, 96x96, 120x120. ¿Por qué un icono de 120x120? Yandex Help informa que puede usar un ícono de este tamaño.
Si prestamos atención al valor de rel (tipo de recurso), la mayoría de los navegadores tienen en cuenta el icono , y el navegador IE tiene en cuenta el icono de acceso directo .
Android Chrome
Android espera ver un icono PNG de 192x192, se recomienda el canal alfa (transparencia).
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">Android Chrome se basa en el manifiesto de la aplicación web. Cualquier sitio puede usar el manifiesto para vincular a algunos de los íconos.
El archivo de manifiesto en sí está en formato json y se declara con la siguiente línea:
<link rel="manifest" href="…/manifest.json">El archivo de manifiesto para Android Chrome se puede generar utilizando el servicio RealFaviconGenerator .
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}Los iconos deben tener los siguientes tamaños: 72x72, 96x96, 144x144, 192x192, 512x512 en formato PNG, se recomienda la transparencia. Dado que el icono puede tener un fondo transparente, el color se puede especificar en el manifiesto mediante background_color .
Vale la pena cancelar que en el teléfono, el usuario tiene la capacidad de guardar la página del navegador en la pantalla de inicio. Simplemente será un enlace a una página en su sitio, se mostrará un icono con el nombre android-icon-192x192.png , que se declara en su código.
Si conecta un manifiesto al sitio, al abrir la página, es posible que se le solicite al usuario que guarde el sitio como una aplicación. En este caso, puede declarar el mismo icono visualmente ( android-icon-192x192.png) o rediseñar el icono de la aplicación para que se adapte a sus necesidades y declararlo en el manifiesto con las dimensiones adecuadas.
Clip web iOS Safari
iOS Safari espera ver un ícono táctil de Apple . Este es un icono PNG de 180x180, sin canal alfa (sin transparencia). Las esquinas del icono se redondearán automáticamente, lo que facilitará la creación de un icono táctil de Apple .
Los usuarios de IOS también pueden agregar un sitio a la pantalla de inicio y se verá como una aplicación. Dicho vínculo se muestra como un icono y se denomina Web Clip.
Los siguientes tamaños de iconos están diseñados para admitir una variedad de dispositivos, como iPhone y iPad:
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">En el código, agregue el atributo rel = "apple-touch-icon" y especifique el tamaño usando tamaños.
Si el sitio no tiene un icono cuyo tamaño sea el recomendado para el dispositivo, se utilizará el icono más grande más cercano. El ícono principal de Apple Touch es un ícono de 180x180. Otros dispositivos pueden mezclar el icono.
No se olvide del relleno al crear un icono. Deben tener al menos 4px en todos los lados. Esto es para evitar que su icono se recorte ya que el icono de la aplicación iOS tiene esquinas redondeadas.
Cabe señalar que los dispositivos iOS no son los únicos que buscan un ícono táctil de Apple... Algunos navegadores, como Android Chrome, pueden usar íconos táctiles de Apple, ya que son más comunes que otros íconos PNG de alta resolución.
Mac OS
En Mac OS, las cosas son completamente diferentes. Si el usuario intenta guardar el sitio en el escritorio, se mostrará una captura de pantalla de la página con el código html en lugar del icono del sitio.
Para agregar un icono, debe utilizar el formato SVG, que le permitirá crear una máscara de icono. Este icono se mostrará cuando fijes una pestaña en Safari.
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">Debe agregar el atributo rel = "mask-icon" en su código . El icono SVG en sí debe ser negro. El color del icono se establece en el atributo color = "# e52037" .
El icono SVG se utiliza en una pestaña anclada (sin foco) en monocromo. Al pasar el mouse (tabulador fijo - foco), el icono se pintará en el color que tiene el atributo " color ". El color del atributo " color " también se pasa a la barra táctil .
Al crear un icono, debe eliminar todas las sombras existentes, hacerlo plano y simple. Puede simplificar un icono a un solo objeto utilizando las operaciones "Unión" y "Aplanar". Estas operaciones son fáciles de aplicar en Figma.
Si cierra los ojos para crear un icono de máscara, el navegador simplemente mostrará la primera letra del dominio de su sitio.
Ventanas
Con Windows, se necesita un poco de manipulación para hacerlo bien.
Para IE10 y versiones inferiores, el formato ICO debe usarse ya que PNG no era compatible antes de IE11.
Con la llegada de IE11 y Windows 8.1, fue posible anclar sitios como mosaicos activos. Para mosaicos pequeños se usa el favicon predeterminado, pero para mosaicos grandes y anchos es necesario establecer una imagen de un tamaño específico. Esto se puede hacer agregando etiquetas de metadatos al marcado del sitio o creando un browserconfig.xml (archivo de configuración del navegador).
Un ejemplo de cómo agregar etiquetas de metadatos al marcado de su sitio web para mosaicos grandes:
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">Con esta línea, especificamos el color de fondo del mosaico:
<meta name="msapplication-TileColor" content="#2b5797">Puede especificar el nombre de su sitio web:
<meta name="application-name" content="My Application">¿Qué es browserconfig ? Es un documento XML que enumera varios iconos que corresponden a la interfaz de usuario de Metro.
Para incluir el archivo browserconfig en el marcado, agregue la siguiente línea al encabezado :
<meta name="msapplication-config" content="…/browserconfig.xml">El archivo en sí se verá así:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="…/mstile-70x70.png"/>
<square150x150logo src="…/mstile-150x150.png"/>
<square310x310logo src="…/mstile-310x310.png"/>
<wide310x150logo src="…/mstile-310x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>El archivo browserconfig define imágenes para diferentes tamaños de mosaico.
Microsoft recomienda usar un tamaño de imagen más grande para admitir pantallas de alta densidad de píxeles.
La siguiente lista proporciona algunas pautas para usar diferentes tamaños:
- Pequeño - 70x70 (tamaño recomendado: 128x128)
- Mediano - 150 x 150 (tamaño recomendado: 270 x 270)
- Ancho: 310 x 150 (tamaño recomendado: 558 x 270)
- Grande: 310 x 310 (tamaño recomendado: 558 x 558)
Por ejemplo, para una imagen de 70 x 70, el tamaño recomendado es 128 x 128. Esto significa que debe crear una imagen de 128x128 con un fondo transparente, cuyo nombre será mstile-70x70 . Haz lo mismo con el resto de dimensiones.
Preparando favicons
Antes de agregar sus íconos a la carpeta raíz del sitio, debe prepararlos. Los tamaños originales de los iconos no son muy grandes, pero pueden comprimirse con la menor pérdida de calidad.
Por ejemplo, en mi caso el peso de todas las imágenes fue de 200 kb, después de la compresión fue de 50 kb. La calidad de las imágenes apenas ha cambiado. Puede utilizar cualquier servicio de compresión de imágenes conveniente. Solía iloveimg .
Conclusión
Secuencia de conexión en el marcado del sitio web:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">Con la última línea de código " theme-color ", puede pintar la barra de direcciones y la barra de notificaciones en cualquier color. El valor del contenido establece el color.
Utilice RealFaviconGenerator para comprobar los iconos de su sitio web . Este servicio le mostrará cómo se muestran sus iconos en diferentes plataformas, le dirá dónde y qué problemas puede haber.
Además, este servicio puede generar los tamaños, formatos de iconos y código requeridos. Pero es necesario verificar el código fuente para verificar la presencia de todos los tamaños recomendados para una visualización correcta en varios dispositivos.