Hoy les voy a enseñar a cambiar el favicon. Para aquel que no sabe, el favicon es ese pequeña imagen que aparece en los navegadores al lado de la barra de direcciones. Lo que está marcado en rojo es el favicon:
El hecho de cambiar el favicon es porque le da un toque especial y personal a nuestro blog, ya que por defecto todo blog en blogger trae el favicon de la B en blanco sobre el fondo naranja.Lo primero que debemos hacer es crear una imagen de 16x16 pixeles de tamaño. El diseño depende de cada blog en particular, lo mismo que los colores e imagenes que le quieran poner.
Una vez que tenemos la imagen 16x16 pixeles que queremos la guardamos. Aqui hay que prestar atención, ya que esa imagen que creamos es un archivo .jpg y lo que necesitamos nosotros para hacer el favicon es un archivo .ico. Para convertir ese .jpg a un .ico vamos a dynamic y clickamos en examinar, elegimos la imagen que creamos y le damos a Create Icon. Esto nos creará el .ico y lo descargamos a nuestra PC.
Ahora ya tenemos nuestro favicon en formato .ico, lo que tenemos que hacer ahora es subir esa imagen a algun hosting de imagenes que soporte los .ico. Yo recomiendo que se creen una cuenta en fileden y ahí van a poder subir su .ico sin problemas.
Una vez que subimos el favicon solo nos queda insertarlo en el blog. Para ello vamos a Diseño y a la Edición HTML del blog y buscamos el siguiente código:
<title><data:blog.pageTitle/></title>
Y justo antes del mismo pegamos este código:
<link href='http://sitio.com/favicon.ico' rel='shortcut icon'
type='image/x-icon'/>
Donde debemos reemplazar http://sitio.com/favicon.ico por la url del favicon que subimos en fileden. Guardamos los cambios y está listo, ya tenemos nuestro propio favicon.
75 comentarios:
hacía un largo rato que estaba buscando como cambiarlo. Después lo pongo en práctica. Gracias !!!
Pablo:
Me alegro que te sirva, y gracias por comentar.
Grande vicarlone!!!! De a poco elnegroentanga se va enchulando de la mano de tus consejos. Muchas gracias!!!!
PD: Lindo el Mangatar :)
SKA:
Me alegra que te sirviera.
Y gracias a ti por el avatar ;)
hola, y sabes como cambiarlo aleatoriamente??
sharysce:
Creando una imagen .gif en vez de .jpg puedes crear un favicon que cambie. (No se si es eso a lo que te refieres)
Amigo fijate que cuando le doy guardar a mi plantilla, despues de pegar el codigo de la dir del icono, me aparece Se ha encontrado más de un artilugio con el ID: HTML1. Los ID de artilugio deben ser exclusivos. No se si me podes ayudar con esto.
Willy:
Busca el ID HTML1 y ponele otro numero, eso es lo que debes hacer.
Esta es una buena pagina para crear favicons: http://www.html-kit.com/favicon/
exekiel:
Interesante, gracias por compartirla.
Hola Vicarlone, pasé a avisarte que ya está tu favicon en mi blog y a conocer el tuyo.
Saludos!
Devolviendo la visita ...
Gracis por el aporte. en IE aparece cambiado el icono del blogger. pero en Safari no. se puede hacer algo para que lo reconozca.? Gracias (www.capitanphantom.blogspot.com)
capitanphantom:
Si creaste el archivo .ico debería de aparecer en todos los navegadores.
hola. gracias por la explicacion, pero tengo una pregunta, hice todo eso y ya sale mi favicon pero solo en la pagina principal, en las demas url de mi sitio sale el de blogger... como puedo arreglar eso?? ... me escribes porfa... chaespce@gmail.com
Hola,ya seguí todos los pasos y fijate que mi favicon aparece en la entrada de mi blog y no en la barra de tareas, tu sabes a que se deba? te agradecería mucho que me comentaras, te dejo mi dirección por si quieres ver como sale, www.carlosvalenzuelaenzacta.blogspot.com
y mi correo es carmarvalbol@hotmail.com muchas gracias por tu ayuda.
Pues estas colocando el código del favicon en el lugar errado, fijate bien donde lo debes poner.
Esta ya es la segunda ves que me sacas del apuro ;) enserio muchas gracias!!
EnriqueGuerrero:
Me alegra que te sirva.
Saludos!
che, tengo la imagen, todo, pero nose, no me sale, te dejo la imagen para que si podes descargarla y subirla, hacer el codigo y mandarmelo a mi mail si podes (yetobita.series@gmail.com y el icono es este: http://rapidshare.com/files/193168363/favicon.ico.html ) desde ya muchas gracias, muy piola la web :).
Llevaba visitados varios blogs en los que decían como cambiar el favicon y hasta que no he leido esta entrada tuya, ninguno me había funcionado. Sinceramente, gracias.
Flinn Sorrow
yetobita:
Ya te envie un email
Flinn:
Me alegra que te sea de utilidad. Gracias por comentar y saludos!
sha puse el favicono en el blog pro kisiera saver si hay alguna manera d hacer q me lo detecte el dominio corto mi pagina es metalword.tk hay alguna forma d q se vea mi favicono en vez d la tk dl dominio?
se ruega pronta respuesta desde sha muchas gracias =)
gracias ati lo cambie aunq no es muy bonito pero esa b de blogger n m gustaba
Me alegro que te sea de ayuda, saludos!
Si me funciono muchas Gracias amigos
Gustan comprobar aquì
Muy bueno man, ya cambie el mio chekalo http://temasmarvin.blogspot.com/
emm..al fin aprendo.luego de tantos intentos. o creo que en los demas blogs no explicaron bien..jeje
saludos!
@Yhonny E.
Me alegra que te sirva.
Saludos!
ps.si.me sirvio de mucho..oye me gustaria saber si me podrias ascesorar en algo.es un trabajito con un archivo.que no logro entender el por que de las cosas.si puedes responderme.porfavor.para saber si puedes ayudarme
Pero que es lo que necesitas saber?
Es sencillo.solo que ahora no logro tener el discernimiento necesario para ello!. se trata de un theme que he estado trabajando.lo trabajo Ivan de zona cerebral.he estado preguntando en el post, pero no he recibido respuesta alguna. entonces quiero hacer las cosas yo mismo por otro lado.
La razon por la que ahora no tengo un buen discernimiento hacia blogger,es por que a veces tengo que descargar un archivo y no puedo, por que los virus de la pc no me dejan, cuando es en formato rar, no peudo descomprimirlos yo mismo en la pc, y lo que hago es descomprimirlo en linea en Wobzip.org
Ahora.te enseñare el theme.para que lo descargues si puedes y entiendas lo que te tratare de dar a entender!
Theme CompositioVeras que trae sus instrucciones, bueno. ire a el grano. yo ampliamente pude jugar con los codigos, tanto como los de los post, tamaño, estilo, como la sidebar. pero un elemento me hiso una mala jugada, y es el de la sidebar de las tabs, como veraz me refiero a la wdget de tres columnas!
donde explica ivan de esta manera
Tabs. Antes de insertar el código HTML relativo al recuadro de pestañas, es necesario que descargues el script contenido en el archivo con el formato RAR disponible en los enlaces de descarga y lo alojes en cualquier servicio de hosting (gratuito o de pago) que te permita enlazarlo y activarlo de forma externa, como Google Pages por ejemplo (recomendado). Hecho esto, en el panel de edición HTML busca el script situado justo encima de la etiqueta </head> y sustituye la dirección url del script por aquella en la que hayas subido el archivo tabs.js. Por ejemplo:
Ahora, te explico lo que hise,
descargue el theme en formato rar, luego fui a
Wobzipy Descomprimi el archivo de el theme en formato rar, y me dio varios codigos, el primero
era el theme en un documento de texto,que fue el que inserte en blogger en forma copia y pega.hasta tener el efecto de el theme tal cual muestra la demo.
el segundo en formato Xml, que es como un documento con una imagen blanca, donde puedo insertarlo directamente con examinarlo en blogger.
el tercer elemento que me dio wobzip fue un archivo de las tabs,fue alli cuando pense, que seguramente es ese a el que se refiere Ivan. lo cierto es que.
llegue a alojar el archivo en Skydrive, y en rapidshare sin lograr ningun resultado bueno.siempre que iba a editar las tabs en el widget. pasaba era rabia.jeje
quiese alojar el archivo de las tabs en Filiden.pero me decia que no se podia. entonces mas me senti frustrado.
me gustaria que me ayudases en ello. quisiera poder por fin aprender a trabajar con esas tabs. que son muy utiles.
gracias por tu atencion..
saludos!
Porque no pruebas alojarlo en Google Pages? o bien en algun hosting gratuito como http://www.000webhost.com/
google pages sirve?..y como hago eso?... la ultima vez que lo hise. cree como un blog aparte. y no entendi muy bien lo que hacia.hasta que quise hasta borrar eso!...
y ese servidor es gratito..ese que pasas?
Google pages sirve, por eso lo recomiendan la mayoria.
En cuanto a webhost si es totalmente gratuito, yo lo uso en una de mis webs.
yo trate de entrar en googlepages y me sale error. con algo de page creator. que no entiendo!
me gustaria saber como es el procedimiento a alojar archivos en esa web que me pasaste
Hola, yo tengo un problema hace un tiempo, cargo un favicon animado .gif
el favicon se ve cuando lo muestra en favoritos, pero al abrir la pagina se ve el de blogger, sabes porque o que debo hacer para que se vea bien?...desde ya, mil gracias...
Para que se vea bien en todos los navegadores lo ideal es que el archivo sea un .ico
Intenta convertirla como dice ahi.
si, pero para que sea animado debe ser gif y poner la siguiente linea
[link rel="icon" href="http://favicon.gif" type="image/gif" /]
mi problema es que veo el favicon en favoritos, pero no cuando abro la pagina, dejare dos links con las imagenes para que entiendas, besos y gracias
http://img128.imagevenue.com/img.php?image=63975_Fav_122_699lo.JPG
http://img268.imagevenue.com/img.php?image=63974_pag_122_342lo.JPG
La primera de las imagenes que me dejaste no la puedo ver.
Y sigo sin entender bien. Vos que navegador usas? Porque en internet explorer a menos que sea .ico no se va a ver
Uso Firefox, es asi el tema, cuando empiezo a tipear la direccion de mi blof, se abre la lista de favoritos para elegirlo y alli aparece mi blog con el favicon a la vista, una vez elegido y abierta la pagina, el favicon que aparece es la B naranja de blogger, yo veo las dos imagenes bien que te envie...me tiene loca esto, porque en algun momento se ve asi que no se porque no siempre...gracias y perdon que sea tan insistente
Yo tambien veo la B naranja y estoy en firefox.
Proba subiendo la imagen a otro hosting.
ok, gracias y perdon tanta molestia, seguire buscando solucion, besitos y exitos
Muchísimas gracias.
excelente!! buen aporte
vale maestro
no se por que me costaba tanto con los otros tutoriales, y con el tuyo lo hice en un minuto
Amigo! Gracias por el aporte, soy nuevo en esto de los blogs, pero lo pude hacer animado: http://acequilabs.blogspot.com/
Muchas gracias, funciona perfectamente. Y además son 5 minutos.
@Sergi
Me alegra que te funcione. Gracias por comentar, saludos!
ESTUPENDO HERMANO,, GRACIAS Y ERES BIENVENIDO A MI BLOG.....
SALU2......
Excelente! Muchas gracias
Muchas gracias. Probé mil cosas y no funcionaban. Ahora perfecto
@ÁĞĞĔĹŐŚ ÁРŐĶÁĹĨРŤĨČŐŚ
@Kaipress
@Martín Herzog
Me alegra que les sea de utilidad. Gracias por comentar, saludos!
Oie muchas gracias brother, Ya tenia rato buscando como cambiarlo, Y nunca vi bien ese pedaso jaja, Muchas gracias
@Kanon114
Me alegra que te sirva, gracias por comentar :)
Gracias!. Es genial.
Holas, dispulpá, tengo el favicon y todo, y lo puse y todo bien, pero ahora me fijo de nuevo y no me sale en IE, solo en firefox, que debo hacer para que sea vea en IE? porque el tuyo si sale, pero el mio nop :( desde ya muchas gracias. Saludos
@raulitem
Asegurate de que transformar tu imagen a .ico, porque de lo contrario no sale en IE
Pues si que va bien el codig si me a kedado muy bien xD
Por cierto si hos gusta One Piece mirad mi blog http://yonkouplanet.blogspot.com
Hola todo me va bien hasta que llego a la publicacion del flavicon en la plantilla, lo coloco donde vos decis y reemplazo, lo de sitio por la url de flavicon y me dice que no se pueden guardar los cambios: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The value of attribute "href" associated with an element type "null" must not contain the '<' character.
Gracias espero tu respuesta.
Un abrazo.
Oh y te dejo mi correo por si las moscas, ejje virasiro@hotmail.com
@Afrodita
Tal como dice el mensaje de error, estas formando mal el codigo, asegurate de copiar textualmente como indico mas arriba y de hacer los cambios sin modificar la estructura dada.
Gracias por la ayuda!!!
Aunque, en IE sigue la maldita B de blogger y en Firefox, una hoja en blanco.
Ya me saldrá (espero)
Salusos
:)Reina
Muchissimas gracias! A la perfección!
gracias por esto!
Puede ser que demore un tiempo en aparecer? Me aparece en el lugar del favicon una hojita blanca.
gracias
@Max Power
No, no demora tiempo en aparecer. Asegurate de hacer todos los pasos correctos y que el formato del archivo sea el adecuado.
Al fin un metodo que funciona, gracias, fue muy sencillo.
porfin algo que al parecer funciona...
solo una cosa ahora me aparese el favicon en blanco que abre hecho mal.
yo creo que es la pagina donde la subi, y no escuentro otras para subirlo.
Me puedes ayudar subiendo el favicon y me mandas el codigo... a pmayista@hotmail.com
AMIGO.... graciassss (http://www.html-kit.com/favicon)
he visto un favicon algo parecido con un radar....muy bonito pero no se poner la .....por fa alguien que me lo ponga.....
gracias anticipado !
me gusta tu aporte esta excelente pero tengo problemas no me cambia el favicon no se pq necesito q me ayudes por favor... si podes responderme al maltez83@marlonmaltez.com te lo agradecere...........
Compa muy buena la info... pero creo que si puedes poner la imagen en formato .png sin problema no solo .ico...
Buenas noches
Excelente el post, me ayudo mucho... y ya cambie mi favicon a la primera... eso si tuve que utilizar otra pagina para hostear el .ico
http://puercaenpuerca.blogspot.com/
Gracias
gracias men, estaba desenado quitarlo y gracias a ti lo he conseguido.
Si eso, visitad mi blog y opinad:
http://myspace-sims.blogspot.com
Exc, vamos a probarlo!
Muchas gracias. me funciona, colocado bajo la línea:
b:include data='blog' name='all-head-content'/
Publicar un comentario en la entrada
Lea las reglas:
Todos los comentarios serán leídos y moderados previamente.
Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.
OBS: Los comentarios de los lectores no reflejan las opiniones del blog.