18 abr. 2011

¿Cómo personalizar el icono del blog (Favicon)?



Si te fijas, cuando visitamos una web o un blog verás que en la pestaña de navegador aparece un icono que identifica el sitio. Dicho icono es lo que se llama Favicon. Lo que haremos es sustituir el Favicon de blogger por un icono propio para nuestro blog a partir de una imagen jpg, gif o png.
El favicon es un archivo gráfico con extensión .ico y normalmente de tamaño 16x16 pixeles. Precisamente en esto radica la "complejidad", ya que es un formato poco habitual. De lo que normalmente disponemos son de archivos jpg, gif o png pero no un archivo .ico.

Paso 1. Generar el archivo favicon.ico a partir de una imagen
  • Conecta con el servicio GenFaicon
  • Selecciona la imagen de partida (jpg, gif, png) y presiona Upload.
  • Indica el tamaño. 16x16 y presiona Capturar y previsualizar, fíjate que puedes mover la zona a capturar de tu imagen original.
  • Una vez lo tengas, presiona Descargar el favicon, guárdalo en un lugar que luego sea fácil encontrarlo. Debe llamarse favicon.ico

Procedimiento actualizado el 08/06/2011

Paso 2. Personalizar el favicon del blog
  • Debes entrar a blogger pero a través de esta dirección http://draft.blogger.com (versión más avanzada de blogger)
  • Abre la pestaña "Diseño" y luego "Elementos de la página"
  • En la parte superior izquierda verás una zona llamada "Favicon" (nueva opción de blogger publicada el 8 de Junio de 2011)
Nueva funcionalidad para cambiar el Favicon en Elementos de la Página de Blogger
  • Pulsa "Editar". Se abre una nueva ventana donde tienes un botón para "Examinar"
  • Busca el icono generado en la paso 1 y pulsa "Abrir" y posteriormente "Guardar"
  • Guarda la plantilla y visualiza el blog.
Nota: Si vez que no se muestra tu nuevo icono, usa la opción de eliminar de tu navegador el caché, cookies y demás y vuelve a visualizar el blog. El nuevo icono se localizará automáticamente en el raiz de la dirección del blog, ejemplo www.iniciablog.com/favicon.ico

Con este nuevo procedimiento ya no es necesario publicar el favicon en un hosting ni personalizar el código de la plantilla. Queda también resuelto el problema de incompatibilidad que se presentaba con Internet Explorer 9 donde no se veía el favicon personalizado de blogger y que fue reportado por uno de nuestros seguidores. Si quieres ver el método utilizado anteriormente haz clic aquí (PDF)

Como en cada entrada, te invito a usar los comentarios para dejar tu opinión, además si te ha gustado, una forma de ayudar a que iniciaBlog lo conozca más gente es haciendo clic en los botones de Twitter y Facebook. ¡Gracias!


Más información ¿Cómo poner el botón de...:?

Premio Bitácoras

Aviso Legal

Licencia Creative Commons
iniciaBlog - Te ayuda con Blogger a mejorar tu blog
iniciaBlog se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Basada en una obra en www.iniciablog.com.

Creado por Jesús González

Política de Privacidad de iniciaBlog | Política de Cookies
2015 © Jesús González es el autor de iniciaBlog.com
Tema creado por Way2themes y adaptado por inciciablog