Poner nuestro propio icono en la barra de direcciones y en favoritos
Marzo 3rd, 2007 | Publicado por Francisco en Blogger, HTML | 47 Comentarios
Un detalle bastante estético es colocar el icono de nuestro logo en la barra de direcciones mientras el usuario navega en nuestra página, que aparesca en la pestaña de nuestra página (firefox) y que este icono se grabe cuando nos agreguen a sus favoritos (IE) o sus bookmarks (firefox).
La forma tener el nuestro es bastante sencillo y funciona tanto para páginas web como blogs.
- Crea una imagen con tu logo de largo y el ancho iguales, por ejemplo 100×100 pixeles en gif o jpeg. Por ahora no es importante el tamaño. Esto lo puedes hacer cualquier programa de edición de imagenes, por ejemplo: Photoshop.
- Lo siguiente es convertir tu imagen en icono (extensión .ico) de 16×16 o 32×32 pixeles, para esto tenemos dos opciones:- Convertirlo mendiante una página web.
- Convertirlo con un programa.En softonic puedes encontrar algunos programas y una de las páginas que puedes usar para hacerlo directamente es chami.com.
- Ya con tu icono, renombralo a “favicon.ico” y subelo a host local. Para el caso de Blog puedes subirlo a hosting gratuitos como Geocities.
- Ahora hacemos el llamado al icono desde el código de nuestro página, colocando entre las etiquetas <head> y </head> lo siguiente:
<head> ... <!-- Código del Icono --> <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" /> ... </head>Si tu imagen no esta en tu host local cambia la ruta en “href=” por la tuya. Por ejemplo, para un blog que use hosting gratuito de Geocities puede ser como sigue:
<head> ... <!-- Código del Icono --> <link href="http://mx.geocities.com/mipagina/favicon.ico" type="image/x-icon" rel="shortcut icon" /> ... </head>
Y de esto modo ya tienes el icono en tu web.
Marzo 16th, 2007 a las 11:57 am (#)
Casi todos los navegadores modernos aceptan faviconos en jpg, png y gif, así que se pueden usar directamente sin más dolores de cabeza.
Firefox los soporta desde hace tiempo, e IE en la versión 7.
Marzo 17th, 2007 a las 3:28 am (#)
Gracias Fran Ontanaya es una buena aclaración, la razón de proponer un .ico es para tener la mayor compatibilidad posible con los navegadores, dado que aun hay muchos no actualizados (sobre todo en latinoamerica).
Mayo 21st, 2007 a las 11:36 pm (#)
no me funciono este truco amigo
a la mejor lo estoy haciendo mal tambien jeje
Mayo 22nd, 2007 a las 7:56 pm (#)
Que tal Matrix!
En el caso de blogger puedes colocar el código del “favicon” sobre el código:
<title><data:blog.pageTitle/></title>
de tu plantilla, espero así no tengas problema, saludos!
Mayo 31st, 2007 a las 4:23 am (#)
PUES NO YO NO ENTENDI NADA CUAL ES EL CODIGO DE EL ICONO COMO LO PUEDO SABER COMO HAGO PARA QUE AL LLAMARLO APAREZCA EN LA PAGINA ESA¿?!!!!!¿?NO NO MUY MAL ESPECIFICA O QUE ALGUIEN ME LO DIGA!!!!!!!!!!!!!¿?¿??????????????????????
Junio 1st, 2007 a las 7:05 am (#)
Hola Luis!
De entrada creo que esa no es la forma ni el modo de pedir ayuda.
Sobre tu problema, el código de la imagen es su dirección, es decir, tu la subes a un servidor gratuito de imagenes como http://photobucket.com/ y ellos te dan el código o dirección de la imagen.
Junio 3rd, 2007 a las 2:42 pm (#)
Creo que el problema que le da a mucha gente es que falta añadir el comando “/link” después del código que habéis puesto. A mí me pasaba, al menos.
Un saludo
Junio 3rd, 2007 a las 5:22 pm (#)
Tiene toda la razón miguel, XML es muy estricto con eso, muchas gracias por la correción, ya he agregado la diagonal de cierre “/”.
Saludos!
Junio 9th, 2007 a las 1:32 pm (#)
Gracias por la información, la verdad es que es vastante sencillo, gracias de nuevo, un gusto contar con paginas de este tipo y sobre todo con personas así.
saludos.
Junio 10th, 2007 a las 10:47 pm (#)
Que bueno te sea util Ismael
Agosto 2nd, 2007 a las 11:50 am (#)
Yo no pude hacerlo funcionar.
Mi primer duda es en que parte del código del blog debo ingresar el código sugerido. Segundo, Photobucket no permite el hosting de *.ico con lo cual inserté el código por ustedes sugeridos en un lugar que no se si es correcto y el enlace es a un gif que me creara favicom como alternativa al *.ico.
Desde ya les agradezco sus comentarios y sugerencias.
Saludos.
Agosto 4th, 2007 a las 1:41 am (#)
Mr. Speed, más arriba en lo comentarios puedes encontrar donde colocar el código y para hospedar un .ico bien puedes usar googlepages.
Un saludo!
Agosto 6th, 2007 a las 2:24 pm (#)
Muchas gracias por tu respuesta Francisco. Da la sensación que el scrip me lo tomo, lo que no logro ver es el ícono. Probaré con tu sugerencia.
De nuevo muchas gracias!!!
Agosto 28th, 2007 a las 9:48 am (#)
MMM pos de plano no entiendo en donde radica el truco… por favor alguien me puede explicar con palitos y bolitas….
de antemanos Gracias Totales…!!!
Noviembre 19th, 2007 a las 9:50 pm (#)
Francisco, donde más puedo hospedar mi FavIcon???
Noviembre 23rd, 2007 a las 12:52 am (#)
Mauricio, geocities, joolo o en general cualquier hosting gratuito que permita subir archivos .ico.
Saludos!
Noviembre 29th, 2007 a las 4:31 pm (#)
http://multi.tomablog.com
Acá se puede alojar sin más complicaciones
Noviembre 29th, 2007 a las 5:05 pm (#)
Lo acabo de colocar
Diciembre 11th, 2007 a las 1:57 pm (#)
Francisco, no logro comprender bien esto; si ya tengo un dominio, y frecuento mucho photobucket para subir mis fotos, no puedo hacerlo con la url que me brinda photobucket. se puede? o hay que ir al link que mencionas. ando perdida…ya comprendere… eso espero
Diciembre 17th, 2007 a las 2:45 am (#)
leny, me parece que photobucket no acepta el formato icono, mejor prueba con el enlace que muestra Wendy.
Y por cierto, gracias por el enlace Wendy
Enero 5th, 2008 a las 9:40 pm (#)
Hola
No he logrado visualizar el icono, reemplacé la URL del favicon.ico por la que geocities me daba, pero no logro verlo.
Lo he intentado varias veces pero no lo consigo aún.
Gracias
Enero 9th, 2008 a las 11:37 pm (#)
Gracias por la ayuda! Funciono perfectamente!
Además pueden subir ese icono a algún post en blogger.
Enero 19th, 2008 a las 9:32 am (#)
Creo haber hecho todo como lo explicas aqui, pero no me funciona sigo sin tener el codigo del icono. Como lo consigo ? desde ya muchas gracias
Enero 30th, 2008 a las 5:15 pm (#)
hecho!, sólo nos gustaría saber si la herramienta online para convertir a .ico que mencionan (la págna web), soporta .png para agregar un icono de fondo transparente…gracias!
Enero 30th, 2008 a las 7:47 pm (#)
Emmanuel para tener la dirección del .ico solo necesitas subir a http://multi.tomablog.com/.
moonwalkers, si acepta sin problemas los png con transparencia
Febrero 14th, 2008 a las 4:57 am (#)
Yo lo tenia pero no se por que desaparecio…
Tratare de hacerlo de nuevo, pero al parecer la pagina de favicon ya no funciona..
Febrero 14th, 2008 a las 9:48 am (#)
Gracias por este post, está muy útil. Lo voy a implementar en mi Blog.
También quisiera aportar mi granito de arena a este artículo y como complemento sugerirle un repositorio de iconos que encontré recientemente en un artículo publicado en esta dirección:
http://zenkius.blogspot.com/2008/02/repositorio-de-iconos.html
También comenta algo sobre cómo generar nuestros iconos online a partir de una imagen que tengamos en nuestra computadora.
Salud y suerte para todos!
Febrero 14th, 2008 a las 1:25 pm (#)
Los iconos se pueden hacer con el paint si no lo sabian
en blog ise un tutorial de como hacerlo.
http://utilidades.hideto.com.ar/2008/02/crear-iconos.html
Hay esta!
Febrero 16th, 2008 a las 12:40 pm (#)
Disculpa estoy creando mi blog pero no puedo poner el icono los subi a FileDEN pero me marca esto:
No hemos podido guardar tu plantilla
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
Se ha encontrado más de un artilugio con el ID: LinkList1. Los ID de artilugio deben ser exclusivos.
Me gustaria que me ayudaras si no es mucha molestia.
De antemano muchas gracias!!
Febrero 20th, 2008 a las 2:21 pm (#)
Ola Francisco Soy nuevo en estas cosas de codigos html y me gustaria poner mi icono propio, pero hice todo lo que decias arriba pero no me funciono.
tengo un blog que apenas esta comenzando y me gustaria tenerlo bastante original ayudame plis con este tema.
seria mucho pedirte el favor que me hicieras el codigo para añadirlo en mi blog.
gracias de antemano por la atencion prestada.
hasta luego.
Febrero 22nd, 2008 a las 3:24 pm (#)
Francisco te agradesco por la respuesta de antemano, mi pagina web esta sioportada por redtienda.com me gustaria si me puedes ayudar como poner mi logo en la direcciond de mi pagina web
Gracias
Febrero 24th, 2008 a las 9:33 pm (#)
Hola buenas hice todo al pie de la letra excelente explicacion el icono aparece lo unico es que cuando se agrega a favorito si no se agrega el icono que podra ser ?…
Espero por su ayuda y felicitaciones por su web ..
Marzo 4th, 2008 a las 8:44 pm (#)
Algunos problemas se deben a que algunos host aunque aceptan el formato .ico al momento de obtener la dirección del icono, siemplemente no se muestra, probe con http://multi.tomablog.com/ y funciona bien.
Saul, ese error no es por el icono, sino porque tienes repetido un código, en este caso un widget con el mismo nombre, cosa que no permite blogger.
GINO, lo siento, pero no soy bueno con los logos, para muestra puedes ver que en este blog aun no tenemos uno propio.
Richard, algunos navegadores no lo muestran en favoritos y en el caso de los que si lo hacen, tarda un tiempo en actualizarse.
Marzo 8th, 2008 a las 11:14 am (#)
Saludos a todos y todas, quiero dar las gracias porque al fin encontre la forma de colocar mi favicon gracias a esta web yo he buscado pero con el new blogger no habia podido.
Utilize la siguente pagina para generar el ICO http://www.genfavicon.com/es/
y luego lo aloge en:http://www.fileden.com/
hay que registrarse pero sube cualquier imagen incluso el ICO y luego nos da el código. Finalmente coloque el favicon tal como o dice en esta web y me funciono muy bien.
Gracias.
Marzo 20th, 2008 a las 7:23 pm (#)
hallo!! pues digenme cual de los siguientes es el codigo correcto? esuqe esas opciones paarcen en http://multi.tomablog.com/
Link to site
Hotlink for forums (1)
Hotlink for forums (2)
Hotlink for Websites
Display file
Download file
Display links
Mail File
Delete Link
Direct
no tngo idea cual tomar bueno tngo un foroactivo mi pag es la sig.http://tokiohotelmexico.the-up.com/ y otra preguntota… despues de colocar código del icono, que otros cambios le tengo q hacer al codigo de arriba?
…
…
ayuda por favor!! se los agradeceria muchoO! de antemano muchas gracias por que estoy segura de que me ayudarán !
Marzo 20th, 2008 a las 7:34 pm (#)
bueno `pues aki esta mi granito de arena para ver si complementan algo más cheken aki: http://www.favicon.net/
Mayo 31st, 2008 a las 7:11 am (#)
Hola Franciso…
Bueno he puesto el codigo en mi web y me esta ocasionando un error…al abrir la pagina con Mozilla Firefox el icono se ve, pero cuando se abre por IE el icono no se ve :(. Ya he borrado el cache de mi web, ademas de los archivos temporales de internet y cookies de mi IE y aun asi no se ve.
Alguna idea del por que?
Saludos xD
Junio 1st, 2008 a las 9:48 pm (#)
Leandro, en muchos casos IE tarda mucho en mostrar los favicos.
Junio 4th, 2008 a las 12:09 pm (#)
He dejado la web abierta por mas de una hora e igual sigo sin ver el favicon por IE :(-
Junio 8th, 2008 a las 11:31 am (#)
hola ¡! quisiera saver de donde sacar iconos
hermosos, lindos, gestuales, de gracias, perdon,
por favor, llamame, etc. pero quiero que sean iconos con
palabras , no con dibujitos si ?
bueno chauu nda mas para desir …
byee
Junio 23rd, 2008 a las 8:47 am (#)
Pude hacerlo sin problemas
Muchas gracias!!
Junio 26th, 2008 a las 5:01 pm (#)
mi computadora no abre http://multi.tomablog.com/ ni mozilla firefox ni internet explorer
al guien me podria ayudar o darme otra pagina de hosting para iconos por favor
Julio 21st, 2008 a las 4:33 am (#)
Muchas gracias me sirvió de mucho.
Julio 29th, 2008 a las 4:00 pm (#)
Hola!
Me encanta esta página!
Sólo queria agradecerte por este tutorial !!!
Finalmente lo conseguí…. yujuu !!!
Bueno, sólo quería preguntarte, cúanto tiempo se demora el IE aproximadamente en que aparezca el nuevo Favicon?
Lo que pasa es que en el Firefox me sale al toque el Favicon pero en IE, aún no.
El blog en el que he usado este tutorial ha sido http://cpais-socimep.blogspot.com
Muchas gracias Francisco!
Julio 29th, 2008 a las 4:03 pm (#)
Muchas gracias por todo!!!
Excelente ya me salió !!
Pero tengo una duda, ¿cuanto tiempo demora aproximadamente el IE en que me aparesca el Favicon ya que en Firefox me salió instantáneamente?
Byes!
Agosto 11th, 2008 a las 9:33 pm (#)
hahaha…
ya se cual es el problema de todos…
a mi tambien como a ustedes no me aparecia el icono pero luegos lo abri en firefox mozilla y me aparecio
en firefox no es necesario subir la imagen como un “.ico”
solo subes cualquier imagen, luego copias la url y la remplazas donde dice “favicon.ico” en el codigo que puso francisco, luego copias todo el codigo, lo pones en un blog y listo abres tu pagina en firefox
[color=red]si quieres que aparesca en exporer tienes que subir la imagen en un hosting que acepte archivos con la extencion “.icon”[/color]
Agosto 18th, 2008 a las 5:16 pm (#)