Como añadir un FAVICON a tu blog | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

Como añadir un FAVICON a tu blog

Ya vimos qué era un Favicon y para qué se usaba en el post anterior. Vimos que los favicons son las pequeñas imágenes o iconos que aparecen asociados delante del nombre de una página en la mayoría de los navegadores.

También vimos dos buenas páginas para crearte el tuyo propio, Favicon from pics  y  Favicom.com.

Pero se nos olvidó un tema muy importante... como añadir el que te has creado a tu plantilla del blog para que tus usuarios lo vean. Pues bien, para hacer esto solo tienes que insertar esta línea de código justo detrás de <head>:

<link href='URL COMPLETA IMAGEN FAVICON' rel='shortcut icon'/>

Solo tienes que cambiar URL COMPLETA IMAGEN FAVICON por la ruta completa (incluyendo http://) donde alojaste la imagen de tu favicon.

Sencillo, verdad.

58 comentarios:

Silencio dijo...

Hola!!
Hoy acabo de descubrir tu blog y me encanta. Te he añadido a favoritos incluso.

Otra cosa: estoy planteándome cambiar la plantilla de mi página por una de las creadas por ti y quería saber si al cambiarla permanecerán los metatags que he instalado, los códigos de verificación de sitemaps, etc... Te agradecería que me respondieses.

A partir de hoy tienes un visitante más.

Blogsmadeinspain dijo...

Gracias por tu visita, espero mi blog que te sea de provecho.
Respecto a la cuestión que planteas, he de decirte que perderás los elementos añadidos, metatag, códigos de verificación, etc... pero hay formas muy sencillas de copiar esos elementos y después colocarlos otra vez en el sitio que los tenías.
Busca en mi blog un post que tengo titulado "10 respuestas y consejos para los nuevos bloggers", ahí explico como realizar el cambio sin tener problemas posteriores ni perder información alguna. A lo mejor también te interes leer los post al pinchas el botón "Básico", son muy instructivos para todos y no son muchos.

Saludos y dime que tal te va.

Silencio dijo...

Hola de nuevo.

Es que estoy intentando instalar una plantilla tuya en la página www.perfumeriadonjuan.blogspot.com pero no me funciona bien. Por favor accede a la página y verás que, al desplazarse por el blog, los posts van pasando por encima de donde debería estar el título y este último se va hacia arriba. Me gustaría saber qué es lo que hago mal y cómo puedo corregirlo. No sé si me he explicado bien. Me refiero a que la imágen permanece estática y no se mueve a la par que el texto. Además me aparecen unas barras de desplazamiento que no deberían estar ahí. Y por otra parte me ne fijado que no se ve el fondo en Firefox. He alojado las imágenes en imageshack.

Espero que puedas ayudarme.

Blogsmadeinspain dijo...

Bueno, a la vez que yo comentaba lo hacías también tú.
Vamos a ver, nunca he alojado imágenes en imageshack, ya que es algo lento, yo te aconsejo que lo alojes en Google Page (tengo un post explicando detalladamente como hacerlo), aunque no debes alojar muchas imágenes, ya que su ancho de banda es un poco corto, pero funciona muy bien.
Yo no veo la imagen de fondo ni en IE ni en Firefox, se queda cargando y no carga nunca. También los botones parecen tener algún problema con las imágenes.
Las barras scroll deben estar ahí, ya que hacen que te puedas mover por el blog a cuadros sin desplazar el fondo, queda un efecto muy bonito.
Pero no veo ningún otro problema. Te recomiendo que uses Google Pages, y después veas los resultados.
Cuentame que tal te va.

Silencio dijo...

Muchas gracias por responderme, pero ahora que me has dicho que el fondo no se mueve prefiero no cambiar la plantilla. Miraré otras que hayas hecho y si me gusta alguna otra ya la instalaré y sino me espero. Pero en cualquier caso me sigue gustando tu página y la visitaré a menudo. Un saludo!

ty dijo...

Hola de nuevo!
Quisiera saber cómo has hecho la ventana que aparece en la sidebar para "agradecimientos" y "blogs de amigos". Es una forma muy cómoda de poner enlaces en tu blog sin que ocupe mucho.
Espero tu respuesta!
Un saludo,
Sara.

Blogsmadeinspain dijo...

sara_yooo, dime un e-mail donde poder mandarte los códigos de lo que me pides. Si no quieres indicarlo aquí en los comentarios, mándamelo por e-mail, puedes hacerlo con el botón que tengo en la sidebar titulado "Mándame un E-mail"

revcorazondebruja dijo...

¿cómo puedo saber el ancho y el alto en pixels de una imagen?

quiero hacer una de esas que dices en utilidades de al pasar el cursor por encima que cambie, pero hay cosas del código para cambiar que no entiendo ¿que es rollover?

Blogsmadeinspain dijo...

revcorazondebruja, la pirmera parte que planteas es fácil. En el explorador de windows pincha con el botón derecho sobre la imagen de la que quieras saber su tamaño. Del menú que te sale pincha en propiedades. Y después en la pestaña Resumen pincha en opciones avanzadas. Ahí verás el ancho y alto en pixeles. (Esto pudiera variar dependiendo de la versión de windows que tengas.

La segunda parte es algo más compleja. En realidad "rollover" es un término que designa cuando una imagen cambia por otra al realizar alguna acción (por ejemplo pasar con el ratón por encima de ella). Pero esta acción es algo lenta y no se realiza de forma instantánea, ya que no se carga la segunda imagen hasta realizar la acción de que se trate.

Por eso en la forma que yo explico el cambio se realiza de forma instantánea, ya que la imagen inicial y final en realidad son la misma, solo que desplazada una determinada distancia.
Lee bien el post que mencionas y si sigues teniendo dudas de su aplicación, coméntame de forma más concreta donde te atascas o que es lo que no entiendas.

revcorazondebruja dijo...

la verdad es que primariamente en lo que me atasco son las medidas, las medidas de ancho y alto que me pide tengo que poner las medidas en pixels de la imagen entera (la del truco, doble) y sólo la parte qe quiero que aparezca primero (la mitad)

una vez eso tengo otra, cuando tenga el código terminado ¿es imprescindible colgarlo en la plantilla total o se puede colocar en la sidebar poniendo un HTML/Javascript?

GRACIAS

Blogsmadeinspain dijo...

Tienes que poner la mitad del ancho total de la imagen (es importante que la imagen tenga una anchura en pixeles par, sino te quedará un efecto extraño).
La primera parte del código que tienes en el post tienes que colocarla en la plantilla, y la última parte ya la colocas donde tú quieras como elemento HTML/Javascript.
Como dice el post, por cada imagen en la que quieras realizar este efecto tienes que colocar el código inicial otra vez en tu plantilla, pero poniéndole otro nombre. Creo que esa parte sí está más clara en el post.
A ver si puedes,porque el efecto ya vez que es muy bueno.

revcorazondebruja dijo...

a ver. una vez que tenga los códigos hechos, el largo lo cuelgo en la plantilla del blog ¿no? pero ¿en que sitio de la plantilla exactamente?

luego, el chiquitito HTML lo pongo en el lugar donde quiero que aparezca el botón o sea, en la sidebar. y en ese cambio "rollover" por el nombre que le haya puesto al código largo esa palabra, por ejemplo

en el codigo largo he puesto en todos los rollvers esto : rollover01

entonces, en el codigo corto pongo tambien rollover01 para indicar que ahí quiero que se situe es código no?

GRACIAS

Blogsmadeinspain dijo...

correcto. El código largo que va en la plantilla colocaló después de "head" y antes de "/head", con sus respectivos signos <>

revcorazondebruja dijo...

voy a intentarlo de nuevo

GRACIAS

revcorazondebruja dijo...

¿me puedes dar un msn para que hablamos sobre esto, tengo un problema..?

GRACIAS

Blogsmadeinspain dijo...

revcorazondebruja, mándame las dudas que tengas por e-mail, con el widget que tengo en la sidebar titulado "Envíame un E-mail".
Te contestaré todas tus dudas.

Saludos

Tejer Bien dijo...

no encuentro dónde alojar la imágen .ico para subierla a mi blog

Blogsmadeinspain dijo...

Puedes alojarlo en cualquier servicio de alojamietno de imágenes, por ejemplo aquí te dejo el post que escribí si quieres alojarlo en Google Pages:
http://blogsmadeinspain.blogspot.com/2008/06/como-alojar-imagenes-en-google-pages.html

Tejer Bien dijo...

las horas que he perdido tratando de hacer esto!! gracias por la data de google pages!

revcorazondebruja dijo...

A. ya he conseguido colgarlo

Peero ahora tengo un "miniproblemilla" me mandaron promocionar la nueva secci�n de la web y dibuje algo para el sidebar

la cuesti�n es que (si entras en la p�gina lo ves) es una especie de biblioteca y el ultimo estante est� vac�o. Pues en teor�a, cuando colocas el cursor sobre �l deben aparecer ah� unas letras pero no salen... �alguna soluci�n?

tambi�n tengo un problema con la plantilla. Es una base de "India" tuya (gracias por cierto ;) ) y resulta, que cuando coloco algo en el sidebar, el t�tulo (el entramado de flores o lo que sea) no solo aparecen arriba, sino que aparecen arriba y tambi�n debajo de cada cosa que se ponga en la sidebar (tamien se ve en el blog)
peero sin envargo cuando pasas el cursor sobre ese entramado que sale abajo, desaparece para siempre

�alguna soluci�n?

gracias

Blogsmadeinspain dijo...

revcorazondebruja, disculpame pero en tu blog no veo nada de lo que me dices.
Respecto al adorno dela sidebar, debe salirte un adorno por cada elemento que coloques en la sidebar, tenga título o no, y siempre en la parte superior, por encima del título, si lo tiene.

Respecto al otro tema, no veo de qué me hablas.
¿qué navegador y versión estás usando tú?

Oxigeno dijo...

i have a problem
...
mira, no tengo todas las opciones de creacion de entrada, hay tu muestras una foto con muchas opciones

http://blogsmadeinspain.blogspot.com/2008/02/cambiar-caractersticas-del-texto-usado.html


yo solo tengo negrita, cursiva, hipervinculo, comilla, ortografia, imagen y video u.u

ayudame por favor

Blogsmadeinspain dijo...

Amigo Left Behind, observa que en el editor de "Creación de entradas" tienes dos pestañas. La primera se llama "Edición de HTML", ahí solo tienes las opciones que comentas, ya que es para escribir directamente en HTML. Pero la segunda pestaña, llamada "Redactar" es la que debes usar para redactar las entradas, y en esa sí aparecen ya todas las opciones que yo comento en el post.

Saludos

Anónimo dijo...

acabo de escribir una entrada, pero quiero que aparezca la última de todas a pesar de ser la más reciente ¿se puede hacer?

GRACIAS

revcorazondebruja dijo...

he colocado un favicon en mi blog pero luego no me aparece, tampoco me sale el tuyo ni el de ninguna página, ¿soluuón?


GRACIAS OTRA RERE-VEZ

Blogsmadeinspain dijo...

corazon de bruja, respecto a tu primera pregunta, es fácil de responder. Ponle una fecha pasada que sea anterior a todas tus entradas, de esta forma puedes manipular el orden de todas tus entradas, ya que en el editor de entradas puedes poner la fecha que tú quieras y modificarla a tu antojo.
Respecto al tema del favicon, si has puesto la url de la imagen correcta debe verse, aunque es cierto que también en mi blog hay ciertas ocasiones en que no se vé. No sabría decirte por que.

revcorazondebruja dijo...

y sabes como subir un gif a la sidebar?

Lo he creado yo, pero no se si es con URL o dandole a subir imagen...
no ´se


GRACIAS, al final la web va a ser más tuya que mía

Blogsmadeinspain dijo...

puedes hacerlo como "subir imagen".

Criis dijo...

Hola, con ayuda de tu blog conseguí formar el mio que espero que algún dia sea lo menos algo famosete...
Sin la ayuda de tu blog no habría sido posible. Espero que visites mi blog y me des tu crítica en el libro de visitas, al final del todo.

http://blogentretenido.blogspot.com

Gracias por tu ayuda.

Elemenda dijo...

Hola, muchas gracias por este blog, tan bonito, tan sencillo y tan útil, de hecho ya me he suscrito.
Pues bien, tengo una duda sobre el flavicon: utilizo "flavicon from pics" e intento hacerlo tanto con firefox como con explorer. Se descarga un archivo comprimido, utilizo los códigos que dices en tú página, pero en "ULR COMPLETA DE LA IMAGEN FLAVICON COMPLETA (incluyendo el http://), no sé qué poner. No veo ninguno específico de esa imagen ni en la página donde se descarca, ni en las instrucciones del archivo comprimido.¿Te refieres a la dirección de la página?
Por otro lado, en una de las ocasiones, lo único que ha aparecido junto a mi direccón es una hojita blanca, en vez del flavicon de blogger, como en tantas otras páginas de las que tengo guardadas en favoritos. Sólo en algunas, como la tuya, aparece el flavicon.

Un saludo y muchas gracias por tu ayuda.

Blogsmadeinspain dijo...

Elemental, donde hagas el favicon te descargarás una imagen o icono (un archivo). Debes alojarlo en algún servicio de alojamiento gratuito, y ese servicio sí te dará una ruta completa para ver dicha imagen o favicon, esa es la que debes colocar dentro del código que indico.

Elemenda dijo...

Muchas gracias por la aclaración. Lo conseguí.

... dijo...

Hola, pues a mí no me sale poner el favicon. Lo tengo en divshare y salen 4 opciones para compartirlo:
Full Image.
Thumbnail.
Download.
Forum.
¿De los 4 qué código copio y pego?

Lo sustituyo por URL COMPLETA IMAGEN FAVICON, y todo junto ¿va justo detrás de head? ¿sin espacios?

En la plantilla hay un head al comienzo y otro al final, supono que irá detrás del primero, ¿no?

Tiene que ser sencillo pero me está dando el coñazo ponerlo. A ver si me echas una mano

Saludos.

Anónimo dijo...

Hola, quisiera comentar mi experiencia en blogger con el cambio del favicon. Tengo un blog e inicialmente pude cambiar el favicon, asi lo tuve por mas o menos 6 meses. Un día me aburrí y me dio por volver a cambiarlo, con la mala suerte de que a los 3 días de estar con mi nuevo y flamante favicon, los de Blogger me lo quitaron volviendo a poner la aburrida "B". Indagando un poco en el tema se debe a temas de seguridad ya que Blogger, garantiza seguridad al tener la B, y no proporciona información de identidad. Hasta ahora no han conseguido un truco para burlar a los de blogger con ese tema. Un saludo!!!

Blogsmadeinspain dijo...

Mariela, te agradezco tu información. Yo solo puedo hablar de mi experiencia personal, y es que llevo unos tres o cuatro meses con el favicon de Blogsmadeinspain y de momento todo va bien.

Blogsmadeinspain dijo...

Fr€d99, deben ser de 16x16 o 32x32 pixeles.

ESCUELA DE KARATE COLINDRES dijo...

HOLA HE SEGUIDO TUS PASOS PERO NO ME SALE EL FAVICON, LA IMAGEN LA HE SUBIDO CON EL "PHOTOBUCKET" IGUAL ES ESE EL PROBLEMA? Y OTRA PREGUNTA, HE HECHO UN BOTON CON EL"COOLTEXT" Y AHORA COMO LE PONGO EN EL BLOG, CON UN "HTML/JAVASCRIPT"?
UN SALUDO TIENES UN GRAN BLOG.

Blogsmadeinspain dijo...

Escuela Karate, el Favicons debe ser una imagen de tamaño 16x16 o 32x32 pixeles. El resto es seguir con lo explicado en este post.
REspecto al tema del enlace, mándame un e-mail con el widget que tengo en la sidebar, y te contestaré con los códigos necesarios.

Anónimo dijo...

saludos

nueva duda..

debo guardar el favicon en formato ICO.. o sirve cualquier otra extensión.

Blogsmadeinspain dijo...

Yo lo tengo en formato ICO, pero nunca he probado a hacerlo con otro formato.
Con ICO puedo garantizarte que funciona, pero con otro formato de imagen no lo sé.

Josep Maria dijo...

Hola!.
Estoy cansado de probarlo lo del favicón y lo único que logro es que desaparezca la famosa B, y me salga el de internet explorer pero no el favicón que deseo.
Quizás es por que no lo hago bien, o por que el incono es png. por que formato ico. no se donde alojarlo ya que ni en google pages ni en imageshack aceptan el formato ico y si el png.
Tampoco se si con otro navegador que no sea IE se ve o no.
Saludos.

Blogsmadeinspain dijo...

josep maria, yo lo tengo alojado en Windows SkyDrive, creo que actualmente es el mejor servicio de alojamiento gratuito.
Tienes que tener una cuenta en Gmail o en Hotmail.
Por cierto, me acabo de dar cuenta que con Firefox no se ve mi favicon, aunque sí con IE.

q u i n o ƒ ƒ dijo...

Por fin! Iba a preguntarte justamente dónde alojar el favicon, porque Google Pages terminó y su web sucesora, Google Sites, no ofrece nada que se parezca a un archivo para el usuario.
Hay páginas que admiten guardar archivos ICO, pero les modifican el nombre y eso anula a la plantilla del Blogger, que no muestra ningún favicon. O sea, todo mal.
Veré qué tal ese servicio que indicas.

q u i n o ƒ ƒ dijo...

...y resultó! SkyDrive cumplió estupendamente; habrá que tener más en cuenta a ese servicio. Muchas gracias por resolver el punto crucial!

.- Joaquín

Raúl Montero dijo...

Hola, he creado un nuevo espacio para alojar los favicon de la comunidad bloggera, te gustaría unirte a ella?

lafaviconera.blogspot.com

Un saludo y muchas gracias.

PD: Todo el mundo será bien recibido.

Jairo Martz dijo...

Amigo tengo un impase en particular con el favicon, son nuevo en esto en el undo de llos blogs pero lo uico que se es que lo que se es verdad; lo que me pasa es que inserto el codigo junto con la URL en el editor de HTML de blogger, pero ni me da error por haber escrito mal ni mucho menos me muestra la favicon. Tengo la imagen alojada en windows SkyDrive y pensasndo que depronto era eso la aloje en Flickr y nada, que sera????

Gracias, por cierto aqui en colombia tienes buena acogida.

Blogsmadeinspain dijo...

JaiMartz, asegúrate de que la ruta URL que has colocado es la correcta, para ello escríbela en tu navegador y dale a "Enter". Deberás ver exclusivamente la imagen favicon, sin nada más que la imagen y el fondo blanco.
Si la URL es del todo correcta, colócalo tal y como indico en el post, no debe fallarte.

Saludos.

Consejo Local Jufra dijo...

holaaa...lo primero q kiero es dart gracias por tu gran ayuda con tu blog...estoy recien empezando con mi blog y trate de ponerle el favicon pero nose q pasa...aparentemente lo tienen pero de repent cuando la pag termina de cargar se va...solo qda la B pero al inicio q va cargando se pone y luego se quita...no se q pasa..

si puedes dar una vuelta miralo y me ayudas...ando medio perdida con algunas cosas...por ejemplo los botones y las entradas como administralas y todo eso....de ante mano muxas gracias..y felicidades

http://www.jufranicaleon.blogspot.com/

Blogsmadeinspain dijo...

Consejo Local, gracias a tí por visitar mi blog y dejar tu comentario. Respecto al tema del favicon, decirte que con Internet Explorer se ve perfectamente, pero también he entrada con Firefox y no lo he visto. Pero no te preocupes en exceso, seguramente a veces te aparecerá y a veces no... No comprendo el motivo, pero a veces ocurre.
Para el tema de los botones debes leer atentamente las instrucciones que se acompañan a la descarga de la plantilla, ahí está muy claramente explicado.
Para el uso de las etiquetas en Blogger lee n post que publiqué hace algún tiempo en mi blog.
Y respecto a cualquier otro tema, mándame un e-mail.
Aunque te recomiendo que leas las entradas al pinchar sobre el botón "Básico" de mi blog, te serán de mucha utilidad.

Saludos desde Sevilla, en España.

Anónimo dijo...

que lindo blog tiene quisiera ahnadirte como mi amigo pero no se como suerte y gracias

Blogsmadeinspain dijo...

Si quieres enlazarme como amigo en tu blog, lo único que tienes que hacer es irte al widget que tengo en mi sidebar que se llama "Enlázame:", marca y copia el contenido de la ventanita que tiene justo debajo de mi pequeño banner. Ahora vete a la edición de tu blog, entra en "Diseño/Elementos de la página" y en tu sidebar dale a "Añadir un gadget". Elige un "Elemento HTML/Javascript" y pega los códigos que has copiado de mi blog.... Y ya está.

Diario Actual dijo...

Gracias!

El Taller de Los Lunares dijo...

A la primera GRACIAS!!

El Taller de Los Lunares dijo...

Hola,
pq no se ve el favicon si navego con Firefox pero si en caso de hacerlo con internet explorer?
Gracias, buen día!!

Blogsmadeinspain dijo...

María, es cierto que en IE se ve perfectamente tu favicon y con Firefox ahora mismo he entrado y no se ve.
La incompatibilidad existente entre estos dos navegadores es manifiesta en varios puntos. El código es correcto, pero habrá veces que lo veas en los dos navegadores, veces en que solo lo veas en uno de ellos, y veces en que no lo veas en ninguno de los dos. ¿Por qué?... Ni la menor idea. Puede depender de la configuración que tengas en cada navegador, o de otros factores.
Es cierto que en IE funciona la inmensa mayoría de las veces.
Si alguien encuentra una forma de hacerlo que funcione siempre en los dos navegadores principales del mercado, por favor que lo comente aquí.

El Taller de Los Lunares dijo...

Gracias!

Mario dijo...
Este comentario ha sido eliminado por el autor.
mihijo.info dijo...

Por fin¡¡¡ muchas gracias, el caso es que no lo ponía justo detrás de <
"head" lo ponía debajo , en otro reglón, genial como siempre amigo blogsmadeinspain

un saludo