Crear icono de página en el navegador (favicon)

Hoy voy a intentar explicaros cómo crear un icono de favoritos (favicon) en la web para que salga junto al título en la barra de navegación. De este modo la web quedará más profesional que si dejamos que aparezca el hueco en blanco.

Lo primero que necesitamos es una imagen de 16 x 16px. Como el tamaño es bastante pequeño, recomiendo tomar un detalle de la web (por ejemplo un trozo del logotipo), ya que de lo contrario, si intentamos abarcar una zona muy grande, no se verá nada. Photoshop cuenta con una herramienta de recorte que nos permitirá coger el detalle que queramos de una imagen y extraerlo al tamaño que deseemos.

Una vez tengamos la imagen, lo que hay que hacer es convertir el formato actual al formato .ico. Para ello necesitamos usar algún programa que nos facilite la conversión para asegurarnos que será compatible con la mayoría de los navegadores.

Por último, cuando ya tengamos el favicon, lo guardamos en una carpeta del sitio y ponemos el siguiente código dentro en el head de la web:

<link rel="shortcut icon" type="image/x-icon" href="icono.ico">

Con esto ya tendríamos el icono de favoritos en el navegador.

Como complemento a lo anterior, podéis usar la herramienta online FavIcon Generator de Dynamic Drive para convertir la imagen en .ico. Los formatos que soporta la aplicación son: .gif, .jpg, .png, y .bmp. Depende de si queréis conservar transparencias, usad un formato u otro para convertirlo (.gif y .png).