English Português

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.

  1. 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.
  2. 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.

  3. 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.
  4. 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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Comentarios

  1. Fran Ontanaya / Hace 7 años /

    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.

    Responder a Fran Ontanaya →
  2. Francisco / Hace 7 años /

    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).

    Responder a Francisco →
  3. Matrix / Hace 7 años /

    no me funciono este truco amigo :(

    a la mejor lo estoy haciendo mal tambien jeje

    Responder a Matrix →
  4. Francisco / Hace 7 años /

    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!

    Responder a Francisco →
  5. luis ucr / Hace 7 años /

    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!!!!!!!!!!!!!¿?¿??????????????????????

    Responder a luis ucr →
  6. Francisco / Hace 7 años /

    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.

    Responder a Francisco →
  7. Miguel / Hace 7 años /

    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

    Responder a Miguel →
  8. Francisco / Hace 7 años /

    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!

    Responder a Francisco →
  9. Ismael / Hace 7 años /

    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.

    Responder a Ismael →
  10. Francisco / Hace 7 años /

    Que bueno te sea util Ismael :)

    Responder a Francisco →
  11. Mr. Speed / Hace 7 años /

    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.

    Responder a Mr. Speed →
  12. Francisco / Hace 7 años /

    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!

    Responder a Francisco →
  13. Mr. Speed / Hace 7 años /

    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!!!

    Responder a Mr. Speed →
  14. DExter / Hace 7 años /

    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…!!!

    Responder a DExter →
  15. Mauricio / Hace 7 años /

    Francisco, donde más puedo hospedar mi FavIcon???

    Responder a Mauricio →
  16. Francisco / Hace 7 años /

    Mauricio, geocities, joolo o en general cualquier hosting gratuito que permita subir archivos .ico.

    Saludos!

    Responder a Francisco →
  17. Wendy Pepper / Hace 7 años /

    http://multi.tomablog.com

    Acá se puede alojar sin más complicaciones

    Responder a Wendy Pepper →
  18. Mauricio / Hace 7 años /

    Lo acabo de colocar :)

    Responder a Mauricio →
  19. leny / Hace 7 años /

    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

    Responder a leny →
  20. Francisco / Hace 7 años /

    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 ;)

    Responder a Francisco →
  21. Andrea / Hace 7 años /

    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

    Responder a Andrea →
  22. kaji Graffit / Hace 7 años /

    Gracias por la ayuda! Funciono perfectamente!

    Además pueden subir ese icono a algún post en blogger.

    Responder a kaji Graffit →
  23. Emanuel / Hace 7 años /

    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

    Responder a Emanuel →
  24. moonwalkers / Hace 6 años /

    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!

    Responder a moonwalkers →
  25. Francisco / Hace 6 años /

    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

    Responder a Francisco →
  26. Truly / Hace 6 años /

    Yo lo tenia pero no se por que desaparecio…

    :(

    Tratare de hacerlo de nuevo, pero al parecer la pagina de favicon ya no funciona..

    Responder a Truly →
  27. Reynier Matos Padilla / Hace 6 años /

    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!
    ;)

    Responder a Reynier Matos Padilla →
  28. Hideto / Hace 6 años /

    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!

    Responder a Hideto →
  29. Saul / Hace 6 años /

    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!!

    Responder a Saul →
  30. David / Hace 6 años /

    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.

    Responder a David →
  31. GINO / Hace 6 años /

    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

    Responder a GINO →
  32. Richard / Hace 6 años /

    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 ..

    Responder a Richard →
  33. Francisco / Hace 6 años /

    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.

    Responder a Francisco →
  34. Gerardo Perez / Hace 6 años /

    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.

    Responder a Gerardo Perez →
  35. mayruxx / Hace 6 años /

    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 !

    Responder a mayruxx →
  36. mayruxx / Hace 6 años /

    bueno `pues aki esta mi granito de arena para ver si complementan algo más cheken aki: http://www.favicon.net/

    Responder a mayruxx →
  37. LEANDRO / Hace 6 años /

    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

    Responder a LEANDRO →
  38. Francisco / Hace 6 años /

    Leandro, en muchos casos IE tarda mucho en mostrar los favicos.

    Responder a Francisco →
  39. LEANDRO / Hace 6 años /

    He dejado la web abierta por mas de una hora e igual sigo sin ver el favicon por IE :( -

    Responder a LEANDRO →
  40. luci / Hace 6 años /

    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

    Responder a luci →
  41. Marisa / Hace 6 años /

    Pude hacerlo sin problemas
    Muchas gracias!!

    Responder a Marisa →
  42. Skajokcer / Hace 6 años /

    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

    Responder a Skajokcer →
  43. Chema / Hace 6 años /

    Muchas gracias me sirvió de mucho.

    Responder a Chema →
  44. Yuri / Hace 6 años /

    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!

    Responder a Yuri →
  45. Yuri / Hace 6 años /

    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!

    Responder a Yuri →
  46. ganium / Hace 6 años /

    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]

    Responder a ganium →
  47. Anonimo / Hace 6 años /

    :P ¿Donde Se Pega? No cAcho

    Responder a Anonimo →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad