feed twitter facebook LinkedIn facebook

HTML » Icono en la barra de navegación

marzo 11, 2007 por Víctor Cuervo 45 Comentarios Imprimir Imprimir

Desde hace unos años, los navegadores permiten incluir tanto en la barra de navegación como en los listados de preferidos un icono (.ico).

El código HTML a utilizar para incluir el icono se representa en la siguiente línea de código:

  1. <link rel="shortcut icon" href="http://lineadecodigo.com/wp-content/uploads/2007/03/favicon.ico">

Este código tiene que ir dentro de la cabecera HEAD de la página web.

Es bueno utilizar el nombre de favicon.ico para el icono, ya que muchos navegadores lo descargan y lo ponen en la barra de navegación sin necesidad de incluir el código HTML en las páginas.

Hay que tener en cuenta una serie de consideraciones:

  1. El fichero del icono deberá de tener unas dimensiones de 16x16.
  2. Para algunos navegadores necesitaremos el añadir la dirección web a los favoritos para que el navegador empiece a mostrar el icono en la barra de navegación
  3. El fichero con el icono podrá estar en cualquier servidor o directorio. En tal caso podremos reflejarlo mediante direcciones absolutas (http://lineadecodigo.com/favicon.ico) o relativas (/imagenes/favicon.ico).

Un buen programa para diseñar nuestros iconos es el Microangelo, del cual puedes descargar una trial en http://www.microangelo.us/.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML
Foro sobre HTML
tags: , , , , ,

Artículos relacionados:

45 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

1 2 3 5
  1. Fran
    marzo 16, 2007 #

    Para los navegadores modernos también valen los formatos jpg, png y gif, incluidas transparencias y animaciones. De ese modo se puede emplear cualquier aplicación de tratamiento de imágenes para confeccionarlo.

  2. evitish
    abril 18, 2007 #

    He hecho lo que decís y el el Mozilla Firefox sí sale, pero en el Internet Explorer no.

  3. lineadecodigo
    abril 18, 2007 #

    Has probado a almacenarlo en favoritos. A veces, también tienes que cerrar el navegador y volver a abrirlo.

    ¿Sobre que versión de IExplorer lo has probado?

  4. Roberto
    mayo 9, 2007 #

    Gracias por el artículo. Ya tengo mi favicon y fue generado por una página de internet, pero lo generó en dimensiones 32 x 32. En esa misma página dicen que los exploradores aceptan dichas dimensiones también, es asi??
    Muchas gracias

  5. Carlos
    mayo 30, 2007 #

    Yo tengo el problema de que lo muestra en el firefox pero no en el explorer, mi version del explorer es la 6 punto y algo mas…. Que debo hacer para que se vea en todos los navegadores?

  6. luis
    junio 20, 2007 #

    pues mi blog es de blogger y he podido subir el icono porque no se donde ponerlo lo pongo como un archivo html y no funciona asi lo pongo y no funciona
    y luego lei en otras paginas que se debe poner en modificar plantilla y a final de cuantas no entiendo nada pero voy a intentar su procedimiento.si alguien me quiere ayudar que me contacte por messenger luis5000rts@hotmail.com y mi blog es rammstein-ucr-the-best.blogspot.com

  7. vanessa
    julio 31, 2007 #

    hola, no puedo hacerlo en googlepages? aunque el formato y tamaño del icono son correctos, cuando lo subo, me aparece SIEMPRE (he probado varios iconos diferentes) el icono de googlepages. ¡Alguien sabe que pasa? ¡gracias!

  8. vanessa
    julio 31, 2007 #

    si alguien tuvo el mismo problema y lo pudo solucionar, puede decirme como, clavedesolcibercafe@gmail.com, muy agradecida.

  9. Yuko
    agosto 10, 2007 #

    Hola, gracias por la ayuda, mi problema es que me aparece el icono rojo del panel de conrol plesk de mi dominio. ¿Hay alguna manera de cambiarlo? Gracias de antemano.

  10. Sakuri-chan
    agosto 25, 2007 #

    Alguien que pueda dar una buena página donde subir los iconos? o.o

    De antemano, gracias.-

1 2 3 5

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*