Buenos días, hoy Viernes te traigo un pequeño tutorial para personalizar el Favicon de una vez por todas.
Blogger ofrece muchas alternativas y libertades para diseñar tu blog y personalizarlo al 100%, partiendo de una plantilla simple y con un dominio personalizado no sabrán ni que usas blogger, pero el avanzar y renovarte o quedarte atrás, es cosa tuya.
Como dije en un post anterior es suficiente con mantener el dominio de blogger 'blospot.com' como para también mantener el navbar (si lo tienes quitalo ya) y el icono de blogger como Favicon ¿no?
Odio entrar a un blog en el que se han tomado el trabajo de mejorar el diseño en cuanto a colores, tipografías, disposición, y sin embargo... te encuentras con estas dos herramientas tal cual, si estas personalizando tu blog, lo primero que debes hacer es borrar todo aquello que lo vincule con Blogger (incluido el dominio), esto hará que des una sensación mas cuidada y de mayor profesionalidad.
Ahora si y sin mas preámbulos vamos a quitar el logo de Blogger y a personalizar el Favicon.
¿Qué es un Favicon?
Un Favicon es un icono que se utiliza para identificar una pagina web en la barra de direcciones, este no es un simple icono, ya que permite teñir de identidad propia al sitio, mejorar su imagen personalizada y marcar la diferencia con el resto, dentro de cualquier navegador, directorio de favoritos,etc.
Hay que decir que todos los navegadores no lo muestran de igual manera... depende de las características que utilices para crearlo.
Para evitar que esto ocurra y que tu Favicon pueda verse igual desde todos los navegadores, la recomendación es que lo crees en formato '.ico'.
Este tipo de icono es cuadrado, en sus orígenes el tamaño óptimo era de 16-16 px, sin embargo, actualmente lo puedes crear de 32-32 px.
Sabiendo estos pequeños datos sobre lo que es el Favicon y sus medidas óptimas, ahora lo que debes hacer es crearlo.
¿Cómo crear un Favicon?
La creación de un Favicon se puede llevar a cabo al igual que la creación de cualquier icono, siempre teniendo en cuenta que debe estar dentro de un cuadrado, el fondo puede ser transparente (lo cual es aconsejable) o de color.
Lo ideal es tener en cuenta las medidas 16x16 o 32x32 para que a la hora de subirlo y adaptarlo no se deforme.
Puedes utilizar Photoshop, Inkscape, Power Point, Google Drive Dibujo o Paint....cualquiera de ellos es valido, haz un icono que te identifique o que identifique tu sitio para utilizarlo como marca de identidad.
Como hacerlo:
Pues ni corta ni perezosa yo me he ido directa a Canva, ahí es donde cree el Favicon, que también lo utilizo como logo del blog.
- Entra en Canva.
- Elige 'Use custom dimensions'...lo puedes ver arriba de `Twitter header':
- Ahí debes introducir las medidas, elije 32x32 y verás que se te queda pequeño el espacio para crear...así que yo utilice 100x100, si puedes hacerlo directamente con los parámetros recomendados mejor que mejor.
- Crea el icono que deseas que aparezca como Favicon, no te vallas al típico corazoncillo por favor, se creativa y piensa en la imagen que quieres dar, en tu identidad.
- La pega de Canva, esta en que no permite fondo transparente, al menos yo a día de hoy no lo he podido aplicar...si alguno sabéis sobre esto, decirme que para mi es el único inconveniente que tiene....si eliges esta opción intenta elegir fondo blanco para que resalte el icono.
- Guarda.
Opción para adaptarla a las medidas correctas:
Tanto el icono que hayas creado con unas medidas mayores, como una imagen que quieras utilizar (muchos utilizan su foto de perfil para favorecer a su marca personal o personal branding), puedes adaptarlas a las medidas óptimas de un Favicon.
Para ello utiliza el siguiente programa, favicononline.es : Es tan fácil como subir la imagen que deseas, elegir las medidas y dar a crear Favicon, al guardarlo hazlo como 'favicon.ico' (con ese nombre) y ya estaría adaptado para subir a Blogger.
Haz pruebas, no te ciegues en querer poner tu loco o una imagen como Favicon, que al reducirla quede como un pegote nada claro y feo...el Favicon debe ser claro, legible y por supuesto acorde con la imagen que quieres transmitir.
Otros programas que puedes usar para crearlo:
Con estos programas crearas el Favicon de forma correcta, con los parámetros y características que debe tener para ser óptimo.Yo no los he utilizado, por que de hecho los conocí después de crear el mio y como salio bien lo he dejado así, pero si lo vas a crear desde cero, esta es una buena opción.
- Faviconer: con este programa puedes dibujarlo desde cero, yo lo he intentado y mmmm no se me ha dado muy bien, pero quizás a ti si. También tienes la opción de subir una imagen y convertirla en un archivo 'ico.', es decir, en Favicon.
- Favicon.cc : un programa muy parecido al anterior.
Recuerda que puedes crearlo con el programa que desees, Photoshop, Power Point, Inskape...el que quieras, siempre teniendo en cuenta que este pequeño icono debe favorecer la imagen de marca de tu blog.
Como instalarlo en Blogger
Ya tienes tu Favicon hecho, ahora lo que vas a hacer es instalarlo en tu blog.
- Vamos al menú de Blogger a la opción de diseño, ahí vas a ver arriba a la izquierda el widget del Favicon, como en la siguiente imagen:
- Presiona 'editar'.
- Al presionar este botón te saldrá la siguiente ventana:
- Ya esta, lo que tienes que haces el 'seleccionar el archivo', es este caso el Favicon que hayas creado, recuerda que este guardado como archivo 'ico'.
- Guarda.
Ya sabes como hacerlo, por tanto, puedes repetirlo las veces que quieras hasta dar con el Favicon que creas que cuida tu imagen, que queda limpio y que se ve bien.-------------------------------------------------------------------
Espero que te guste este tutorial y que te sirva, para poco a poco, darle un punto mas profesional a tu blog, ya sabes, elimina todo aquello que tenga que ver con Blogger, no por nada, sino por el hecho de que tu blog este del todo personalizado.
¿Que te ha parecido en post? ¿ya tienes tu Favicon?....cualquier cosa, ya sabes, nos vemos en los comentarios.
Muchas gracias por leerme, comparte si te ha gustado y si crees que puede ayudar a otros.
Besos!!