Favicons - Mejores prácticas

Estoy tratando de entender todos estos diferentes tamaños y formatos que se necesitan para Favicons, iconos táctiles y ahora también iconos Tile.

He leído esta publicación: http://www.jonathantneal.com/blog/understand-the-favicon pero todavía estoy un poco confuso sobre qué usar exactamente que se verá razonablemente bien en todos los dispositivos y navegadores> = IE8 .

Creo que debería crear lo siguiente:

ICO
favicon.ico (32x32)

PNG
favicon.png (96 x 96)

Icono de
mosaico tileicon.png (144x144)

Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
basado en este https://github.com/h5bp/html5-boilerplate/issues/1367

... y luego usar este código para servirlos?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

¿Me estoy perdiendo algo?

No tengo claro si esto cubrirá IE 10.

Favicon es mucho más complejo de lo que parece. Hace 10 años, favicon.icoera el único artículo necesario. Luego, estaba el ícono táctil, luego varios íconos táctiles debido a las diversas resoluciones de pantalla de los dispositivos iOS, luego estaba el ícono de mosaico para Windows ...

Algunas respuestas aquí son muy completas y abrumadoras (¿todo esto, solo para un favicon?). Sin embargo, fallan al indicar que se recomienda que el ícono de mosaico de 310x310 para Windows sea 558x558 . Y dado que fueron escritos hace unos meses, no mencionan el manifiesto reciente para Android Chrome M39 o el ícono SVG de pestaña fijada para Safari en OS X El Capitan .

El diseño por plataforma es otro tema difícil pero descuidado. Por ejemplo, los favicon suelen ser transparentes. Pero iOS no admite la transparencia (para un ejemplo de esto, compare el icono táctil SO y lo que obtiene cuando agrega SO a la pantalla de inicio de su iPhone).

Por estas razones, lo que considero una mejor práctica para favicon es no crearlo manualmente. En su lugar, utilice una herramienta para automatizar todo el proceso y hacer cumplir las pautas de la plataforma.

Te aconsejo que uses RealFaviconGenerator . Genera todas las imágenes y el código HTML que necesita para hacer el trabajo:

• favicon.ico e iconos PNG para navegadores de escritorio
• Ícono táctil de Apple para dispositivos iOS y Android
• Azulejos de Windows 8
• Icono de pestaña fijada para Safari en OS X El Capitan

Por ejemplo, no solo genera la msapplication-TileImageimagen y el marcado, sino también el browserconfig.xmlarchivo más reciente compatible con IE11. También se actualizó hace unos meses para admitir el manifiesto de Android Chrome y Safari OS X El Capitan.

Divulgación completa: soy el autor de este sitio.

Aquí está el ejemplo completo (como yo sé) de favicon para dispositivos móviles y tabletas:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

Para IE11, aquí hay preguntas frecuentes

Hay varios iconos diferentes e incluso pantallas de presentación que puede configurar para varios dispositivos. Esta respuesta explica cómo apoyarlos a todos.

Aquí hay algunos fragmentos que he usado con enlaces relevantes al lugar donde recopilé la información. Consulte mi blog para obtener más información y más información sobre la plantilla de proyecto ASP.NET MVC Boilerplate con todo esto integrado desde el primer momento (incluidos archivos de imagen de muestra).

Agregue el siguiente marcado a su encabezado html. Las secciones comentadas son completamente opcionales. Mientras que las secciones sin comentar se recomiendan para cubrir todos los usos de los iconos. No tengas miedo, la mayoría si se trata de comentarios para ayudarte.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="https://stackoverflow.com/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="https://stackoverflow.com/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="https://stackoverflow.com/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="https://stackoverflow.com/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="https://stackoverflow.com/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="https://stackoverflow.com/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="https://stackoverflow.com/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="https://stackoverflow.com/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="https://stackoverflow.com/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="https://stackoverflow.com/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Mi archivo browserconfig.xml. Explicación completa arriba.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Mi archivo manifest.json. Explicación completa arriba.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Una lista de los archivos del proyecto (tenga en cuenta que los nombres de estos archivos son importantes si decide poner algunos de ellos en la raíz de su proyecto para evitar el uso de las metaetiquetas anteriores):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Gastos generales totales

Si quita los comentarios, eso es 3 KB de HTML adicional, si no admite pantallas de presentación, eso es 1.5 KB. Si está utilizando la compresión GZIP en su contenido HTML, lo que todos deberían estar haciendo en estos días, eso le deja con aproximadamente 634 bytes de sobrecarga por solicitud para admitir todas las plataformas o 446 bytes sin pantallas de presentación. Personalmente, creo que vale la pena admitir dispositivos IOS, Android y Windows, pero es su elección, ¡solo estoy dando las opciones!

Nota al margen sobre el icono web actual / pantalla de presentación / situación de configuración

Esta situación con íconos específicos del proveedor, pantallas de presentación y etiquetas especiales para controlar el navegador web o íconos anclados es ridícula. En un mundo perfecto, todos usaríamos un archivo favicon.svg que podría verse bien en cualquier tamaño y podría colocarse en la raíz de la página. Solo FireFox admite esto en el momento de escribir este artículo (consulte CanIUse.com ).

Sin embargo, los iconos no son la única configuración en estos días, hay varias configuraciones específicas de otros proveedores (mostradas arriba) pero un archivo favicon.svg cubriría la mayoría de los casos de uso.

Actualizar

Actualizado para incluir la nueva versión de Android / Chrome M39 + opciones de favicon / tematización. Curiosamente, han optado por un enfoque similar al de Microsoft, pero están utilizando un archivo JSON en lugar de XML.

La solución más simple es usar una (!) Imagen PNG (en 2020).

Simplemente agregue esto al encabezado de su documento:

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

El último enlace es para Apple (pantalla de inicio), el segundo para Android (pantalla de inicio) y el primero para el resto.

Tenga en cuenta que esta solución NO admite "mosaicos" en Windows 8/10. SÍ admite imágenes en accesos directos, marcadores y pestañas del navegador.

El tamaño es exactamente el tamaño que usa la pantalla de inicio de Android. El tamaño del icono de la pantalla de inicio de Apple es de 60 px (3x), por lo que 180 px se reducirá. Otras plataformas usan el icono de acceso directo predeterminado, que también se reducirá.

De hecho, me estaba haciendo la misma pregunta y traté de buscar proyectos simples que pudieran integrarse en un paso de compilación o simplemente simplificar la creación de los activos y el marcado requeridos.

No encontré nada que cumpliera con mis requisitos, así que creé faviconbuild y lo publiqué bajo la licencia MIT .

El propósito de este proyecto es crear una utilidad multiplataforma central, mantenible y ejecutable localmente para construir favicons y marcas de soporte. Aprovecha el poder de Imagemagick, por lo que necesitaría descargarlo para su plataforma o usar los que proporciono en mis lanzamientos . No dude en utilizarlo en proyectos comerciales o personales, contribuir, enviar solicitudes de funciones o simplemente utilizarlo como fuente de inspiración para sus propios servicios públicos.

El proyecto consta de un archivo por lotes para Windows y un script bash para Unix / Mac (o Windows a través de Cygwin). Puede obtener una lista completa de las opciones admitidas en la opción de ayuda interna -ho --help.

ex:

./faviconbuild.sh -h

Ambos scripts analizan un archivo de texto simple que también puede anular con la opción -p o --parsed. El archivo es básicamente una plantilla de comandos para ejecutar para que pueda personalizar más fácilmente la salida si es necesario.

También publiqué una publicación de blog sobre el desarrollo y como un mini tutorial sobre scripting bash / batch.