¿Para que sirve un favicon?

Una de las cosas que muchos diseñadores, o desarrolladores web olvidan poner son los favicon, y parece algo intrascendente, pero son parte importante de nuestro sitio web. La realidad es que hay varios que no saben ni que es un favicon, ni para que sirve, ni como se pone. Viendo esto me he decidido a hacer este pequeño articulo, así que empecemos…

¿Que es un favicon?

¿Haz visto esa imagen pequeña que aparece en la parte superior de tu explorador?

De manera practica, eso es un favicon, así que si eres de los que se preguntaba el nombre de ese dibujito que aparece en la pestaña de tu navegador, aqui lo tienes.

Una definición mas completa seria que un favicon es una imagen pequeña de 16×16 pixeles, y son usados por los exploradores de internet para representar el sitio en el que se encuentra.

La medida de 16×16 no es la unica que existe, tambien los hay de 57×57, 75×75, 154, y 114; las medidas anteriores son para dispositivos móviles y son igual de importantes que el favicon tradicional.

Así que ¿para que sirve un favicon?

La verdad es que en un principio servian como una especie de contador de visitas, o medidor de popularidad, ya que no existian herramientas como google analytics y de mas…

En la actualidad su papel es mucho mas importante, es una manera rapida en la cual el usuario puede saber en que sitio esta o navegar entre pestañas si leer el titulo del sitio. Es una manera de posicionar tu marca que al final de cuentas es lo que nos interesa a todos.

Si aun no te convences intenta cambiar de pestañas si favicon’s y me dices que tal ha sido tu experiencia!

¿Como crear un favicon?

Es en realidad bastante sencillo, partamos por la base que el diseño de este debe ser cuadrado, y considerando que el tamaño mas grande es de 154 pixeles comencemos haciendo un diseño de esas medidas, tengan en cuenta que este favicon tambien funcionara como icono de aplicacion web para Iphone Black Berry y Android, así que hagan algo bonito.

Te recomiendo usar Photoshop y descargar este plugin para poder crear archivos ICO lo demas es muy sencillo, reduce tu icono a las medidas que te he dado y guardalas como .PNG a excepción de la de 16 pixeles, esa ultima la guardaras como .ico ( para eso sirve el plugin que te di arriba).

Una ves hecho esto guarda los archivos en la carpeta de tu preferencia, te recomiendo la carpeta raiz, y agrega estas lineas de codigo a tu index.html

 

An error has occurred. Please try again later.


¿ Te Gusto ? Comenta y compartelo!