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.
