html - pwa - Favicon Standard-2019-svg, ico, png y dimensiones?

ios favicon

Question

¿Qué dimensiones de favicon, formatos de archivo y meta / etiquetas de enlace deben usarse a partir de 2019? Esto incluye íconos de Apple, Windows, Android y otros dispositivos que las personas usan 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? ¿Hay alguna opción "un archivo sirve para todos"?

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

Ejemplo: ¿Qué código se debe usar ico y svg?

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

¿o deben 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 dimensiones, formatos de archivo y etiquetas de meta / enlace de los favicons que se deben usar.

Answer 1

Descargo de responsabilidad: soy el autor de RealFaviconGenerator, que espero 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 icono 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 UI y UX, este no es un resultado deseable. Compara iOS y Android. En iOS, todos los iconos de la pantalla de inicio son cuadrados con esquinas redondeadas ( iOS llena las regiones transparentes de los iconos táctiles con negro ). En Android, los iconos de la pantalla de inicio a menudo usan formas no cuadradas y transparencia (incluidos los iconos de la aplicación Google). Envíe un solo ícono táctil y Android Chrome lo usará. Pero no podrá igualar las pautas de iconos de Android , mientras que un icono dedicado sí.

Así que aconsejo evitar deliberadamente el uso de un solo ícono. En lugar de eso, diríjase 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 partir 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 agreguen a la pantalla de inicio. Declarado con:

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

Con los años, este icono se ha convertido en el "icono predeterminado de alta resolución" para muchos navegadores. Por lo tanto, lo encontrará en otro lugar, al agregarlo a favoritos, etc.

Android Chrome

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 seguidor. Por lo tanto, por el momento, todavía es bastante seguro considerar que los íconos del Manifiesto de la aplicación web son para Android Chrome.

Como su nombre indica, el Manifiesto de la aplicación web es para, bueno, aplicaciones web. Pero cualquier sitio web puede usarlo como una forma de referenciar algunos íconos.

Android espera un ícono PNG de 192x192, se permite y fomenta la transparencia.

El manifiesto se declara con:

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

Safari de macOS

Aunque macOS Safari no tiene favicon, admite el icono de máscara para pestañas ancladas . Este es un ícono SVG monocromático y un solo color que lo llena cuando la pestaña está activa.

Declararlo con:

<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

Edge e IE 12

Microsoft presentó el browserconfig , un documento XML que enumera varios íconos 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, IE ... Esto es donde las cosas están un poco más borrosas. Históricamente, había un solo archivo favicon.ico , todavía compatible. Sin embargo, los navegadores más recientes eligen iconos PNG, que son más ligeros. Además, algunos navegadores no pueden seleccionar el ícono adecuado en el archivo ICO (este formato puede incorporar varias versiones de un ícono), lo que hace que se use incorrectamente un ícono de baja resolución.

Uno podría estar tentado a dejar caer el viejo favicon.ico completo. Aunque me gustaría dar este salto en RFG, no ejecuté las pruebas necesarias para evaluar el impacto en los navegadores antiguos.

Por lo tanto, el combo que todavía recomiendo hoy, con favicon.ico incrustando 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 iconos dedicados. Por ejemplo, Coast by Opera está buscando un ícono de 228x228 . La necesidad de centrarse en estos navegadores no es obvia. Usualmente 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.net .

Answer 2

También vale la pena mencionar que, junto con favicon, se deben agregar otras etiquetas, como las etiquetas OG, las tarjetas de Twitter o la aplicación 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 HERE

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 HERE

Facebook OG tiene más opciones, pero en general 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 1240 px por 650 px 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 cubre también 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 expanda el tema de la marca de su sitio web.