Tutorial favicon

¿Por que debe utilizar FAVICON en su web?

Conociendo al favicon

Antes de saber la importancia de este elemento, un poco de historia obligada para ponernos en tema. El nombre “favicon” proviene de la unión de favorites con icon, es el ícono asociado a un sitio o página web. Su lugar en los navegadores es contiguo al título de la página. Y comenzó a usarse para identificar a las páginas en los favoritos almancenados. También aparecerá en los resultados predictivos de búsquedas.
La extensión distintiva es .ico y el archivo resultante para ser guardado en nuestro sitio es: favicon.ico

Su medida original fue de 16×16 píxeles, actualmente es de 32×32. Desde su inserción en la versión 4 de Internet Explorer en el año 1999, poco y nada cambió hasta el 2010 con el HTML5.

Código de inserción

El atributo rel de los favicons se debe a la evolución. La versión de Internet Explorer 5 representaba la relación entre el ícono y la página. Pero la especificación se mantenía en 2 palabras separadas “shortcut icon”, por lo que no fue hasta el año 2010, HTML declaró icon solo, estandarizando su identificación.

<!—Para IE6 a 10 -->
 <link rel="shortcut icon" href="path/to/favicon.ico">
<!—Para todos los demás navegadores -->
 <link rel="icon" href="path/to/favicon.ico">

¿Sigue siendo importante tener un favicon?

Nuestro cerebro reconocerá mucho más fácil una imagen que una palabra, primer elemento de vital importancia a la hora de representar el nombre al cual está asociado nuestra web.

 

favicon g2k hosting

 

 

Si no utilizamos un favicon, en su lugar aparecerá un documento en blanco.

tab navegador sin favicon

 

 

 

Pensemos muy bien el diseño y uso del favicon en nuestra página web. Sepamos que nos diferenciará felizmente de otro que no tenga, el reconocimiento de nuestro logo seguirá la línea de diseño de nuestra identidad corporativa.

Generadores online gratuitos de FAVICON

www.favicon.cc tools.dynamicdrive.com/favicon www.genfavicon.com

Especiales: Piecon
favicon generado con piecon

 

 

 

 

Si queremos ir un poco más allá del típico favicon, tenemos a Piecon, para darle un toque diferente. Con librerías javascript aplicada en el código, generado un gráfico animado progresivo del tipo “torta”. http://lipka.github.com/piecon/

Lectura recomendada

http://www.netmagazine.com/features/create-perfect-favicon

Leave a Comment