Programas y Utilerías: Agrega un Favicon a tu sitio o Blog

¿Que es un Favicon?

Favicon es la abreviatura del inglés 'favorites icon', también conocido como icono de página, es un icono asociado con un sitio o página Web en particular.

Es la imagen que aparece antes de la dirección de un sitio en la barra de dirección, así como en las pestañas de un navegador Web.

El tamaño apropiado es de 16x16 pixeles, y el formato mas usado es ICO, sin embargo algunos navegadores también soportan los formatos de imagen GIF y PNG.

¿Por que agregar un Favicon a mi sitio o blog?

Es importante que tu sitio o blog tenga su “Favicon” propio, original y diferente, ya que es un elemento que permite distinguirlo del resto.

Por ejemplo:

Despliega la lista de favoritos de tu navegador, y veras que llaman mas la atención aquellos que tienen Favicon de lo que no lo tienen (los que no tienen aparecen con un icono que por defecto asigna tu navegador, el cual pues no tiene mucha gracia).

¡Como agregar un Favicon!

Lo primero que debemos hacer es tener una imagen que sea sencilla pero a la ves original y fácil de identificar.

Después debemos convertir la imagen a formato ICO, GIF o PNG a una resolución de 16x16 pixeles, para convertirla a formato .ICO “on line” para hacerlo en linea, ingresa en cualquiera de los sitios siguientes:

Favikon: http://www.favikon.com

FavIcon from Pics http://www.html-kit.com/favicon

Para Blogger puedes cambiar el Favicon desde Blogger in Draft dentro de los Elementos de la página, lo cual anteriormente hacíamos directamente desde la Edición de HTML de la plantilla.

1. Para realizar el cambio del Favicon desde el mismo Blogger, ingresa a Diseño | Elementos de la página y clic en “Editar” sobre el elemento Favicon.

2. Presiona en examinar | Seleccionas la imagen | Clic en “Guardar” y listo.

Se “supone” que ya esta el cambio y se tiene que visualizar el nuevo Favicon, si no se visualiza presiona en actualizar de tu navegador y con ello se tiene que ver. Ahora bien que si se pone rebelde Blogger y no se visualiza el nuevo Favicon, realiza lo siguiente:

(Cabe mencionar que por ello escribí previamente “se supone”, quien me pregunte por que pasa esto existen dos respuestas; la primera es que se trata de una plantilla modificada por el usuario, la segunda y la más común “jeje.. cosas de Blogger”)

1. Antes que nada sube tu imagen algún servidor como por ejemplo SkypeDrive


<b:include data='blog' name='all-head-content'/>

3. Localizada la línea de condigo anterior DESPUES de este agrega a tu plantilla el siguiente código:


<link href='URL DE LA IMAGEN DE TU FAVICON' rel='shortcut icon'/>

Donde dice “URL DE LA IMAGEN DE TU FAVICON” debes cambiarlo por la ruta completa (incluyendo http://) donde alojaste la imagen de tu Favicon, guarda los cambios, y listo ahora se vera por más rebelde que se haya puesto Blogger.

Ahora bien para el caso de un sitio Web común, simplemente pega el código anterior después del <head>

Con esto ahora tu sitio o Blog se vera mas personalizado y diferente del resto.

Saludos cordiales,

Cocoscuba