HTML 5 Favicon - ¿Soporte?

170

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.

L84
fuente
1
Algo parece extraño en el código anterior: ¿html5 permite no citar valores de atributos? Respuesta - stackoverflow.com/questions/6495310/…
jakubiszon

Respuestas:

330

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:

L84
fuente
1
¿Qué icono de tamaño (para mi aplicación web de marcadores) necesito para Apple? 320x460, 640x920, 640x1096, 72x72, 114x114, 144x144, 768x1004, 1024x748 ? ¿Y para Android?
Kiquenet
@Kiquenet Para la web, uso 180x180 para Apple y 196x196 para Android (y también otros dispositivos, excepto IE 10 y
versiones
De todas las preguntas sobre cómo agregar un ícono favorito y respuestas, esta tiene que ser mi favorita porque es extremadamente informativa y, sobre todo, ¡FUNCIONA! ¡Gracias hombre! ¡Usar el formato .PNG realmente me salvó!
twknab
16

No, no todos los navegadores admiten el sizesatributo:

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

philippe_b
fuente
1
...yet it favors the Apple Touch icon if it finds it.No estoy seguro de que esto sea completamente cierto, al menos no en el futuro. Desde el sitio web de Chrome:The apple-touch-* are deprecated, and will be supported only for a short time. (Written as of beta for m31 of Chrome).
L84
2
Sí, pero en este momento Android Chrome 35 elige el ícono táctil 152x152 de Apple e ignora el ícono PNG de 196x196 (utilicé una prueba de compatibilidad: realfavicongenerator.net/favicon_compatibility_test ). No sé cuándo cambiará Google, pero supongo que no sucederá pronto. Bueno, eso es solo una suposición.
philippe_b
Según developer.apple.com/library/safari/documentation/UserExperience/… los tamaños para Apple ( icono de clip web ) son 76x76, 120x120, 152x152, 167x167, 180x180
Kiquenet
Según developer.chrome.com/multidevice/android/installtohomescreen, los tamaños para Android son 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 , quizás también 128x128
Kiquenet