Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

29 mar 2010

El Favicon

El favicon (o icono de favoritos, minicono, imagen de pagina) es una pequeña imagen que se asocia a una página web, como puede ser la g minúscula azul de Google, la B naranja y blanca de Blogger, f blanca con fondo azul de Facebook. Pero, ¿Podemos crear una y ponerla para nuestro blog?

Desde hace unos meses, Blogger ha implementado
un widget propio en vista de diseño, facilitando la 
creación del Favicon. Este tutorial ya no es necesario
usando ese widget.

Nada mas facil. Primero tienes que crear la imagen, se recomienda que sea pequeña (16x16 píxeles, lo mejor, aunque puede ser mas grande como 64x64 píxeles) y puede ser un gif animado, jpg, png, un ico, o cualquiera en realidad, aunque después opcionalmente (aunque mejor si lo haces) debes seguir las instrucciones al colocarla dependiendo del tipo que sea. Para buscar la imagen, Images Google te puede ayudar.

Segundo, tienes que acceder a tu plantilla (En blogger, Diseño -> Edición HTML), y al principio, justo en la siguiente linea después del <head>:
<link href='Dirección Favicon' rel='shortcut icon' type='image/gif'/>
o también
<link href='Dirección Favicon' rel='icon' type='image/gif'/>
(Se pueden usar ambos a la vez, para mayor compatibilidad)

Siendo Dirección Favicon la dirección de internet donde esta alojada la imagen.

El image/gif hay que cambiarlo segun el tipo de imagen que este en la Dirección (Si es un GIF, sería image/gif, un JPG image/jpg, un PNG image/png y si es un icono de windows ICO, image/vnd.microsoft.icon). Este dato type se puede quitar, pero funciona mucho mejor el favicon con este dato.

6 comentarios:

  1. Es muy interesante lo que dices casi al final, de poner en type="image/vnd.microsoft.icon" cuando se trata de un .ico. Llevaba tiempo queriendo cambiar mi favicon por una versión mejorada en ico, menos pixelada, y no sabía por qué no funcionaba.

    Ahora ya sí que va, y seguramente también se verá en IE, aunque eso no lo puedo comprobar todavía.

    ResponderEliminar
  2. Los image/vnd.microsoft.icon como su nombre indica, son tema de microsoft, que de hecho los .ico son un tipo de archivos de Windows, todo de la época que Internet Explorer se apropiaba de los estandares en el HTML cambiandolos a su gusto. Esto realmente en el papel no es así, simplemente funciona en los navegadores actuales porque se puede mantener.

    A ti se te ve pixelado por el hecho que sea un GIF. Un GIF tiene una paleta de 256 colores, y al redimensionarla... pues queda mal. Si lo redimensionas, no lo hagas como GIF, sino como cualquier otro, y despues cambiala a GIF, que es lo que parece que ha pasado y por lo que se ve asi. Al final queda mejor.

    Se me ha olvidado comentar (no se si lo añadiré) que el mayor problema con el favicon es cuando se borra de la caché, por lo que desaparece hasta que el navegador quiere. Es algo a tener en cuenta.

    ResponderEliminar
  3. LA guerra que nos dio esto


    Blogger lo tenía que poner ya en el diseño

    ResponderEliminar
  4. Lukitas, este sitio está muuuuuy bueno! (lo voy a recorrer tranqui)

    Te dejo una news que me llegó por correo esta mañana respecto de Facebook, por si acaso no la tenés:

    "Facebook CEO Mark Zuckerberg just wrapped his keynote to kick off Facebook's F8 developer conference.
    In a nutshell: Facebook wants to be ubiquitous across the web. Not just at Facebook.com.
    Here are the bullets:
    The plan is to make Facebook Connect, which is already being used by 100 million people, bigger. This is the system where you can log in to other sites (such as this one) using your Facebook credentials.
    Facebook will add "Like" buttons to sites across the web. If you like content, you can just hit "like." It will be noted by Facebook. If more of your friends click "like," it can be added to your stream on Facebook. This may then send traffic back to the originating site, which gives publishers an incentive to put more Facebook buttons on their pages. Zuckerberg expects 1 billion "likes" for Facebook in the first 24 hours.
    Facebook showed someone using CNN and seeing what his friends were just reading on the site via a widget. The "like" button and other features are making the Web more social.
    The biggest applause was when Zuck said they were killing the policy that made third-parties delete all info after 24 hours. This gives sites to access to more data for longer. But there could easily be privacy concerns about this.
    Facebook is also introducing a social toolbar for sites to add at the bottom of their page. With that you can share plenty of things on Facebook more easily. You will also be logged into Facebook and be able to chat with people.
    In addition to all this, Facebook and Microsoft are collaborating to kill Google Docs. (And to give Microsoft's online version of Office a chance.) Docs.com is Microsoft's online version of Office. It will be tightly integrated with Facebook. If you want to share a doc, you can send it to a Facebook inbox. (More data here.)
    And finally, Facebook has 400 million users sharing 25 billion things a month"

    Otra: Pleaseeeeeee, enviame (si aún te queda) una invitación para el Google Wave!!!

    Besazooooooo!!!!

    ResponderEliminar
  5. ¡Hola!
    Pues la verdad es que ha ayudado bastante pero por alguna razón el fondo se ve blanco cuando es una imagen png, mi fondo cuando lo pongo a editar es transparente.
    Gracias un saludo ^^
    ¡Besos!

    ResponderEliminar
    Respuestas
    1. La verdad no entiendo la pregunta:
      - Si estas hablando del fondo del favicon, no estoy seguro si funciona bien la transparencia en él. Además si lo subes con el widget de blogger, no sé si lo cambia a jpg al subirlo.
      - Si te refieres al fondo del blog, o una parte, si es un png correcto con transparencia, y el fondo en sí es transparente, el color será de lo que haya debajo de de todo y si no hay tipificado algo, será blanco. Lo suyo es que el fondo fondo sea de un color, incluso aunque haya una imagen completa que lo tape, por si acaso.
      Un saludo.

      Eliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.