Como añadir un icono favicon a tu web.

El favicon es el icono que aparece cuando abres una web en la esquina izquierda de la pestaña del navegador donde está abierto como os muestro en la imagen.

Como veis, ya he añadido uno a mi web.

No es algo imprescindible para nuestra web pero si que quedará mas profesional si lo añadimos, y es muy fácil. Además este favicon es el que se usa si hacemos un acceso directo de la web en nuestro escritorio.


La imagen debería esta guardada en formato ICO. ICO es un formato propietario de Microsoft para almacenar varios ficheros BMP (bitmaps) juntos, y normalmente se utiliza para contener iconos de escritorio de Microsoft Windows. Lo más conservador es que el icono tenga unas dimensiones de 16x16 píxeles y 16 colores (usando la paleta estándar de 16 colores de Windows), pero teniendo en cuenta que los iconos se pueden arrastrar al escritorio como accesos directos, y que la mayoría de la gente navega con 256 colores y más, se puede usar perfectamente un icono de 32x32 y 256 colores. De hecho, como el formato ICO puede contener varios iconos, se pueden meter cuatro iconos dentro de un mismo fichero favicon.ico: 16x16x16 colores, 32x32x16 colores, 16x16x256 colores y 32x32x256 colores, y Windows se encargará de escoger el más apropiado para cada contexto (al menos en teoría). En algunos navegadores como Firefox se admiten otros formatos como PNG, BMP o SVG (dibujo vectorial).

En el caso de que usemos varios iconos en un archivo .ICO dependerá del navegador el tamaño del icono que se utilizará, por ejemplo: en Google Chrome al crear un acceso directo (aplicación) en el escritorio usará el icono de 64 píxeles, en Internet Explorer al crear un icono en la pantalla de inicio de Windows 8, usará un icono de 144 píxeles.

También se puede crear un icono de 57 píxeles para mostrar en el escritorio del iPhone u otros dispositivos de Apple.



A la hora del diseño hay que tener en cuenta que cuantos menos píxeles tenga menos detallado será (lógicamente) pero si usamos tamaños grandes, puede ser que el diseño empleado tampoco se vea bien, por ejemplo si usamos alguna figura o dibujo, hay que tener en cuenta que el espacio disponible para la visualización será el mismo así que el dibujo se “comprimirá” un poco y quizás no se aprecien bien los detalles.

Podemos hacer nuestro favicon con cualquier programa de dibujo o retoque fotográfico, desde el eterno Paint hasta Gimp o Photoshop, además tenemos alternativas online para hacernos el nuestro si no sabemos usar mucho estos programas o nos apetece liarnos la manta a la cabeza. Al final del post os dejaré algunos enlaces para estos servicios.



Si hacéis el favicon en PNG tenéis que aseguraros de buscar la opción “Guardar transparencia” o “Recordar píxeles transparentes”, porque si no, saldrá el fondo blanco y según el diseño elegido no quedará bien.


¿Como lo añadimos a nuestra web? Como ya dije es muy sencillo; simplemente subimos la imagen a alguna carpeta de nuestra web, por ejemplo a la carpeta “Images” o “Imagenes” que sería recomendable que tengáis hecha. La imagen no tiene que llamarse obligatoriamente favicon pero si que la terminación sea .ICO (en el caso de que no la hayáis hecho en PNG o así). Recordamos que se pueden poner varios iconos en el archivo .ICO pero bueno, para los que estamos empezando igual es mucho lío, nos conformamos de momento con poner una.



Para terminar, en el código de nuestra web ponemos en la sección head la siguiente línea:
<link type=”image/x-icon” href=”favicon.ico” rel=”icon” />


y si queréis tener dos iconos, uno para la pestaña y otro para el escritorio añadís esta línea:

<link type=”image/x-icon” href=”favicon.ico” rel=”shortcut icon” />



Pero ya os aviso de que la segunda línea en algunos navegadores y en algunos SO igual no tiene efecto pues el comportamiento de los favicon a veces es un poco errático por decirlo de alguna manera.

Bueno y para terminar os dejo algunas webs para haceros el favicon sin que tengáis que hacer un curso de Photoshop.


http://www.genfavicon.com/es/

http://www.xiconeditor.com/Default.aspx

http://www.favicon.pro/es/