HTML 5 Favicon - ¿Soporte?

Estaba leyendo la página de Favicon en Wikipedia. Mencionan la especificación HTML 5 para Favicon:

La especificación HTML5 actual recomienda especificar iconos de tamaño en varios tamaños utilizando los atributos rel = "icon" tallas = "lista de dimensiones de icono separadas por espacios" dentro de una etiqueta. [ fuente ] Se pueden proporcionar múltiples formatos de iconos, incluidos formatos de contenedor como archivos Microsoft .ico y Macintosh .icns, así como gráficos vectoriales escalables al incluir el tipo de contenido del icono en forma de tipo = "tipo de contenido de archivo" dentro del etiqueta.

Mirando el artículo citado (W3) muestran este ejemplo:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Mi pregunta es ¿algún navegador admite el método HTML 5?

Nota: Sé que Apple usa su apple-touch-iconmétodo de metaetiquetas sobre el método HTML5.

El artículo de wikipedia afirma:

Sin embargo, el navegador web Google Chrome seleccionará el tamaño de coincidencia más cercano de los provistos en los encabezados HTML para crear iconos de aplicaciones de 128 × 128 píxeles cuando el usuario elija Crear accesos directos a aplicaciones ... del menú "Herramientas".

¿Cómo maneja esto Internet Explorer (v9 a v11) y Firefox? ¿Y el artículo es correcto en cómo Chrome maneja los Favicons HTML? (No se cita ninguna fuente para que Chrome confirme esto).

Al buscar no pude encontrar realmente ninguna información (creíble) en HTML 5 Favicon que no sea el artículo de Wikipedia.

Las respuestas proporcionadas (en el momento de esta publicación) son solo respuestas de enlace, así que pensé que resumiría los enlaces en una respuesta y lo que usaré.

Cuando trabaje para crear Favicons de navegador cruzado (incluidos los íconos táctiles), debe tener en cuenta varias cosas.

El primero (por supuesto) es Internet Explorer. IE no admite favicons PNG hasta la versión 11. Por lo tanto, nuestra primera línea es un comentario condicional para favicons en IE 9 y siguientes:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Para cubrir los usos del icono, créelo a 32x32 píxeles. Observe que rel="shortcut icon"para que IE reconozca el icono, necesita la palabra shortcutque no es estándar. También envolvemos el .icofavicon en un comentario condicional de IE porque Chrome y Safari usarán el .icoarchivo si está presente, a pesar de otras opciones disponibles, no lo que nos gustaría.

Lo anterior cubre IE hasta IE 9. IE 11 acepta favicons PNG, sin embargo, IE 10 no. Además, IE 10 no lee comentarios condicionales, por lo que IE 10 no mostrará un favicon. Con IE 11 y Edge disponibles, no veo IE 10 en uso generalizado, así que ignoro este navegador.

Para el resto de los navegadores, utilizaremos la forma estándar de citar un favicon:

<link rel="icon" href="path/to/favicon.png">

Este ícono debe tener un tamaño de 196x196 píxeles para cubrir todos los dispositivos que pueden usar este ícono.

Para cubrir los íconos táctiles en dispositivos móviles, vamos a utilizar la forma patentada de Apple para citar un ícono táctil:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

El uso rel="apple-touch-icon-precomposed"no aplicará el brillo reflectante cuando se marque en iOS. Para que iOS aplique el brillo use rel="apple-touch-icon". Este icono debe tener un tamaño de 180x180 píxeles, ya que ese es el tamaño actual recomendado por Apple para los últimos iPhones y iPads. He leído que Blackberry también lo usará rel="apple-touch-icon-precomposed".

Como nota: Chrome para Android dice:

Los apple-touch- * están en desuso y serán compatibles solo por un corto tiempo. (Escrito a partir de beta para m31 de Chrome).

Mosaicos personalizados para IE 11+ en Windows 8.1+

IE 11+ en Windows 8.1+ ofrece una forma de crear mosaicos anclados para su sitio.

Microsoft recomienda crear algunos mosaicos en el siguiente tamaño:

Pequeño: 128 x 128

Mediano: 270 x 270

Ancho: 558 x 270

Grande: 558 x 558

Estas deben ser imágenes transparentes, ya que definiremos un fondo de color a continuación.

Una vez que se crean estas imágenes, debe crear un archivo xml llamado browserconfig.xmlcon el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Guarde este archivo xml en la raíz de su sitio. Cuando se fija un sitio, IE buscará este archivo. Si desea asignar un nombre diferente al archivo xml o colocarlo en una ubicación diferente, agregue esta metaetiqueta a head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

Para obtener información adicional sobre los mosaicos personalizados de IE 11+ y el uso del archivo XML, visite el sitio web de Microsoft .

Poniendolo todo junto:

Para poner todo junto, el código anterior se vería así:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Windows Phone Live Tiles

Si un usuario usa un Windows Phone, puede anclar un sitio web a la pantalla de inicio de su teléfono. Desafortunadamente, cuando hacen esto, muestra una captura de pantalla de su teléfono, no un favicon (ni siquiera el código específico de MS mencionado anteriormente). Para crear un "Live Tile" para usuarios de Windows Phone para su sitio web, debe usar el siguiente código:

Aquí hay instrucciones detalladas de Microsoft, pero aquí hay una sinopsis:

Paso 1

Cree una imagen cuadrada para su sitio web, para admitir pantallas de alta resolución, créelo con un tamaño de 768x768 píxeles.

Paso 2

Agregue una superposición oculta de esta imagen. Aquí hay un código de ejemplo de Microsoft:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

Paso 3

Luego puede agregar la siguiente línea para agregar un pin para iniciar el enlace:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Microsoft recomienda que detecte Windows Phone y solo muestre ese enlace a esos usuarios, ya que no funcionará para otros usuarios.

Paso 4

A continuación, agregue algunos JS para alternar la visibilidad de la superposición

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

Nota sobre tamaños

Estoy usando un tamaño ya que cada navegador reducirá la imagen según sea necesario. Podría agregar más HTML para especificar varios tamaños si lo desea para aquellos con un ancho de banda menor, pero ya estoy comprimiendo los archivos PNG con TinyPNG y creo que esto es innecesario para mis propósitos. Además, según la respuesta de philippe_b , Chrome y Firefox tienen errores que hacen que el navegador cargue íconos de todos los tamaños. El uso de un icono grande puede ser mejor que varios más pequeños debido a esto.

Otras lecturas

Para aquellos que deseen más detalles, ver los enlaces a continuación:

• Artículo de Wikipedia sobre Favicons
• El manual de iconos
• Comprender el Favicon por Jonathan T. Neal
• rel = "icono de acceso directo" considerado dañino por Mathias Bynens
• Todo lo que siempre quiso saber sobre los íconos táctiles de Mathias Bynens

No, no todos los navegadores admiten el sizesatributo:

• Safari: Sí, elige la imagen que mejor se adapte .
• Opera: Sí, elige la imagen que mejor se adapte .
• IE11: no estoy seguro. Aparentemente toma la imagen más grande que encuentra , lo cual es un poco burdo pero está bien.
• Chrome: No, ver errores 112941 y 324820 . De hecho, Chrome tiende a cargar todos los íconos declarados, no solo el mejor / primero / último.
• Firefox: No, ver error 751712 . Al igual que Chrome, Firefox tiende a cargar todos los íconos declarados.

Tenga en cuenta que algunas plataformas definen tamaños específicos:

• Android Chrome espera un ícono de 192x192 , pero favorece los íconos declarados manifest.jsonsi está presente. Además, Chrome usa el ícono de Apple Touch para los marcadores .
• Coast by Opera espera un ícono de 228x228 .
• Google TV espera un ícono de 96x96 .