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: