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/pVew
w5-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?



17 comentarios:

6uill3 dijo...

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.

Ciercita dijo...

claro! ya está puesta :)

vix! dijo...

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...

Eureka dijo...

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!

GONZALO dijo...

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

El suricato. dijo...

Estupendo el post, me ha venido como anillo al dedo.

Un saludo desde www.elsuricato.com

Anónimo dijo...

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

Directivo Pyme dijo...

Gracias!!!

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

jestarc dijo...

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

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

gracias

Anónimo dijo...

Sos un kapo!...

Foto-Romantico dijo...

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

Adri S. dijo...

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

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

H-ugo!!! dijo...

mmmm

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

Alberto dijo...

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

fires dijo...

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

Ian Cavalcanti dijo...

Gracias, me ha servido.

Anónimo dijo...

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