viernes, 11 de junio de 2010

Cambiar el icono de tu blog en Blogger

Ya que estos días me estoy peleando un poco con los diseños de las plantillas y el diseño del blog en general (como podréis comprobar los que habéis entrado durante la última semana), quiero explicar un poco algunas cosas que parecen tontas pero que cuando les da por no salir, no hay manera.

El favicon es el icono que aparece en la barra de direcciones del navegador, es decir junto a la url de la página, y que en el caso de los blogs alojados en blogger por defecto es una bonita B blanca sobre fondo naranja. Bien, pues voy a explicar en pocos pasos como cambiar tanto ese icono, como el que aparece al añadir la web a favoritos o a marcadores. ¿Te preguntas qué tipo de utilidad tiene esto? pues está claro, ninguna, meramente estética o ganas de llevar la contraria a blogger.

Antes que nada tendrás que buscar un icono o imagen que te guste para añadirla como icono. Actualmente muchos navegadores permiten que se trate de cualquier tipo de imagen y tamaño, pero para evitarnos problemas (sobre todo con mi amado Explorer) busca o genera uno que sea de tipo ico y de un tamaño de 16x16, te aseguro que te ahorraras quebraderos de cabeza.

Para crear un icono existen en internet multitud de páginas web que te ofrecen ese servicio, así que no hace falta que te bajes ningún programa específico para hacerlo. Aquí tienes algunas webs que te permiten seleccionar una imagen de tu ordenador y crearte el correspondiente icono, si buscas en el señor google encontrarás multitud, te dejo aquí unos cuantos:

Si te gusta el icono que utiliza otra web, tambien puedes conseguirlo rebuscando en el código para ver donde se aloja, o extraerlo directamente utilizando la web www.getfavicon.org/es
    Si la web no te permite el alojamiento del icono, deberás descargar a tu equipo el icono y alojarlo en tu hosting, si dispones de uno, o en un alojamiento gratuito de imágenes. Debes tener en cuenta que la mayoría de alojamientos de imágenes no permiten la subida de iconos. Como siempre buscando por internet encontrarás unos cuantos, pero te dejo uno aquí por si no quieres entretenerte en buscar: http://iconj.com/

    Respecto al nombre de archivo del icono, en las webs normales es recomendable colocarle el nombre favico.ico, pero en el caso de Blogger no es recomendable, ya que su propio icono lleva ese nombre y es posible que por ello no funcione, por lo cual porque cualquier otro nombre que quieras, o déja el que por defecto te proporcione el alojamiento.

    Ahora que tienes el icono preparado entra a tu cuenta de Blogger y ve a la sección de Diseño, subsección de Edición HTML. Aunque no sepas nada de HTML o CSS no te asustes.

    Busca en el código de la plantilla lo siguiente: shortcut icon, si aparece lo tendrás que modificar para que quede como digo a continuación o bien eliminarla, y si no aparece se crea y listo.

    Si no aparece el código buscaremos ahora la etiqueta <head> (el cierre de la cabecera del documento HTML) y justo antes de ella escribiremos las siguientes líneas, modificando el "http://www.alojamientoweb.com/icono.ico" por la ruta exacta donde se aloja el icono deseado:

    <a href="http://www.alojamientoweb.com/icono.ico" rel="shortcut icon" type="image/ico"></a>
    <a href="http://www.alojamientoweb.com/icono.ico" rel="icon" type="image/ico"></a>

    Atención con las comillas, ya que en una web normal podemos colocar comillas dobles, pero parece que en blogger no funcionan correctamente.

    Si no hay ningún problema, con estas dos líneas deberíamos haber conseguido que al menos en Firefox y Explorer se visualice el icono seleccionado tanto como icono de pestaña, junto a la url, o al añadirlo como marcador o favorito.

    4 comentarios:

    1. Me sirvio pero solo en internet explorer en google chrome sigue esa icono B

      ResponderEliminar
    2. Este comentario ha sido eliminado por el autor.

      ResponderEliminar
    3. </head>

      <link href='http://elultimosonido.com/favicon.ico' rel='shortcut icon'/>

      <link href='http://elultimosonido.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

      <link href='http://elultimosonido.com/favicon.ico' rel='icon' type='image/x-icon'/>

      <body>

      Entre el cierre de </head> y al apertura de <body> Como el ejemplo anterior....

      Para casi todos los navegadores ...Incluido Opera y Safari...

      Espero haberlos ayudado :D

      ResponderEliminar
    4. gracias, yo también lo cambié aunque no aparece hasta que no has entrado en la página....
      ver: lasmus-as.blogspot.com
      un saludo, Carmen

      ResponderEliminar

    Si aún respiras... demuestramelo