Descubre qué es el favicon y cómo debes instalarlo en blogger para sacarle el máximo partido

30.4.14

instalar favicon blogger

Si has visto el pequeño dibujo que aparece a la izquierda de cada nueva pestaña que abres ya sabes qué es un favicon. También es conocido como icono de página, pero me suena mejor en inglés, por eso lo llamaré así.
Todo blog debe tener uno y el tuyo no es una excepción!

A lo mejor ni se te ha pasado por la cabeza que puedes cambiar el favicon, pero ya te digo que sí que eres capaz con el tutorial que te detallo.

Si no lo has modificado, tienes el de blogger que es una B blanca encima de un fondo naranja.

favicon blogger


No es muy específico de tu blog, ¿verdad?


¿Por qué es necesario un favicon?


Normalmente tenemos más de una pestaña abierta en nuestro navegador. Si eres como yo debes tener ahora mismo unas 30 abiertas!

¿Cuántas pestañas tienes abiertas ahora mismo?

Lo ves!

Más de 5 seguro, verdad?

El favicon ayuda a tus lectores a encontrarte en medio del montón de pestañas que tienen abiertas.

Piensa que el favicon tiene que ser alguna cosa que te distinga, que cualquier lector pueda saber cuál es la pestaña en la que tiene abierto tu blog, sólo de un vistazo.


¿Cómo creo un Favicon?

No te preocupes que no hace falta que empieces a diseñarlo!

Existe la fantástica web www.favicon.cc , que va a crear el favicon por ti. 


Como puedes ver en el centro de la web, hay un cuadrado con cuadraditos pequeños. Esto será tú favicon final.

Cada uno de los pequeños cuadrados son píxeles de tu favicon. En total hay 256 cuadraditos (16x16 píxeles)

Se trata de rellenar todo el recuadro.

Si dejas algunos recuadros sin colorear serán transparentes y ser verá el color gris de fondo de las pestañas del navegador.

Antes de empezar puedes fijarte en los favicons de tus páginas favoritas para ver la gran posibilidad de juego que dan los 256 cuadraditos.

poner favicon blogger

También puedes buscar en Google Imágenes y verás que para gustos los colores!

ejemplos favicon blogger
via filosophy.com

Ahora tienes dos opciones a la hora de diseñar tu favicon:

1. Decides crear tu favicon a mano, pixel por pixel

Cuando digo crear la imagen a mano, me refiero a ir pintando cada uno de los cuadraditos a nuestro gusto.

Primero de todo lo que tienes que escoger es el color con el que quieres pintar en cada momento. Lo puedes hacer de tres maneras!

  1. Introduciendo el código del color. Aquí el código de color está en formato HEX.
  2. Clicando en el color que más te guste. En la columna de la derecha puedes escoger el color y luego dentro del cuadro perfilar la tonalidad, si lo quieres más claro o más oscuro.
  3. Escogiendo un color que ya has utilizado en la creación del favicon, pero no sabes exactamente cuál era. Esto lo puedes hacer clicando al cuentagotas que hay debajo de la goma de borrar  y seguidamente pinchas encima del color del favicon que te gustaría volver a utilizar.
creacion favicon blogger


Una vez escogido el color, debes ir rellenando pixel por pixel (cada uno de los cuadraditos del favicon) de diferentes colores, hasta rellenar todo el cuadro, que será lo que aparecerá en nuestra pestaña más adelante. 

Fíjate que también dispones del color transparente, que hace que se vea el fondo gris de las pestanãs de arriba. Que quede claro que cuando vemos un pixel de color amarillo con rallas (como al principio) quiere decir que es transparente!!


2. Cargas una imagen y la arreglas un poco para que se vea bien en la pestaña. 

Piensa en todo momento que no puede ser una imagen muy cargada ni con detalles muy pequeños, porqué sino no se apreciará bien en el favicon, que es muy pequeño.

Lo que yo hice fue cargar la mariquita de mi logo y luego la retoqué sin letras para que se viera del todo claro.

Si tienes un logotipo sencillo puede ser una buena imagen para tu favicon.

  • Lo que tienes que hacer es cargar la imágen (Import Image) y seguidamente puedes modificarla tal y como he explicado en el apartado 1, modificando pixel por pixel los colores que te apetezcan.

anadir favicon blogger

  • Justo debajo del dibujo que estás creando, pone Preview (en letras pequeñitas) y si te fijas bien es cómo quedará tu favicon una vez finalizado (he hecho una pequeña prueba).

favicon blog blogger

  • Cada nuevo pixel que pones lo ves al instante debajo, en el resultado del desarrollo de tu pestaña, que de verdad que mejorará el aspecto del blog!

  • También aparece en el favicon de la pestaña de arriba, es decir el favicon de http://favicon.cc es el favicon que tu estás creando, así lo puedes ver como queda en medio de las otras pestañas.

favicon blogger navegador

  • Cuando estés satisfecho con el resultado de tu super diseño, lo puedes descargar (Download) y guardarlo donde tu quieras, porqué más adelante lo vas a instalar en tu blog.


Desde que puse el mío, cada vez que encuentro un blog o página que no tiene uno de propio, me entran ganas de mandarle un correo enseñándole esta página para crear tu propio favicon!



¿Cómo instalo el favicon en mi blog?

Ahora sólo te falta añadir el favicon a tu blog Blogger.
  1. Tienes que entrar en Diseño, para poder modificar el aspecto general de tu blog.

    tutorial instalar favicon


  2. Arriba a la izquierda, edita (Editar) en el recuadro que pone Favicon y hay el de Blogger (es naranja con una B y ahora vas a poner el tuyo!).


    cambiar favicon blogger


  3. Selecciona el fichero que habías guardado antes con tu Favicon. (donde pone Escoger un fichero)

    sustituir favicon blogger

  4. Pincha en guardar.

    guardar favicon blogger


  5. No te olvides de guardar los cambios generales, que sino no quedará modificado en tu blog! 

    blogger favicon tutorial



Ahora ya puedes presumir de favicon y saber del cierto que tus lectores te van a encontrar en medio del montón de pestañas que tienen abiertas, porqué te sabrán diferenciar del resto!

¿Te habías fijado nunca en que tu blog no tenía favicon? ¿Ya sabes lo que vas a poner en él? ¿Piensas que es importante diferenciarse de los otros blogs en el navegador de tus lectores? Nos leemos en los comentarios!

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.