¿Qué dimensiones de favicon, formatos de archivo y etiquetas meta/enlace se deben usar a partir de 2022? Esto incluye el ícono de Apple, Windows, Android y otros dispositivos que la gente usa hoy.

Uso Opera y puedo ver que es compatible con el formato svg. ¿Es la mejor solución para usar svg hoy en día? ¿Hay alguna opción “un archivo sirve para todos”?

He estado navegando por muchos sitios web y revisé diferentes “generadores de favicon”. Todos ellos tienen años y funcionan principalmente con archivos png.

Por ejemplo:
¿Qué código se debe usar para ico y svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

¿O deberían especificarse las dimensiones si ico contiene más tamaños? No encontré una buena respuesta.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Proporcione las dimensiones, los formatos de archivo y las etiquetas meta/enlace de los favicons que se deben usar.

Descargo de responsabilidad: soy el autor de RealFaviconGenerator, que espero que esté actualizado (principalmente, ver más abajo). Así que no se sorprenda si esta respuesta coincide con lo que genera RFG.

El mito de la talla única

No hay un icono de “talla única”. No puede crear un solo ícono SVG y esperar que funcione en todas partes.

Desde un punto de vista técnico, un solo ícono SVG sería algo bueno. Pero desde el punto de vista de la UI y la UX, este no es un resultado deseable. Compara iOS y Android. En iOS, todos los íconos de la pantalla de inicio son cuadrados con esquinas redondeadas (iOS llena las regiones transparentes de los íconos táctiles con negro). En Android, los íconos de la pantalla de inicio a menudo usan formas no cuadradas y transparencia (incluidos los íconos de aplicaciones de Google). Envíe un ícono de un solo toque y Android Chrome lo usará. Pero no podrás igualar Directrices sobre los iconos de Androidmientras que un icono dedicado podría hacerlo.

Así que aconsejo evitar deliberadamente el uso de un solo icono. Más bien apunte a cada plataforma individualmente, cuando sea posible (no siempre es así).

Iconos, plataforma por plataforma

iOSSafari

iOS Safari espera un toque icono. A partir de hoy, esta es una imagen PNG de 180×180. Esta imagen no debe usar transparencia y sus esquinas se redondearán automáticamente cuando se agregue a la pantalla de inicio. Declarado con:

<link rel="apple-touch-icon" sizes="180x180" href="https://stackoverflow.com/icons/apple-touch-icon.png">

A lo largo de los años, este icono se ha convertido en el “icono de alta resolución predeterminado” para muchos navegadores. Por lo tanto, lo encontrará en otro lugar, al agregarlo a un marcador, etc.

Android cromo

Android Chrome se basa en el Manifiesto de la aplicación web. Aunque este manifiesto no está dedicado a Android Chrome, actualmente es su principal apoyo. Entonces, por el momento, todavía es bastante seguro considerar que los íconos del Manifiesto de la aplicación web son para Android Chrome.

Como sugiere el nombre, el Manifiesto de aplicaciones web es para aplicaciones web. Pero cualquier sitio web puede usarlo como una forma de hacer referencia a algunos íconos.

Android espera un icono PNG de 192 x 192, se permite y fomenta la transparencia.

El manifiesto se declara con:

<link rel="manifest" href="https://stackoverflow.com/icons/site.webmanifest">

Borde e Internet Explorer 12

Microsoft presentó el configuración del navegadorun documento XML que enumera varios íconos que se ajustan a la interfaz de usuario de Metro.

el archivo y color de fondo se declaran con:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Navegadores de escritorio clásicos

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE… Esto es donde las cosas están un poco más borrosas. Históricamente, había un solo favicon.ico archivo, aún compatible. Sin embargo, los navegadores más recientes prefieren iconos PNG, que son más claros. Además, algunos navegadores no pueden seleccionar el icono adecuado en el archivo ICO (este formato puede incrustar varias versiones de un icono), lo que hace que se utilice incorrectamente un icono de baja resolución.

Uno podría estar tentado a abandonar el viejo favicon.ico enteramente. Aunque me gustaría dar este salto en RFG, no hice las pruebas necesarias para evaluar el impacto en los navegadores antiguos.

Así, el combo que sigo recomendando hoy, con favicon.ico incrustación de iconos de 16×16, 32×32 y 48×48:

<link rel="icon" type="image/png" sizes="32x32" href="https://stackoverflow.com/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://stackoverflow.com/icons/favicon-16x16.png">
<link rel="shortcut icon" href="http://stackoverflow.com/icons/favicon.ico">

Otros navegadores

Otros navegadores pueden tener iconos dedicados. Por ejemplo Coast by Opera está buscando un icono de 228×228. La necesidad de centrarse en estos navegadores no es obvia. Por lo general, usan el ícono táctil u otros íconos cuando no pueden encontrar “su” ícono.

Conclusión

Como se anunció al principio, esto es exactamente lo que RealFaviconGenerator crea

También vale la pena mencionar que, junto con favicon, se deben agregar otras etiquetas, como etiquetas OG, tarjetas de Twitter o aplicaciones MS. Todo tiene el mismo propósito: la identificación visual de su marca y también debe incluirse.

La tarjeta de Twitter se puede encontrar AQUÍ

Agrego las siguientes etiquetas

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

Descubrí que muchos usuarios crean imágenes de 1300 px por 650 px y formatos jpg/png.

Después de agregar todas las etiquetas, deben validarse. AQUÍ

---

Facebook OG tiene más opciones, pero las generales son las siguientes:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook recomienda una proporción específica de la imagen y el tamaño del archivo está limitado a 8Mb. Para guardar imágenes similares con la tarjeta de twitter recomiendo dimensiones 1240px por 650px y formato jpg/png. Facebook y twitter no aceptan svg…

---

Descubrí que algunas marcas globales usan esta etiqueta en sus sitios web. Uno tenía unas dimensiones de 150×150 píxeles y formato png. Los navegadores pueden utilizar esta imagen para mostrarla en los resultados de búsqueda.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

---

Real Favicon Generator cubre también los favicons de Microsoft. Hay muchas otras etiquetas meta para la aplicación de MS para optimizar la inclinación de la página y se muestran otras informaciones, como la imagen. Este tema también vale la pena leerlo.

Espero que esto sea útil para alguien y amplíe el tema de la marca de su sitio web.

Tuve exactamente la misma pregunta hace unas semanas. Es sorprendentemente difícil encontrar información actualizada y confiable sobre favicons en Internet. De hecho MDN y W3C ambos vinculan a Wikipedia para obtener más información sobre favicons. El artículo de Wikipedia, sin embargo, es bastante corto y no muy útil. Me llevó varias horas investigar cuáles son los iconos óptimos para los navegadores modernos.

Esto es lo que aprendí:

No existe una solución de “un archivo para gobernarlos a todos”. Sin embargo, para los navegadores modernos, en realidad no es tanto lo que necesita.

1. El tamaño estándar de favicon en los navegadores sigue siendo de 16×16 puntos correspondientes a 32×32 píxeles en pantallas de alta resolución.
2. No hay necesidad de incluir todavía un favicon.ico archivo en su directorio raíz a menos que desee admitir IE 10 o mayor.
3. SVG estaría bien, pero no es compatible con todos los navegadores. Así que la solución más fácil sigue siendo simplemente usar imágenes PNG.
4. Google dice explícitamente no admiten iconos de 16×16 o 32×32. Para los resultados de Google, debe incluir al menos un ícono que sea un múltiplo de 48×48.
5. Para cuando los usuarios fijan su sitio web en la pantalla de inicio de su teléfono, necesita un ícono de 192×192 para Android, 167×167 para iPad y 180×180 para iPhone (mientras que el las etiquetas de enlace para iPhone son especiales – vea abajo)
6. En teoría, podría proporcionar un solo ícono de 192×192 (o un múltiplo mayor de 48) que los navegadores y todos los demás servicios reducirían, pero especialmente para la versión de 16×16 puntos, estos resultados de escalado probablemente serán peores que los que obtiene cuando escálelo usted mismo con un editor de imágenes profesional o incluso proporcione versiones especiales para estos íconos de baja resolución.
7. También puede agregar un archivo de manifiesto web eso incluye más información meta como los colores del tema. Pero eso es solo compatible con Android y brinda pocos beneficios a menos que realmente espere que una gran parte de sus usuarios fijen su sitio web en su pantalla de inicio (en mi humilde opinión, eso es muy poco probable para la mayoría de los sitios web).

Mi recomendación sería usar lo siguiente en su encabezado:

<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">

<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">

también he escrito un entrada en el blog con un poco más de prosa y más información de fondo.