viernes, 26 de diciembre de 2008

Cambiar el favicon de un blog (de blogger)

Dejo de lado la música durante un rato, para explicar un pequeño truco para tunear cualquier blog de blogger, concretamente el favicon. Un favicon es ese pequeño icono que aparece junto a la barra de direcciones de cualquier navegador o en cualquier pestaña, y que sirve para identificar más fácilmente un sitio web o dotarle de mayor personalidad. En el caso de los blogs de blogspot es ese horrendo icono con esa especie de B anaranjada.

Si también estáis cansados de ver este pequeño icono presidiendo vuestro blog, podéis seguir los pasos siguientes para cambiarlo.

Primero tenemos que crear el icono. Cualquier persona con conocimientos suficientes de Photoshop puede hacerlo creando una imagen con extensión .ico. El tamaño de estos iconos puede ser de 16x16 píxeles o 32x32, aunque el tamaño recomendable es el de 16x16 píxeles.

Si alguien no domina Photoshop o cualquier otro editor gráfico, la opción más fácil es visitar Favicon.cc. Aquí sólo tenemos que seleccionar “Import Image”, indicamos la imagen que queremos utilizar y la subimos. Nos aparecerá el icono generado y una muestra de cómo va a quedar. Si nos gusta le damos a “Download Favicon” y ya tenemos el icono creado y guardado en nuestro disco duro.

El siguiente paso es subir este icono a cualquier hosting que permita subir ficheros con la extensión .ico, por ejemplo Pixali. Subimos nuestro icono y después copiamos el contenido de la casilla "HTML (for websites)" en el bloc de notas o donde se quiera, porque después vamos a necesitarlo:
<a href="http://www.pixali.com/viewer.php?file=zgd7ppkfhdyv2ky3a3gn.ico"><img src="http://www.pixali.com/files/zgd7ppkfhdyv2ky3a3gn.ico" border="0" alt="Pixali" /></a>

Ahora nos dirigimos ya a nuestro blog, concretamente a la sección “Diseño”, seleccionando después la opción “Edición de HTML”. En el código buscamos esto:
  <head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Justo después añadimos la siguiente línea:
<link href='xxxxxxxxxxxx' rel='shortcut icon' type='image/ico'/>

Reemplazando las x’s por la dirección URL del favicon que hemos subido a Pixali, y que es lo que está indicado entre comillas después de src, en el trozo de código que antes hemos pegado en el bloc de notas.
http://www.pixali.com/files/zgd7ppkfhdyv2ky3a3gn.ico

Una vez añadida esta línea de código guardamos la plantilla y nuestro blog ya dispondrá de un favicon personalizado.

3 comentarios:

Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
Anónimo dijo...

no sabia que se podia cambiar, gracias

altatt dijo...

Pues sí que se puede hacer, eso sí, mejor hacerlo con un servicio de hosting de imágenes que no sea Pixali, ya que ahora no permite enlazar directamente a sus imágenes.