LuisOrtega

¿Qué es un favicon?

El favicon es la pequeña imagen que se muestra antes de la URL del sitio Web que estamos visitando y dependiendo del navegador en las pestañas de navegación y en los bookmarks o marcadores. Normalmente es el logotipo de la empresa o un logotipo representativo del sitio Web. A continuación dos ejemplos: IntelWeb!  Directorio de Empresas de México y Google.

¿Para qué sirve un favicon?

La utilidad de un favicon es la exposición de la imagen de la marca de que se trate. Es una oportunidad más para mostrar el logotipo de la empresa y de darle identidad al sitio Web.

¿Qué pasa cuando no tengo un favicon?

Generalmente en los casos en que un sitio Web no cuenta con un favicon definido, normalmente en su lugar se encuentra el logitipo del navegador de Internet (por lo menos en Internet Explorer). Como podemos apreciar a continuación con luis-ortega.com.

¿Los favicon funcionan en todos los navegadores de Internet?

Es muy importante mencionar que cada navegador de Internet tiene distintas formas de manejar un favicon y de mostrar los mismos. Por ejemplo a continuación te muestro como se muestra en Chrome luis-ortega.com.

Si comparamos las 2 imágenes anteriores, IE muestra el logotipo del propio navegador, sin embargo Chrome, muestra un favicon, no es un favicon que yo establecí, pero es el logotipo de mi empresa de hosting (hospedaje Web), Bluehost, que supongo esta en todos sus servidores. Si te preguntas porque en IE no se ve este favicon, puede ser por el tamaño y/o por la resolución del mismo. Tengo entendido que IE es muy estricto sobre las especificaciones que debe tener el favicon en cuanto a dimensiones, transparencia y tamaño, en este momento no conozco a detalle las especificaciones.

Otra diferencia que se puede apreciar es que en IE se muestra 2 veces, 1 en la barra de direcciones y otra en la pestaña cuando en el caso de Chrome solo se muestra en la pestaña.

Si tienes otro navegador puedes probar si se muestra alguno de los que hemos visto o no y en cuantos lugares se muestra el favicon.

¿Cuáles son las especificaciones para crear un favicon?

Formato: ICO.

Dimensiones: 16 pixeles X 16 pixeles.

Colores: 16 (4 bits).

¿Cómo se crea un favicon?

1. Puedes hacerlo utilizando software para creación y edición de imágenes, existen programas con opciones específicas para la creación de iconos como Microangelo.

2. Hay varios servicios gratuitos en línea que pueden generar tu favicon a partir de una imagen que les proporciones.

Creando un favicon para luis-ortega.com

Para crear el favicon que usare en luis-ortega.com, utilicé Powerpoint para crear una imagen, quería algo sencillo que tuviera las letras L y O, así que tras varias pruebas logre algo que me gusto, sencillo, con los elementos que quería y de buen gusto (para mí).

Tras una búsqueda de alrededor de 2 minutos encontré un servicio en línea del que encontré muy buenos comentarios Dynamic Drive (http://tools.dynamicdrive.com/favicon/). En este servicio les indicas la imagen de origen y ellos te generan tu favicon de manera gratuita (solo te piden que si te sirvió la herramienta si quieres pongas su placa con un enlace a su sitio Web), además de darte las instrucciones para “activarlo” en tu sitio Web. A continuación la pantalla de creación.

Los pasos son muy sencillos.

1. Dar clic en “Seleccionar archivo” y seleccionar el archivo de nuestra computadora.

2. Dar clic al botón ” Create Icon”.

3. Aparecerá la sección “FavIcon (16×16) preview” (nos muestra como se verá nuestro favicon en la barra de direcciones).

4. Dar clic en el botón “Download Icon” y escoger el directorio de nuestra computadora donde lo vamos a guardar.

Con esto ya tenemos nuestro favicon.

¿Cómo publicar un favicon?

1. Subirlo a la raíz de tu sitio Web y verificar que este ahí. Por ejemplo: “http://www.luis-ortega.com/favicon.ico”.

Nota: En mi experiencia con esto es suficiente para que se muestre el favicon. Aunque en general también se recomienda el paso 2.

2. Agregar en la sección HEAD del código HTML de todas tus páginas (o por lo menos de la página principal) la siguiente línea de código:

Con esto ya está disponible nuestro nuevo favicon. Es importante mencionar que normalmente el favicon no se muestra inmediatamente, puede tardar algunos días antes de empezar a mostrarse. Y según un comentario en el sitio de Dynamic Drive en IE puede desaparecer de vez en cuando (esto se debe a un problema del propio navegador).

Bueno en mi caso tras limpiar el cache y refrescar varias veces Chrome ya les puedo mostrar el favicon en luis-ortega.com, no sé si será el definitivo pero la idea es esa.

¿Y tú tienes un favicon en tu sitio Web? ¿Conoces mas herramientas o servicios en línea para crear favicon que quieras compartir? Agrega un comentario a esta publicación.