En este artÃculo pretendo mostrarte como insertar un favicon html en los distintos dispositivos porque dependiendo de cual sea, asà será la manera diferente de mostrarlo.
Un favicon es el icono de favoritos, los navegadores lo suelen mostrar en la barra de direcciones. Es una manera de identificar fácilmente la página.
Forma común
Normalmente con subir a la raÃz de la web un fichero con la extensión .ico es suficiente. Asà conseguirás que se vea esa imagen en los principales navegadores. Pero si asà no te lo coge, solo tendrás que insertar dentro del <head> del código html lo siguiente:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
No quieres subir un archivo .ico sino un jpg, png o gif
En este caso, tendrÃas que subir el archivo y después en el <head> del código html insertar el código indicado, escogiendo el que te interese dependiente de la extensión que quieras subir (jpg, gif o png).
<link rel="shortcut icon" href="favicon.png" type="image/png" />
<link rel="shortcut icon" href="favicon.jpg" type="image/jpeg" />
<link rel="shortcut icon" href="favicon.gif" type="image/gif" />
iOS 2.0+ and Android 2.1+
Para los dispositivos con versiones iguales o superiores a iOS 2.0+ y Android 2.1 la forma de añadirlo en el <head> será:
<link rel="apple-touch-icon-precomposed" href="path/to/favicon.png">
Internet Explorer 10 (estilo metro)
En este caso la forma será:
<meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="/path/to/favicon.png">
Para dispositivos Apple
Cuando queremos personalizar el tamaño según el dispositivo, la forma correcta, dependiendo de cual sea el tamaño que quieras es:
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png"> <!-- For iPad with high-resolution Retina display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path/to/favicon-144.png"> <!-- For iPhone with high-resolution Retina display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.png"> <!-- For iPhone with high-resolution Retina display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path/to/favicon-114.png"> <!-- For first- and second-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/path/to/favicon-72.png"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="/path/to/favicon-57.png">
En gihub puedes encontrar muchas más opciones. Asà que solo queda animarte a insertar tu favicon en tu web.
¿Te gusta el favicon de mi web? ¿A que está guay? En casa del herrero, cuchillo de palo 🙂 Lo insertaré pronto, lo prometo.
