Icono en la barra de navegación

11/mar/2007 HTML , 46 Comentarios
html

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

Vídeos sobre HTML

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

46 comentarios en “Icono en la barra de navegación”

Víctor Cuervo

Roger

Aca tengo una pregunta, uno de estos dias estube viendo algo en un foro de autos, al momento que terminara de lo que hacia tipie en la barra del navegador https://www.facebook.com/, la pagina abrio pero aparecio el icono de la pagina anterior (ver ejemplo en http://www.subirimagenes.com/imagen-facebook-9269760.html), y de ahora en adelante la pagina de facebook en mi seccion de google (independiente del pc que use) aparece con el icono de la pagina anterior, si alguien sabe “el por que?” me seria de ayuda su conocimiento. Gracias de antemano!

Víctor Cuervo

Víctor Cuervo

Hola Roger, tiene ser pinta de un tema de caché. Borra las cachés del navegador y seguro que se soluciona. Saludos.

Víctor Cuervo

Roger

Aca tengo una pregunta, uno de estos dias estube viendo algo en un foro de autos, al momento que terminara de lo que hacia tipie en la barra del navegador https://www.facebook.com/, la pagina abrio pero aparecio el icono de la pagina anterior, y de ahora en adelante la pagina de facebook en mi seccion de google (independiente del pc que use) aparece con el icono de la pagina anterior, si alguien sabe “el por que?” me seria de ayuda su conocimiento. Gracias de antemano!

Víctor Cuervo

nikollai

yo lo necesito para el google chrome pero no me funciona si depronto me puedes ayudar te lo agradeceria… muchas gracias

Víctor Cuervo

Trabalón

Hola, por favor quería saber cómo tengo que hacer para insertar un icono al lado de mi dominio en el buscador para que lo vea el que visite mi web. Veréis: tengo ya el código (creado en favicon.ico), el icono lo subí con NICO FTP a mi servidor, Tengo dos archivos: 1: titulado deafult qué es donde hago los cambios de la página principal y 2: que es la plantilla para toda la web. ¿En donde lo inserto? ¿en default? El programa que utilizo para editar mi web es Dreamweaver. Por favor si alguien me puede ayudar cómo hacerlo paso a paso se lo agradecería mucho. Gracias a todos. Un saludo desde Madrid. Escribanme por favor a: trabalon2007@hotmail.com

Víctor Cuervo

Zllua

a mi me sale en IE pero en firefox no me sale el icono, porke sera ???

Víctor Cuervo

lineadecodigo

@edgard rodas,

Gracias por el dato. Efectivamente, el código estaba mal. Ya lo hemos corregido y dejado de una forma correcta.

Lo dicho, muchas gracias por descubrir el bug.

Víctor Cuervo

lineadecodigo

@luis,

Muchas gracias por el aporte y el truco de blogger.

Víctor Cuervo

edgard rodas

de antemano gracias por el articulo
eso codigo no funciona
al menos firefox 3
ya que no reconoce la propiedad src
solamente hay que cambiarla por href
y ya funciona

Víctor Cuervo

Edgar Franco

En IE 8.0 solo limpié los archivos temporales, historial, etc. Luego cambié de mi sitio WEB a otro. Al regresar a mi sitio WEB ya apreció e ícono.

Víctor Cuervo

luis

Hola soy: 6. luis – Junio 20, 2007 el del comentario numero 6…jajaja me da risa mi mismo que antes no pude entender algo tan sencillo, pero lo que pasaba esque en blogger no se admiten “” comillas ahi deben de ser apostrofes ” osea que el codigo es asi para blogger:
ademas se debe poner el codigo en edicion de html,
y en mi caso no se le debe poner de nombre al icono FAVICON porque ese es el nombre del icono de blogger y por lo tanto si le pongo el mismo no lo sustituira y ademas el lugar correcto donde se debe de poner el codigo es antes de pero exactamente antes de para que funcione correctamente ahora el blog que tenia ya lo di de baja y hice uno nuevo este se llama Hack Diseño® e ironicamente doy trucos para blogger…jajaja despues de que no sabia nada…jajaja bueno ps si a alguien le interesa saber mas acerca de blogger que visite mi blog. adios y saludos.

Víctor Cuervo

lineadecodigo

@Baume,

Que raro. Yo uso safari y se ve correctamente… ¿?¿?

Víctor Cuervo

Baume

Hola a todos,

Siguiendo sus indicaciones me funciona perfecamente en Firefox, pero en Safari no sale el icono.

Alguien sabe como solucionarlo?

Muchas gracias

Baume

Víctor Cuervo

lineadecodigo

@angie maria, ¿qué navegador utilizas?

Víctor Cuervo

AnGiE MaRiA

ola quiero saber cuales son los tres iconos de la barra de navegacion

Víctor Cuervo

AnGiE MaRiA

ola quiero saber cuales son los tres iconos de la barra de avegacion

Víctor Cuervo

salva

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

Víctor Cuervo

bryan

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

Víctor Cuervo

Piropeator

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

Víctor Cuervo

carolina

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.

Víctor Cuervo

Maria

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.

Víctor Cuervo

Juan

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

Víctor Cuervo

Andrea

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

Víctor Cuervo

Estefanía

Aún nesecito ayuuudaaa!!

Víctor Cuervo

Luis

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

Víctor Cuervo

toni

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

un saludo

Víctor Cuervo

Kakaroto

Hola a todos, he creado un favicon pero no me funciona en IE6, alguien podria decirme porque?

Gracias

Víctor Cuervo

Estefanía

uy porfa he tratado de muxas formas poner un icono y no puedo, no hay caso trate por los htmal, y no entiendo nada es que es de blogger y esta medio confuso, porfa llevo tiempo en esto y si alguien me puede ayudar se lo agradeceria, ademas no se donde conseguir iconos…
la_melancolica_62@hotmail.com y el blog es http://www.garage-chile.blogspot.com….se los agradeceria muchitooo!!!!

Víctor Cuervo

LanzMac

Hola que tal , les envio este link donde podran crear su icono con solo un clip. http://www.html-kit.com/favicon/
Es muy facil , espero que les sirva. LanzMac – Venezuela

Víctor Cuervo

ana

0laaa si alguien tienee iconos de rammstein marilyn manson slipknot brujeriaaa i esas kosas k me agregeee ana_ruiz_melguizo@hotmail.com

Víctor Cuervo

lixxx

si yo tengo una pagina hecha 100% en flash como le puedo poner el icono en la barra de navegacion

Víctor Cuervo

JuanFer

A mi me funciono agregando en

Gracias a todos por sus comentarios

Víctor Cuervo

Alex

Gracias linea de código. Tenía el mismo problema que Yuko, pues a mi también me aparecía el icono rojo de Plesk y no se me cambiaba. Vacié la caché y funcionó por fin.

Víctor Cuervo

lineadecodigo

Sergio,

Si tienes frames, tienes que poner el enlaces al icono en la página que contenga a los frames. Dentro del HEAD.

Te pego un ejemplo de página de frames con el favicon:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Tres Frames</title>
<link rel=”shortcut icon” src=”favicon.ico”>
</head>
<frameset cols=”20%,*”>
<frame src=”izquierda.html” name=”izquierda”>
<frameset rows=”*,10%”>
<frame src=”superior.html” name=”superior”>
<frame src=”inferior.html” name=”inferior”>
</frameset>
<noframes>
<body>
<p>Esta página utiliza frames. Su navegador no soporta frames.</p>
</body>
</noframes>
</frameset>
</html>

Espero que te sea de ayuda.

Víctor Cuervo

sergio

ya descarge el icono de favicon pero no aparece en una pagina con frames! ¿en que parte del codigo se debe colocar?

Víctor Cuervo

lineadecodigo

Yuko, busca si hay algún fichero que se llame favicon.ico en alguno de los directorios de tu servidor y sustituyele por tu icono.

A veces, incluso habiendo hecho esto, puede ser que tu navegador lo tenga cacheado y te siga saliendo el anterior. Lo que tienes que hacer es vaciar la cache de tu navegador y volver a cambiar la página.

Espero que te sirva de ayuda…

Víctor Cuervo

Sakuri-chan

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

De antemano, gracias.-

Víctor Cuervo

Yuko

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.

Víctor Cuervo

vanessa

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

Víctor Cuervo

vanessa

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!

Víctor Cuervo

luis

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

Víctor Cuervo

Carlos

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?

Víctor Cuervo

Roberto

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

Víctor Cuervo

lineadecodigo

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?

Víctor Cuervo

evitish

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

Víctor Cuervo

Fran

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.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*