Los favicon son pequeñas imágenes, generalmente de 16×16 pixeles, usado por la mayoría de los navegadores en la parte izquierda de las pestañas de los sitios web. Nacieron allá por 1999 en Internet Explorer 5 como una pequeña imagen que represente el sitio y tiempo después fue estandarizado por W3C

Como crear un favicon

Existen múltiples herramientas en la web para crear e incluir favicons como:

• Favicomatic
• Favicon.cc
• Favicongenerator
• Favigen
• Degraeve Favicon
• Dynamic Drive Favicon
• Real Favicon Generator (recomendado)

Y mucho más que se pueden encontrar con una simple búsqueda en google.

Incluir

El código que normalmente usamos para incluir un favicon (en el caso de que sea una imagen PNG) es el siguiente y va ubicado antes de que cierre nuestra etiqueta HEAD en nuestro html

<link rel="shortcut icon" href="ENLACE AL FAVICON" type="image/png" />

Resoluciones

El problema de incluir una sola imagen de 16×16 es que esta no se visualizará correctamente en otros lugares en el que puede mostrarse nuestro favicon, por ejemplo, como icono en nuestro escritorio o en nuestra barra de navegación. Una de las soluciones es incluir nuestro icono como archivo .ico el cual soporta varios tamaños. Existen muchas herramientas que nos ayudarán a convertir nuestros archivos PNG o cualquiera sea el formato en el que tengamos nuestra imagen original, en un archivo .ico de varias resoluciones, y lo podemos incluir en nuestro código de la siguiente manera:

<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="DIRECCIÓN DE NUESTRO ARCHIVO .ICO">

Lo que estamos haciendo aquí es incluir un archivo .ico que tiene 5 diferentes resoluciones.

Los archivos .ico funcionan, sin embargo están mayormente en desuso, por esto recomendamos utilizar en cambio diferentes imágenes PNG.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

Otros usos

Nuestros iconos pueden ser utilizados por nuestros dispositivos móviles, Android, iOS o Windows.
Para cumplir con las exigencias de estos dispositivos necesitamos imágenes de incluso más tamaño, en el caso de que alguien quiera añadir nuestro sitio como icono en su tablet con Windows necesitamos una imagen de 144×144, al igual que necesitamos una imagen de mayor tamaño en el caso de que nuestro dispositivo tenga una alta densidad de píxeles.

Incluyendo nuestro favicon para dispositivos Apple Touch

A pesar de que principalmente incluimos estos iconos para dispositivos Apple Touch, estos tambien suelen ser utilizados por otras aplicaciones como Chrome en Android

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Incluyendo nuestro favicon para dispositivos con Windows 8

<meta name="application-name" content="NOMBRE DE NUESTRO SITIO WEB">
<meta name="msapplication-TileImage" content="/favicon-144x144.png">
<meta name="msapplication-TileColor" content="#2A2A2A">

Una herramienta perfecta

 

Real Favicon Generator es una de las mejores herramientas para crear nuestro favicon permitiendonos múltiples personalizaciones para los diferentes dispositivos, generando nuestro código HTML a partir de una sola imagen, en segundos.

---