Cambiar icono de blogger

Hace tiempo os escribí una entrada para cambiar el icono que aparece en la barra de direcciones de nuestra página web, lo que popularmente se llama favicon.

cambiar icono de blogger favicon - imagen principal del post

A algunos se os habrá ocurrido si esto es posible realizarlo en un blog de Blogger. La respuesta es sí y en este nuevo post de El Blog de la Informática 10 os voy a explicar cómo se hace.

En primer lugar accedemos al blog al que queramos cambiar el icono y pulsamos en la ficha Diseño -> Edición de HTML.

Situamos el cursor justo debajo de la etiqueta <title> y copiamos el siguiente código:

<link href="http://www.dirección_web_donde_está_el_icono/nombre_archivo.ico" rel="shortcut icon"/>

Cabe destacar que la imagen tendrá que estar en formato ICO y tendrá que estar alojada en algún servidor que os permita alojar imágenes de tipo ICO.

Una vez insertado el código, solo tenemos que guardar los cambios y comprobar el resultado.

Si queremos crear un icono a partir de una foto que tengamos en otro formato, lo podemos hacer accediendo a la página htmlkit.

El ejemplo de este tema lo podéis comprobar en este propio blog. Como veréis he sustituido el icono de blogger por la imagen que tengo puesta en mi perfil.
Esta conversión de imagen a icono la he hecho por medio de la página que os de dado anteriormente.

José M. García
@josem2112
El Blog de la Informática 10

73 comentarios:

JOSÉ LUIS IGLESIAS dijo...

Más que un comentario es una duda que te agradecería que me aclarases. Tengo un blog en el que todas las entradas son fotografías de fósiles. Llevo unos días que no puedo insertar ninguna nueva entrada. Mi duda es ¿si exite alguna limitación en las entradas? y si es así ¿cómo pudo ampliar el número de entradas?

José M dijo...

Hola José Luis,

las imágenes de los blogs de Blogger se almacenan en el servicio Picasa del propio Google.

Comprueba si has llegado al límite de espacio disponible para almacenar esas fotos. Para ello, accede a la página principal de Picasa, introduce los datos de tu cuenta de Google y mira, en la parte inferior, si has llegado al límite que te dan que son 1024 Mb.

Anónimo dijo...

cómo puedo modificar el titulo y contenido de la pagina página principal de blogs creado.

José M dijo...

Accede a la ficha Configuración -> Básico y modifica el texto que aparece en los apartados Título y Descripción.

Anónimo dijo...

No me sale hice todo paso a paso y nada.

José M dijo...

Pues comprueba si estás escribiendo la dirección URL del icono bien o si estás pegando el código en la posición correcta.

++Silva; dijo...

Amigo, sos un maestro! Muchas gracias por tu ayuda, mi blog se ve cada vez mejor xD

Salu2!

José M dijo...

Gracias ++Silva por tu comentario, saludos.

Pituu dijo...

Amigo me podes decir un hosting para subir imagenes con extencion .ico, porque la verdad busco en google y no encuentro uno confiable.

Saludos y gracias por la guía

José M dijo...

El servicio Skydrive de las cuentas de Hotmail te permiten subir ese tipo de imágenes.

Anónimo dijo...

=( NO FUNCIONA LO SUBÍ A SKYDRIVE Y NADA U.U

José M dijo...

Revísalo de nuevo, porque yo lo tengo subido a Skydrive y no hay ningún problema como puedes ver.

|| Natsuki Asakawa Kuga || dijo...

hola bueno probe y no me sale u.u bueno gracia s igual n_n .. ;_; parece que a otros si les sale T_T

GoldenWolf dijo...

Esta opcion ay no sirve, parece que los de blogspot hicieron algo, no se, porque sigue el icono feo de la B

José M dijo...

GoldenWolf la opción sirve perfectamente como puedes comprobar en este blog que tiene cambiado el icono.

elementhal clothes company dijo...

buenas jose M no he podido conseguir modificar el icono. realize todos los pasos como decis pero no pasa nada... si me podrias dar una mano por favor te voy a agradecer.. alvaro_pedrozo@hotmail.com

de igual manera estare ckekando si respondes por aca

José M dijo...

Hola elementhal clothes company,

indícame cuál es la página (con el código incorporado)donde quieres cambiar el icono para que vea si has cometido algún error.

De todas formas, comprueba que la dirección URL del icono esté escrita correctamente.

José M dijo...

Bueno acabo de visitar tu blog que es donde me imagino que lo querías poner y veo que el icono está ya cambiado, felicidades por haberlo conseguido.

Fran-kun dijo...

no me funciona :@, no se porque me podrías ayudar

José M dijo...

Hola Fran-kun,

comprueba si estás escribiendo correctamente la ubicación del archivo y si tiene extensión ICO.

Neoshenlong dijo...

Hola

Al parecer la opcion ya no funciona... por que lo digo? Por que he hecho exactamente lo que me has dicho, y no pasa nada. Incluso [no se si ya no este asi] en tu blog veo el mismo icono de blogger.
Pense que era por mi navegador [chrome], pero probe con otros [firefox y explorer] y tampoco... entonces... que pasa?

José M dijo...

Hola Neoshenlong,

pues lamentablemente te digo que yo sí lo veo tanto si uso Firefox, IE o el navegador que sea.

Comprueba que no tengas algún programa o complemento en el navegador que esté bloqueándolo.

Saludos :)

Claudio M. Mena Morillo dijo...

Hola. Disculpa las molestias, pero he hecho exactamente todo lo que has dicho anteriormente, pero al momento de editar la parte html de mi blog, y darle a ver blog, no veo el cambio.

Claudio M. Mena Morillo dijo...

Gracias....lo he logrado....

José M dijo...

De nada Claudio, saludos :)

Luz de Gas RadioBlog dijo...

Al pegar el codigo dice

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: Element type "link" must be followed by either attribute specifications, ">" or "/>".

José M dijo...

Hola Luz de Gas RadioBlog

seguramente te falta cerrar con el símbolo que te propone.

facemusic dijo...

he subido el favicon a varios servidores y el ultimo es el de hotmail y sigue sin funcionar me puedes checkear la pagina y decirme algo? porfi
http://face-music-free.blogspot.com/

misaani dijo...

Hola José.M,estaba buscando donde subir mi icono para intentar colocar mi favicon en mi barra y en tus comentarios dices que se puede subir a SKYDRIVE de Hotmail y si que tengo la imagen en el lugar, pero no me ha generado la url que tengo que pegar en mi blog o no la sé buscar, o no e sabido subir la imagen.
Me podrías hacer el favor de explicarme los pasos.
Gracias.

José M dijo...

facemusic: sitúa la línea de código del favicon justo debajo de la etiqueta TITLE.

misaani: accede al servicio Skydrive, haz clic sobre la imagen de la que quieres conseguir la URL, haz clic de nuevo sobre la imagen para que aparezca a tamaño real y arriba en la barra de direcciones tendrás la dirección URL de la imagen.

misaani dijo...

Perdona que te vuelva a molestar, hice lo que me has dicho y me ha creado toda esta dirección:
https://o25gmg.bay.livefilestore.com/y1pOQKjgCPM8rJ6wYFspa7TDDO3DKSU6XsLIOU65Do1kWXbU65m8Z-cBWAfBxh-
pLPSM-h39mLiyg_CItswN9G_vCwdn-FccnpB/favicon80x80.ico y no logro
que me salga el icono por más que pruebo a colocarlo de mil maneras.
Si lo coloco a continuación de la etiqueta TITLE de apertura dentro del código que has facilitado,
cuando lo guardo en la barra me aprarece la B y todo el código que acabo de añadir .
saludos y gracias por tu tiempo.

José M dijo...

Hola misaani

he estado comprobando la URL de la imagen y te pide acceder con los datos de la cuenta de Hotmail.

Esto ocurre cuando tenemos la imagen en una carpeta con permisos específicos.

Debes incluir la imagen en una carpeta pública o bien cambiar los permisos de la carpeta donde la acabas de incluir.

facemusic dijo...

siento molestarte de nuevo pero debajo de TITLE tampoco me sale el icono. tu me dirás por que ya me estoy volviendo loco XD

facemusic dijo...

Solucionado tenia k pegarlo encima de /head con otro comando

José M dijo...

facemusic me alegro que ya lo hayas conseguido :)

Para todos a los que no os salga, os animo a que veáis el código fuente de mi blog y comprobaréis que no hay nada raro ni ningún comando nuevo, es solo copiar y pegar el texto que hay escrito en la entrada eso sí cambiando la dirección URL de la imagen.

misaani dijo...

Hola otra vez, creo que voy a tirar la toalla, llevo toda la tarde con el dichoso favicon y estoy que me subo por las paredes.
1.Mi icono lo subí otra vez y es público.
2.Las únicas etiquetas que encuentro con la palabra TITLE son estas:

TITLE></TITLE
y la url es esta:
http://dmxbgg.bay.livefilestore.com/y1p3MTpf4fzS5R4jTCUDG4gSDbl
a21mEHKCog9dhFodB7JA15bTzqB_iTmaqzC7RaFjxDb-Xpj4m62sq3WeqsFIhYhG-KP9NuxC/favicon80x80.ico
y por más que lo intento colocar no me sale, lo único que e conseguido que se vea es una especie de folio en blanco antes del nombre.
Lo siento pero incluso estudiado tu código fuente, pero no lo consigo.
Gracias por todo.

José M dijo...

Hola,

ahora sí puedo ver la imagen de icono que quieres incluir por lo que esa sí es la dirección URL.

Lo único es que esa imagen es demasiado grande, hazla de tamaño 16x16 píxeles y prueba de nuevo.

Lo tienes incluído ahora? en qué blog está? es que lo estoy buscando y no lo veo :(

Saludos :)

misaani dijo...

hola, ya tengo el icono de 16x16 px.
y colocado en MI RINCÓN después de la etiqueta title> y me sigue saliendo el icono de blogger y a continuación todo el código que le acabo de añadir
Soy muy cabezona, lo siento.

José M dijo...

Está mal puesto el código, tienes que incluirlo después de la etiqueta TITLE, tú lo has incluído dentro de la etiqueta, es decir, dentro del título.

A ver, tienes el siguiente código:

<title>MI RINCÓN</title>

pues justo debajo de esta línea incluye el código para el icono

José M dijo...

Bueno veo que sigue sin funcionar, solo una cosa, la dirección URL está mal puesta, borra la que tienes e incluye la que te pongo a continuación

http://public.bay.livefilestore.com/y1pPJCActvTPBw-VlQOUpjYk2PdpsH3DnfdfOIzbWpKYsS3q1mqid6lxn0OlKNC9zoX_mVqzIcZmlRp1ESTAaJrNQ/favicon16x16.ico

Es que la que tienes puesta tiene un espacio en blando que es lo que la hace no funcionar :)

misaani dijo...

ya lo acabo de poner a continuación de todo el código del title y sigue saliendo la B.
Dejaló, no pasa nada, en realidad tampoco queda tan mal la B.
Gracias por tu paciencia
saludos

José M dijo...

vaya!!! hemos escrito el comentario al mismo tiempo, jejeje, se soluciona haciendo lo que te he indicado en el mensaje anterior, para que veas la importancia de un simple espacio en blanco jejeje

misaani dijo...

Muchas gracias por todo, el favicon funcionando gracias a tí.
Saludos y ahora ya me puedo ir a dormir tranquila.

José M dijo...

de nada ... ya veo que te ha quedado perfecto el icono :)

Francisco dijo...

Tengo una pregunta:
¿Sabes si todo esto funciona en Opera? Es que en Opera solo me sale mientras esta cargando la pagina, una vez cargada se pone otra vez el de blogger; en cambio, en IE y Firefox si se ve... (No es un gran problema, pero es que El que uso es Opera..)
De todas maneras gracias por el aporte

Pd.: El blog es www.guiasrf.tk, por si le quieres echar un vistazo (todavia esta en contruccion)

José M dijo...

Hola Francisco

pues la verdad es que con el navegador Ópera no lo he probado, pero puede ser que no aparezca porque con el navegador Google Chrome sale la B de Blogger no el icono que tengo puesto.

JOSUE MONTOYA dijo...

José, que bueno que hay gente como tú: muy claro y efectivo. Anduve por mil sitios buscando como cambiar el ícono de la url y nada resultó hasta que llegué a tí. Muchas gracias... (Ah, esto es que soy neófito en estas cosas)...

José M dijo...

Gracias Josue por tu comentario, saludos :)

noise dijo...

Geniales las indicaciones!! :D:D
Cambié el icono de Blogger en un par de minutos!!
Gracias.

José M dijo...

Gracias noise por tu comentario, saludos :)

NTK dijo...

Buenisimo trabajo monstruo, me ha ayudado un monton y me ha salido facil facil!

Ahora bien, me preguntaba si es posible sustituir la B de Blogger por un icono animado de los que permite crear la pagina de Favicon que has puesto. He estado trasteando un poco y lo curioso es que consigo poner la imagen Gif, pero se queda estatica, y no animada como deberia de ser -.-

Has probado a hacer esto? Hay algun tuto mas en tu blog y me lo he perdido? sabes si se puede hacer?

Saludos y enhorabuena por el blog de nuevo, a los "curiosos" nos ayudan mucho :D


-NTK-

José M dijo...

Gracias NTK por tu comentario.

Respecto al favicon animado, no lo he probado pero te digo que la visualización del mismo muchas veces depende del navegador que estés utilizando.

Has probado con otros navegadores para ver si puedes visualizarlo correctamente?

rogikato dijo...

hola man staba checando tus comentarios..y la mera verdad he probado en todos mis blog (7)y pongo exactamente lo de ti(ver codigo fuente) y eso el algunos funcaba pero solo en googlecrome y mozilla pero en IE 8 no aparecia nana..osea use de prueva tu codigo y nada mas que puede ser el problema ..talves tu sepas..gracias..ante todo.-..

José M dijo...

Hola rogikato

es cuestión de los navegadores, no hay ningún fallo en el código.

Zip dijo...

Muy buen Blog, interesantísimo y muy útil.

www.herrajeshe.blogspot.com

José M dijo...

gracias Zip por tu comentario :)

Emibox dijo...

Me ha sido muy util muchas gracias!!
http://noqueados.blogspot.com/

José M dijo...

Gracias Emibox por tu comentario, saludos :-)

Anónimo dijo...

Amigo ya tengo mi pic convertida en formato ico y la subi al server picpanda, acepta archivos en formato .ico, pero me genera 5 links, cual debo usar?

José M dijo...

Del apartado "Hotlink for Websites" debes copiar la URL que aparece entre comillas en la propiedad IMG SRC

Felipe Gonzalez dijo...

mi problema es el siguiente. ya hice todo como lo expliks y esta perfecto pero noc porque el ico que puse cuando la pagina se esta cargando sale perfecto pero al terminar de cargarse la pagina vuelve a ponerse el ico de blogger que puede ser ayuda!!

Felipe Gonzalez dijo...

ya subi mi imagen ico y todo bn el unico problema es que cuando termina de cargar la pagina el ico se vuelve a cambiar a el de blogger que puede ser??

José M dijo...

Hola Felipe,

acabo de visitar tu blog y veo perfectamente el icono, por lo que creo que ya lo has solucionado, verdad? gracias por tu visita :-)

Cerro Corá FM dijo...

hola, yo ya intente todo como dijiste y nada. pero el tuyo si se ve!

José M dijo...

Hola Cerro Corá FM comprueba la dirección URL de la imagen.

Realarmed dijo...

hola, después de mucho googlear, tu solución fué la correcta solo que creo que deberías ser más especifico y decir que hay que ponerla abajo de /title y no de title que eso es para otra cosa =P

José M dijo...

Gracias Realarmed ... tendré en cuenta tu consejo :-)

Luis dijo...

Gracias por el consejo. He colocado el favicon en el blog, se ve perfectamente tanto el 16x16 como 32x32. Lo malo es que no consigo verlo con Google Crome ni el mio ni ningun otro, ni siquiera el tuyo.
Mi blog es: http://sotivoley.blogspot.com/
Te reitero las gracias. Un saludo.

José M dijo...

Hola Luis

hay navegadores que son incompatibles con algunos códigos HTML, y éste es uno de esos casos. Con Google Chrome no funciona este código, habría que buscar algo compatible puesto que he visto que algunas páginas que tienen favicon, éste sí se visualiza incluso con Google Chrome. Si lo encuentro lo escribo en esta entrada.

Un saludo :-)

VickyQ dijo...

como pudo poredeterminar una imagen para el enlace de mi blog??

José M dijo...

Hola VickyQ

no entiendo muy bien a qué te refieres exactamente ... ¿te refieres al favicon, la imagen que aparece cuando te ponen en una lista de blogs, la imagen que aparecen cuando enlazan una entrada de tu blog... ?

Itzel Pineda dijo...

Hola cómo puedo publicar una entrada, ayuda por favor!!! gracias!!! no hallo el ícono de lápiz en días dónde está!??? gracias de nuevo.

José M García dijo...

Hola Itzel

a día de hoy, Blogger ha incorporado como opción el agregar un favicon al blog. Para ello solo tienes que acceder a Diseño y arriba a la izquierda verás que aparece Favicon, pulsa en el enlace Editar y selecciona el icono que quieres que aparezca junto a tu blog.

Un saludo :-)

Publicar un comentario en la entrada

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.