Personalizando el blogger #5 – Inclusión de un Favicon

¿Qué es un favicon?
Del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular.

Por ejemplo algunos favicons famosos son el de Wikipedia Wikipedia, o el de Yahoo! Yahoo!.

Si nos fijamos, nuestro favicon por defecto es el propio de Blogger:

Blogger también permite que cambiemos nuestro favicon al blog.
Vamos a ver cómo hacerlo de una manera sencilla, quedará de la siguiente forma:

1 – Primero, deberemos de crear ésta imagen que se mostrará para nuestro blog. Ésta imagen debe de ser cuadrada y del tamaño que queramos, ya que luego reduciremos a la hora de hacer el icono. Yo por ejemplo he realizado la mía en tamaño 160×160, es ésta:

2 – Una vez tengamos ésta imagen deberemos de realizar nuestro icono a partir de ella. Éste icono deberá tener formato .ico y un tamaño de 16×16. Refiriendome al formato .ico no tenemos porqué seguir ni hacer este paso de ésta manera, pero ciertos buscadores (Explorer) no admitirán otros formatos (JPG,PNG, etc) que sí admiten el resto de buscadores (Firefox, Opera, Chrome).
Podemos usar distintos servicios Web que nos ayudarán en ésta conversión de tamaño y formato para nuestro favicon.
Yo, para éste ejemplo, usaré: favicon.cc que vemos en la siguiente imagen:

3 – Hacemos click en “Import Image“, seleccionamos nuestra imagen y hacemos click en “Upload“. Se mostrará entonces nuestro favicon en el editor y podremos modificar colores, transparencias, etc. Incluso disponemos de un “Use Animation” en el que podremos incluir más frames de nuestra imagen modificada, haciendo que nuestro favicon parezca que tenga movimiento.
Disponemos tambien de una vista “Preview” de cómo quedará nuestro favicon en una barra de direcciones.

4 – Una vez hayamos hecho los cambios oportunos, si es que queremos hacer alguno, podremos descargar nuestro favicon clickeando en “Download Favicon“. Y ya disponemos de nuestro favicon en formato .ico y tamaño 16×16.

5 – Ya realizado el favicon deberemos alojarlo (subirlo) a algún servicio de hosting. Yo por ejemplo lo subiré a mi cuenta de DropBox.

6 – Por último, editaremos nuestra plantilla de la misma forma que hacíamos en otras entradas. Iremos a “Diseño” – “Edición de HTML” y en nuestra plantilla buscaremos el texto: e insertaremos antes de él lo siguiente:

<link href='URL-de-tu-favicon' rel='shortcut icon'

type=’image/x-icon’/>

Modificando y cambiando el texto URL-de-tu-favicon por la dirección de nuestro favicon.Y listo, ya tendremos nuestro favicon para nuestro blog.

Entradas y enlaces relacionados:
http://es.wikipedia.org/wiki/Favicon
http://granisla.blogspot.com/2006/07/cmo-usar-un-favicon-en-blogger.html
http://www.favicon.cc/

Deja un comentario

Maximum 2 links per comment. Do not use BBCode.