¿Qué dimensiones de favicon, formatos de archivo y metaetiquetas / enlaces deben usarse a partir de 2020? Esto incluye el icono de Apple, Windows, Android y otros dispositivos que la gente usa hoy en día.

Yo uso Opera y puedo ver que es compatible con el formato svg. ¿Es la mejor solución para usar svg hoy en día? ¿Existe alguna opción de "un archivo para todos"?

He estado navegando por muchos sitios web y comprobado diferentes "generadores de favicon". Todos tienen años y funcionan principalmente con archivos png.

Por ejemplo: ¿Qué código debería usarse 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 metaetiquetas / enlaces de los favicons que se deben utilizar.

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 la que genera RFG.

El mito de una talla única para todos

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

Desde un punto de vista técnico, un solo icono SVG sería bueno. Pero desde el punto de vista de UI y 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 la aplicación de Google). Envíe un icono de un solo toque y Android Chrome lo usará. Pero no podrá coincidir con las pautas de iconos de Android , mientras que un icono dedicado podría hacerlo .

Así que le aconsejo que evite deliberadamente el uso de un solo icono. En su lugar, apunte a cada plataforma individualmente, cuando sea posible (este no es siempre el caso).

Iconos, plataforma por plataforma

Safari de iOS

iOS Safari espera un ícono táctil . A día de hoy, esta es una imagen PNG de 180x180. 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="/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. Entonces lo encontrará en otro lugar, cuando lo agregue a un marcador, etc.

Android Chrome

Android Chrome se basa en el manifiesto de aplicaciones web . Aunque este manifiesto no está dedicado a Android Chrome, actualmente es su principal patrocinador. 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 referenciar algunos íconos.

Android espera un icono PNG de 192x192, la transparencia permitida y recomendada.

El manifiesto se declara con:

<link rel="manifest" href="/icons/site.webmanifest">

Edge e IE 12

Microsoft introdujo browserconfig , un documento XML que enumera varios iconos que se ajustan a la interfaz de usuario de Metro.

El archivo y el 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 ... Aquí es donde las cosas están un poco más borrosas. Históricamente, había un solo favicon.icoarchivo, todavía compatible. Sin embargo, los navegadores más recientes prefieren elegir 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 tener la tentación de dejar lo viejo por favicon.icocompleto. Aunque me gustaría dar este salto en RFG, no realicé las pruebas necesarias para evaluar el impacto en los navegadores antiguos.

Por lo tanto, el combo que todavía recomiendo hoy, con favicon.icoincrustaciones de iconos de 16x16, 32x32 y 48x48:

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

Otros navegadores

Otros navegadores pueden tener íconos dedicados. Por ejemplo, Coast by Opera busca un icono de 228x228 . 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 crea RealFaviconGenerator .

También vale la pena mencionar que junto con el favicon se deben agregar algunas otras etiquetas como etiquetas OG, tarjetas de Twitter o aplicaciones MS. Todo tiene el mismo propósito: 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 1300px por 650px 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 mantener imágenes similares con la tarjeta de twitter, recomiendo dimensiones de 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 dimensiones de 150x150 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 también cubre los favicons de Microsoft. Hay muchas otras metaetiquetas para la aplicación MS para optimizar el arco de la página y se muestran otras informaciones como la imagen. También vale la pena leer este tema.

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