Se llama Favicon (Favorites icon), a esa pequeña imagen que aparece en la barra de direcciones del navegador, en los marcadores (favoritos) y en los títulos de las páginas.
Para empezar, se necesita tener la imagen. Si bien algunos navegadores aceptan cualquier formato, otros sólo admiten el formato ICO (icono). Para crear el archivo podemos utilizar cualquier programa. Lo ideal, sería que contuviera dos imágenes, una de 32x32 y otra de 16x16. Si esto no es posible, deberíamos optar por la de 16x16, los resultados no será óptimos pero nada es perfecto.
Otra manera, la más simple (yo usé esta) es convertir una imagen en icono mediante algún servicio online como Chami que nos permite subir cualquier imagen desde la PC, sin limitaciones de tamaño o formato y crea los archivos necesarios.
Una vez que tenemos el archivo (que deberemos llamar favicon.ico) deberemos subirlo a la web. Esto puede ser complicado ya que Blogger no admite este tipo de imágenes y tampoco lo hace la mayoría de los servicios gratuitos. Personalmente, usé Fileden, es el único que encontré. Si alguien sabe de otro, avise.
Finalmente, una vez subido el archivo ICO, tomamos nota de la dirección URL en donde se encuentra alojado y debemos ir a la plantilla de Blogger para agregar el código necesario en el encabezado de la plantilla, entre los tags <head> y </head>, antes del tag <title>. Una plantilla típica empezaría así:
Una vez hecho esto, guardamos la plantilla y listo.
NOTA: acuérdense de forzar la recarga de la página (Ctrl + F5) y, si es necesario, borren los temporales de internet para evitar que se siga leyendo desde la caché.
Otra manera, la más simple (yo usé esta) es convertir una imagen en icono mediante algún servicio online como Chami que nos permite subir cualquier imagen desde la PC, sin limitaciones de tamaño o formato y crea los archivos necesarios.
Una vez que tenemos el archivo (que deberemos llamar favicon.ico) deberemos subirlo a la web. Esto puede ser complicado ya que Blogger no admite este tipo de imágenes y tampoco lo hace la mayoría de los servicios gratuitos. Personalmente, usé Fileden, es el único que encontré. Si alguien sabe de otro, avise.
Finalmente, una vez subido el archivo ICO, tomamos nota de la dirección URL en donde se encuentra alojado y debemos ir a la plantilla de Blogger para agregar el código necesario en el encabezado de la plantilla, entre los tags <head> y </head>, antes del tag <title>. Una plantilla típica empezaría así:
<?xml version="1.0" ....... >Debido a una limitación de Internet Explorer, ambas instrucciones son necesaria, una se usa para los favoritos y la otra para la barra de direcciones.
<!DOCTYPE html ....... >
<html ....... >
<head>
<b:include data='blog' name='all-head-content'/>
<link href='URL_icono' rel='shortcut icon' type='image/x-icon'/>
<link href='URL_icono' rel='icon' type='image/x-icon'/>
<title><data:blog.pageTitle/></title>
Una vez hecho esto, guardamos la plantilla y listo.
NOTA: acuérdense de forzar la recarga de la página (Ctrl + F5) y, si es necesario, borren los temporales de internet para evitar que se siga leyendo desde la caché.
279 comentarios:
Hmmm, sospecho que mi comentario no te llegó, por si acaso desde la vieja escuela te digo:
Gracias! llevaba un buen rato (meses) intentando poner un bendito favicon en mi blog, consulté varias páginas donde "explicaban" como hacerlo... hasta que te leí...y mi vida cambió (jajajaja, suena a anuncio esotérico)
Bueno, tal vez no mi vida, pero si mi blog. Así que de nuevo: Mil gracias!
Me alegro que sirviera, Pris
Por fin hice lo del favicon y ha funcionado exactamente 24 horas, de repente han desaparecido , las ordenes siguen en la plantilla pero no sale, y no entiendo por que?, como sea cosa de los derechos de imagen manda huevos porque era de un sello postal que yo misma tengo, manda narices si le enseño el sello a mi vecina o mando una carta con el también lo borraran??
La imagen es inacesible porque, muy probablemente, el sitio donde lo has creado sólo lo guarda temporalmente. Debes generar ese ícono y luego, subirlo a algún servidor permanente. Como es un PNG, puedes descargarlo a tuPC y luego, subirlo a Blogger y colocar la dirección URL de la imagen. Lo subes en cualquier post, copias la dirección y luego lo eliminas, con eso queda guardado allí.
Con lo cual entiendo que me puede pasar con cualquier otra imagen, por lo tanto si abro un post solo para eso que deje como borrador donde vaya cargando todas las imágenes habré solucionado este y cualquier problema posterior no??, gracias por tu ayuda eres un encanto.
Exactamente. Puedes crear un post que guardas como borrador y allí subes las imágenes de la plantilla, por ejemplo. Eso sí, recuerda que siempre suben como miniaturas así que en muchos casos, deberás cambiarle la URL. Por las dudas, dejo un enlace para los detalles.
Muchísimas gracias por facilitar la información.
Ha sido muy útil y se realiza de forma sencilla ^^
Gracias y saludos!!
Hola JMiur! Pues te cuento que he intentado poner tu truco en practica pero no soy capaz de verlo (y no se si el motivo es porque uso explorer en lugar de firefox). Es un favicon animado que esta alojado en: http://yourupload.com/files/get/s-evCOrIqw/favicon4.ico
pero al ir a este enlace, no se ve el favicon! que puedo hacer?
gracias de antemano
ℓa moCosa:
Me parece que donde está alojado no permite el acceso directo a la imagen y por eso, si abres esta URL lo que ves es una página web y no la imagen. Vas a tener que alojarlo en otro servidor:
http://yourupload.com/files/get/s-evCOrIqw/favicon4.ico
muchas gracias, pero por casualidad no sabra´s donde puedo alojar el favicon animado, verdad?
En realidad, ese archivo no tiene formato ICO sino GIF así que simplemente, podrías cambiarle la extensión y subirlo a ImgaeShack, por ejemplo. como o es in ícono sino un gif, recuerda que no se verá en Internet Explorer.
ok muchas gracias, me ha sdo de ayuda, y por cierto, si hay otros servicios como Xoo Image.
Y de pasada Visita mi blog: tontoloide
Ok, gracias.
Saludos.
NO ME FUNCIONA:
Fijate por favor JMiur: jugadapreparada.blogspot.com
Fíjate en esta entrada.
Hola! gracias por el codigo! ;) estoy trabajando en una web para descargar peliculas, aun no esta terminada, pero dentro de unos dias estara habilitada jeje.
pequeño aporte: www.iconj.com (te genera el favicon hasta con el codigo, es buenisimo y tiene favicons prediseñados, dinamicos, etc.)
saludos!
viejo muchas gracias
http://www.xooimage.com/fr/ puede hostear .ico también, espero les sea de ayuda. Gracias por el tuto, vagabundia!
Hola,me resulto bien, he alojado el archivo inmediatamente en este host
http://www.iconj.com/
por que Fileden me dicen que formatea sus archivos a los free users cada mes.
muchas gracias.
saludos.
No sé qué significa formatear los archivos. Fileden exige que la cuenta sea utilizada de manera regular, ingresando en ella y si no se hace,pasado un tiempo te envia un mail recordándote que lo hagas. las cuentas que no tienen actividad, son cerradas.
Ah,muy bien,entonces la persona que me hablo sobre ello estaba equivocada,muchas gracias,entonces si se puede usar fileden con confianza,mientras se trabaje frecuentemente con ella.
gracias
claro un hosting puede ser, www.paginawebgratis.es solo se puede crear para alojar este tipo de imagenes y si las aceptaa, saludos
muy buena la informacion 
Es posible que se sepan muchos mas servicios para subir la imagen sin que de problemas, pero uno que funciona fijo es www.opendrive.com
ojala os sirva y gracias por la ayuda ^^
Hola saludos, fijate que tengo mi blog y le coloque el favicon. Me aparece en la pestaña del navegador y todo, en lo unico que no me aparece es cuando lo añado a un lector de rss. ahi los demas tienen sus favicon propios pero en el mio aparece el de blogger, qeu puedo hacer? mi dominio es www.hugarrio.com
No sabría responderte, Hugo. Podrías, tal vez.intentar colocar las etiquetas debajo de esto a ver si de esa manera sobrescribes el favicon que coloca Blogger por defecto:
<b:include data='blog' name='all-head-content'/>
¿Algo más?
¿Y por qué a mí solamente me sale el favicon en la página principal? He seguidos todos los pasos al dedillo y únicamente me sale dicho favicon en la primera página. Si pinchamos en otra ya aparece el favicon de Blogger. ¿Alguna solución? La página es:
http://www.trailersyestrenos.es/
Gracias
Neo:
Porque en las páginas individuales no se ve en el código fuente que haya una etiqueta LINK con el favicon así que, debes tener alguna condición en la plantilla que hace eso.
ami tampoco me sale asi que no se que tengo que acer..
Saludos!!!
Lo más probable es que la imagen que usas esté alojada en algún lugar que es inaccesible. Sería mucho más simple de responder si tu perfil fuera accesible
Sos Grosso.. la unica forma que me funciono.. gracias.
tengo un problema, cuando pongo el codigo y lo salvo todo va bien, le doy vista previa y si sale la imagen pero cuando entro a la pagina desde la barra de direccion o google me sale la imagen de .tk que es una verde
que puedo hacer
Eso, seguramente ocurre poque es un IFRAME; no sé cuál es el blog al que te refieres.
aa olvide poner la direccion http://www.ecconexiontj.tk
y descubri otra cosa, cuando meto la direcion con .blogspot si sale
http://www.ecconexiontj.blogspot.com
Es porque ese sitio donde has sacado el dominio, utiliza FRAMES; deberás consultar con ellos si es que te permiten hacer alguna clase de cambio.
macho pues no consigo q me vaya
podiais revisarmelo a ver si soy yo o si pasa algo?
http://ampaleoz.blogspot.com/
Fijate en esta entrada. Sólo debes cambiar la posición de las etquetas, Muévelas debajo de:
<b:include data='blog' name='all-head-content'/>
o justo antes de </head>
Gracias por el truco JMiur, funciono perfecto (lo unico q en ie no me aparece en la barra de direcciones).
Para el que busca una alternativa a fileden, yo lo aloje en: http://wimg.co.uk/
Por favor, cada vez que entro a una entrada en mi blog, me sale el favicon de blogger...
Por favor, ayuda ;)
No sé en cuál de tus blogs pasa eso. Fíjate en esta entrada y verifica que el archivo con la imagen sea accesible.
Hola, lo primero de todo, felicitarte por tu trabajo, explicas muy bien, y seguí todos tus pasos y perfecto, recomiendo una cosa para todos y es que no deben darle a vista previa, porque si no sale la B de blogger, me he roto lacabeza con eso un montón de veces.
MUCHAS GRACIAS OPOR TODO.
Hola Jmiur
A mí no se me ve tu favicon (Uso IE)
Y en mi blog cuando lo tenía puesto (Ya lo quité)solo se veía en Firefox
Bye Bye
No se ve en IE porque uso una imagen GIF y en Internet Explorer sólo se admiten imágenes en formato ICO.
Encontré uno que funciona, se selecciona el archivo y se sube directamente, como imageshack.
Enlace: http://www.picpanda.com
Gracias por el dato, es segundo blog donde uso tu "truco".
Usé esta página para los link, no piden inscripción ni nada.
http://www.imageboo.com/
Saludos!
muchass!!! gracias!!!!! me sirvio muchisimo!!!
mira como quedo! www.misgarabatos.com.ar
siempre me salvan tus tutoriales!
saludos y exitos
No entiendo que pasa.
Yo uso Firefox e implementé este código y todo pero cuando abro el blog al parecer en la pestaña parece que está cargando un momento pero al último siempre aparece la B de Blogger, pero después abrí Internet Explorer, abrí mi blog ahí y se veía correctamente el ícono que puse.
No sé que pasaría, en firefox no se ve y en Internet Explorer sí.
No sé si me pueden ayudar.
http://imgeorgee.blogspot.com/
Mueve las dos etiquetas y colócalas debajo de:
<b:include data='blog' name='all-head-content'/>
Eso debería resolver el problema.
Gracias m funco...
Subi mi favicon a
http://www.iconj.com/favicon_hosting.php
Yay!, muchas gracias
lo pude hacer!
Gracias, aquí mi blog. ¡FUNCIONA! ;)
http://subbitacora.blogspot.com/
Gracias funciono perfecto
Muchísimas gracias JMiur!... Tenía mucho tiempo buscando este tip, por más que lo inetentaba no me quedaba bien... Hasta hoy! ;)
Y fué gracias a las instrucciones tan claras que nos das... Mil gracias!
Saludos cordiales
Me alegra que sirviera
¿Hay algún truco para hacer el blog el favicon a aparecer en todas las páginas, no sólo la página de base?
Por ejemplo:
En el blog que tengo, mi favicon personalizado sólo aparece en la página http://burrocrata.blogspot.com
y no aparece en las páginas de mensajes, por ejemplo, http://burrocrata.blogspot.com/2010/09/obama-e-rasmussen-vao-cupular.html
Ya, gracias JMiur.
Seguramente tienes algunos condicionales que no estan funcioanndo correctamente ya que, en el home, hay etiquetas que se repiten y en las páginas individuales hay etiquetas que no aparecen. No sé que condicionales utilizas o cómo están armados pero, revisa el código fuente que te muestra el navegador y ahí verás que l oque se genera es raro.
Gracias JMiur, sabiendo que se trata de un error en mi código fuente ya es una gran ayuda. Voy a investigar el error. Un cordial saludo.
(No sé si el comentario va repetido, debido a un error 503 llegó en el form)
El comentario salió bien. Ese error está extendiéndose, hoy ha sido insoportable
No me funciona el codigo para el cambio de favicon. Ke puedo hacer?
mi blog es http://rincondenekromancer.blogspot.com/
mi mail es atorres33@hotmail.com. Agradezco tu ayuda, ya llevo rato sin lograr el cambio.
Saludos!
Nekromancer:
Mueve las dos etiquetas y colócalas debajo de:
<b:include data='blog' name='all-head-content'/>
Sino,colócalas justo antes de </head> porque Blogger coloca su propio favicon así que debemos sobrescribirlo.
Mil gracias JMiur. Ahora si me funciono a la perfeccion
Perfecto
Hola, he leído los comentarios y seguido las instrucciones, quisiera que por favor me des una mano pues estoy aprendiendo cosas en HTML con este Blog...
Qué estaré haciendo mal?
www.girardottravel.blogspot.com
De paso tu sabes sí es posible crear Sub Etiquetas en Blogger? y cómo se manejan desde las entradas el especificar la subetiqueta?
Mil gracias.
Revisa si no tienes repetida esta etiqueta:
<b:include data='blog' name='all-head-content'/>
porque parecería que sí según se ve en el código fuente y, la segunda, que debe estar debajo de los favicons que has agregado, los sobrescribe y eso, vuleve a colocar el favicon por defecto.
En Blogger no hay sub-etiquetas.
Esta es la opción que funciona con mi plantilla, he probado con un favicon al azar porque aun estoy buscando logo para mi blog, por si a alguien le pasa lo mismo en google hay muchísimas imagenes de "favicon" que les pueden servir, igual que "generadores de favicon online".
Un saludo
OK MUY BUENO
¡Bien!, funciona.
Gracias.
Hola Miur:
te molesto porque sucede lo siguiente:
Estoy usando Fileden para el favicon y hoy me encuentro que en en
Menéame (http://www.meneame.net/story/pajaros-al-amanecer ) alguien aconseja no ingresar en mi blog (http://fotossinporque.blogspot.com/)
"por estar concectado con Fileden que según dice es un conocido sitio de distribución de softwear malicioso.
Google ha encontrado software malicioso en su sitio dsi continua,etc"
Estimaré tu opinión y consejo al respecto, desde ya muchas gracias.
Eso ocurre cuando en Fileden, alguien aloja archivos que los navegadores consideran dudosos y el mensaje de advertencia aparecerá en cualquier sitio que utiilce ese servicio, esté enlazando o no a ese archivo dudoso. Es el sitio Fileden completo el que queda "marcado" y le corresponde a ellos resolver el problema.
Si alguien aconseja algo así en Menéame es porque es un simple ignorante o alguien a quien el gusta escandalizar (no me extraña de Menéame)
¿Qué puedes hacer? Ya que no hay nada que puedas conseguir quejándote en Fileden o aclarando el asunto, lo razonable es que quites el archivo de allí. Si es un favicon, puedes alojarlo en Google Sites y olvidarte de futuros problemas.
Gracias JMiur
Un abrazo.
tenia un codigo para hacerlo, pero era diferente y difil de comprenderm intente agregarle los datos por adivine pero no funciono, ahora si fue enseguida !
Hola, ¿te importaria mirar mi blog, para ver que es lo que tengo mal?
Llevo toda la tarde intentandolo y nada.
Gracias.
http://conlaps3.blogspot.com/
¿Qué es lo que ves mal? ¿Estás usando el nuevo sistema para agregar favicons?
Muy interesante.. gracias por la ayuda!
saludos!
www.futgolporsiempre.blogspot.com
jMiur Podrias Ayudarme a poner sub pestañas ..... Asi como en este blog. con esa misma apariencia .... Os Agradezco si me puedes ayudar
http://cityvilleextremereloads2.blogspot.com/
EL sitio al que haces referencia, aprece no existir:
"Lo sentimos, el blog de cityvilleextremereloads2.blogspot.com se ha eliminado. Esta dirección no está disponible para blogs nuevos."
Gracias! no sabes. Estuve toda la tarde buscando y hacia todas pero ninguna me salia !! sdsadsad
muy util me sirvio yo hospedo mis archivos en dropbox es muy bueno se los recomiendo.
JMiur, estoy con un problema, no logro ver mi favicon, reviso la URL de la imagen y anda perfectamente. Pero el favicon no se ve. ¿Que puede ser?
No sé en qué blog no lo ves; yo los veo en los dos que tienes en el perfil.
Llegado el caso, puedes eliminar esas etiquetas y usar el sistema de Blogger; en la primera página de diseño puedes seleccionar el favicon y el sistema se ocupa del resto.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...