jueves, 4 de enero de 2007

FAVICONS, como cambiar el icono del navegador

Hoy toca el tema FAVICONS, y vamos a ver como cambiamos el icono del navegador.
Primero elegimos un icono. El nuestro lo hemos hecho a pelo con el paint.exe osea que tampoco va a ser nada del otro mundo... he aqui nuestro bmp y futuro favicon:


La diferencia con el icono es evidente. He aquí lo mismo en formato icono:

Normalmente uno sube el icono en formato .ico, se edita la plantilla y se pone entre <head> y </head> esto:

<link rel="shortcut icon" href="favicon.ico"></link>


Pero para desgracia de los maños, con Blogger los icos no funcionan. La solución es coger el icono en formato .png y poner:

<link rel="shortcut icon" href="http://favicon.png"></link>

1. CONSEGUIR UN ICONO

Para conseguir un icono hay varios métodos. Por ejemplo visitar FavIcon from Pics es uno.


Es muy fácil, eliges una imagen de tu ordenador, vas a la web de FavIcon from Pics (Favicon Test Page o Animated Favicon Test Page)
En "Source Image" seleccionas la imagen de tu disco, luego clicas en "Generate FavIcon.ico", allí te lo genera y luego "Download FavIcon". Así te bajas un zip que al descomprimirlo van 3 ficheros: un .ico un .png y un .txt.
(en Blogger basta con subir el .png)
Te lo hacen y ademas allí mismo puedes testear como queda en el navegador clicando en "Test in Browser" poniendo tu url, pero aviso que a los de Blogger nos da error.

En cualquier caso conseguiremos nuestra imagen .png que es lo importante.


2.SUBIR IMAGEN Y EDITAR LA PLANTILLA

El siguiente problema para los Bloggers puede ser puede ser sustituir el

<link rel="shortcut icon" href="http://favicon.png"></link>

al editar la plantilla del blog .

Bueno, pues es muy facil, cuando subas la imagen, cambias a la pestaña de edición HTML y miras como se llama la imagen que acabas de subir, no?

Sera algo bastante largo e ininteligible, y la frasecita entre <head> y </head> quedará más o menos así:

<link rel="shortcut icon" href="http://4.bp.blogspot.com/_tOU...
MWnFgApU/RZ6t7j0JvVI/AAAAAAAAABg/pVeww5-aj...
3I/s320/iconopaz.PNG"></link>

y creo que con esto todo el mundo podrá poner un precioso icono en el explorador.

Y recuerden: "Nada es imposible, todos somos capaces", o al menos eso dice David que por cierto voy a poner un link a su blog.

http://html-basico.blogspot.com/2006/09/tablas-de-colores.html

Alli explica los primeros pasos de HTML, con ejemplos muy claros y muy bien explicado de lo que ustedes se pueden encontrar al editar por primera vez la plantilla de su web.



a que no ha sido tan dificil?
en

16 comentarios:

  1. Anónimo28 de mayo de 2007, 19:25:00 CET

    Muy bonito el blog, de verdad, me encanta.Pero tengo una duda:Podrías subir una imagen de dónde se ubica en el html el
    link rel="shortcut icon" href="http://favicon.png"/link? Gracias y adelante con el blog.

    ResponderEliminar
  2. Ciercita1 de junio de 2007, 5:08:00 CET

    claro! ya está puesta :)

    ResponderEliminar
  3. El Gordo Cabrón19 de marzo de 2008, 12:50:00 CET

    Muy útil y bien explicado. Mi blog ahora luce un bonito icono gracias a tu post.

    XD

    Añadir que sólo sirve en Firefox, o más bien que en Explorer 6 no funciona.

    Un blog el tuyo bastante interesante, aunque quizá un poco caótico... será por el viento del cierzo...

    ResponderEliminar
  4. Eureka [web]19 de marzo de 2008, 13:27:00 CET

    Hola! una pregunta, yo generé el icono en photoshop, no con la pagina que recomendaste para generar el Favicon, hay alguna medida para ese icono? es 16x16px?
    porque seguí tus pasos, pero no se ve el icono :(
    Recien empiezo con esto y me es muy util tu articulo.

    Gracias!

    ResponderEliminar
  5. GONZALO25 de marzo de 2008, 6:15:00 CET

    muy bueno pero la plantita que elegi aparece solo arriba del NAVBAR y solo me quedo un icono en el navegador de una pag en blanco...hace dos hrs que estoy c esto y ya me traee de los pelos...ayuda se agradece...saludos

    ResponderEliminar
  6. Anónimo9 de mayo de 2008, 22:58:00 CET

    Los maños estan de suerte.
    NO ES VERDAD que con Blogger los .ico no funcionan. Lo acabo de probar.

    Asi que no es necesario que andeis creando un .png

    ResponderEliminar
  7. Directivo Pyme26 de agosto de 2008, 14:03:00 CET

    Gracias!!!

    Lo he conseguido, la verdad es que si un torpe como yo lo consigue, cualquiera puede,
    ANIMO
    Directivo Pyme

    ResponderEliminar
  8. Unknown30 de octubre de 2008, 14:52:00 CET

    tengo un problema, cunado dices "cuando subas la imagen"

    como la subo y donde la subo porque no tengo ni idea.

    gracias

    ResponderEliminar
  9. Anónimo6 de noviembre de 2008, 22:35:00 CET

    Sos un kapo!...

    ResponderEliminar
  10. peperiinnaa21 de enero de 2009, 16:19:00 CET

    no puedooooooooooo!!!!!!!!!! D=
    kiero esta imagen http://www.generacionpulgar.com/favicon.ico en mi blog i no la puedo ponerrrrrrrr

    ResponderEliminar
  11. Adri S.22 de enero de 2009, 22:49:00 CET

    Muchas gracias por este post me ha servido de mucho.
    Gracias

    Mi blog por si quieres verlo:http://descubrelasciencias.blogspot.com/

    ResponderEliminar
  12. Hugo Sn.5 de julio de 2009, 5:22:00 CET

    mmmm

    lo ise tal como dises pero no sirve sigue ese icno de blog que ago??

    ResponderEliminar
  13. Alberto9 de abril de 2010, 21:20:00 CET

    Genial, funcionó, muchas gracias, otro mañico que ha podido cambiar el icono de blogger.

    ResponderEliminar
  14. proyectosbeta15 de mayo de 2010, 20:42:00 CET

    muchísimas gracias. Me sirvió demasiado..
    :)

    ResponderEliminar
  15. Ian Cavalcanti15 de julio de 2010, 2:55:00 CET

    Gracias, me ha servido.

    ResponderEliminar
  16. Anónimo23 de enero de 2011, 18:00:00 CET

    Funciona! Muchas GRacias!
    ________________________________
    http://www.blogdecamisetas.com/

    ResponderEliminar