feed twitter facebook LinkedIn facebook

HTML » Icono en la barra de navegación

Marzo 11, 2007 por Víctor Cuervo . 44482 visitas 43 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.  
  2. <link rel="shortcut icon" href="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:

43 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

1 2 3 4 5
  1. toni
    Enero 23, 2008 #

    Hola, he intentado todo pero me sigue saliendo el icono de navegacion de google page creator, como puedo desabilitar ese icono

    un saludo

  2. Luis
    Febrero 12, 2008 #

    Se puede agregar desde un estilo?? ya tengo como 60 paginas hechas y me lleva mucho trabajo. Ademas, para poder cambiarles el icono a todas de una vez.
    Gracias!!

  3. Estefanía
    Febrero 21, 2008 #

    Aún nesecito ayuuudaaa!!

  4. Andrea
    Marzo 20, 2008 #

    Hola, a mi me funciona normalmente el favicon pero en la pagina principal el que contiene los frames no me funciona, que mas podria ser???

    saludos

  5. Juan
    Abril 11, 2008 #

    Hola. Como se puede ver el icono en un dominio gratis o redireccionamiento. Gracias.

  6. Maria
    Junio 8, 2008 #

    hola alguien puede ayudarme? mi icono se ve en mozilla pero no en internet explorer, use esta line d codigo en el head , agradeceria q alguien me ayude si sepuede hacer algo al respecto.

  7. carolina
    Julio 2, 2008 #

    hola!!!
    hago exactamente (o al menos eso creo) lo que dices y no me resulta!!!! por quéeeee???!!!
    te mando el código como lo tengo puesto a ver si hay error.
    GRACIAS!!
    caro.

  8. Piropeator
    Julio 22, 2008 #

    Y qué pasa con los que trabajan con PHP ??

  9. bryan
    Agosto 23, 2008 #

    hola soy un admirador de yingo y de ustedes
    les quiero desear lo mejor y que me digan algo ustedes tienen
    alguna amiga que me presenten conctense y agregenme
    bay bay bay bay aby abya bh
    bexox

    bryan_bulla_13@hotmail.com

  10. salva
    Abril 1, 2009 #

    Hola a tod@s,
    Tengo un problema que no se como se soluciona.
    Quiero añadir un icono a mi aplicación, pero cuando inserto la linea para enlazar y referenciar el icono me pone lo siguiente:

    “entre los valores permitidos en este atributo no se incluye shortcut icon”

    si teneis alguna idea de como añadir atributos a la etiqueta rel me seria de gran ayuda
    un saludo

1 2 3 4 5

Deje un comentario

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

*