Colocar un icono en la barra de direcciones URL
No se si os habéis dado cuenta que muchas paginas tienen un pequeño icono o imagen en la barra de url y que queda muy gracioso e interesante para cuando nos tengan en favoritos que identifiquen nuestra pagina solo con ver el icono. Vamos a ver como podemos poner un icono en la barra de direcciones cuando pones tu página Web en el navegador. Asociar este icono es muy fácil, solo tienes que seguir estos pequeños pasos:
- Primero necesitas tener tu imagen. Una que sea bonita y que identifique a tu página. Debes de creártela usando algunos programas como por ejemplo pixia o gimp o iconedit32. Luego tenemos la opción fácil que seria tener una imagen en cualquier formato y mediante algunas paginas Web especializadas y de forma gratuita podemos conseguirlo. Por ejemplo una de estas:
- Luego debemos ver que nuestra imagen respete o no los estándares porque en cada caso será diferente y tendremos diferentes formas de hacer referencia al objeto.
-
Cuando respetamos los estándares por ejemplo con extensiones como PNG o GIF con dimensiones 16×16 o 32×32 píxeles. Debemos usar este código en nuestro <head></head> este código: <link rel=”icon” type=”image/png” href=”/images/mifavicon.png” /> Depende de la extensión del archive debemos de usar un type u otro. Ejemplos:
-
Formato PNG: image/png
-
Formato GIF: image/gif
-
Formato JPEG image/jpeg
-
-
Cuando no respetamos los estándares por ejemplo con Internet Explorer hay que utilizar extensiones como ICO y BMP y unas dimensiones de 16×16 píxeles. Debemos de poner en nuestro <head></head> este código: <link rel=”shortcut icon” type=”image/x-icon” href=”/images/ic.ico” />
-
- Otra forma seria poner un icono con extensión ICO para que algunos navegadores pongan el favicon automáticamente cuando entren en la página, pero esto no seria estándar.
No es muy útil hacer un favicon para IE, dado que éste sólo lo utiliza para los favoritos. Si utilizas un icono en un formato estándar y otro en formato ICO, no te aconsejo que pongas este último en la raíz: los navegadores lo mostrarán si no encuentran la imagen en formato PNG. También podemos utilizar un icono animado (ver enlaces de favicon arriba).
este codigo no funciona porningun lado
yo trabajo con dreaweaver cs3
y no funciona, me pueden ayudar
Pues muy facil. en el header metes el codigo que pongo en el post.
mira dos ejemplos:
este con un archivo gif.
link rel=”icon” type=”image/gif” href=”xxxxxxxxxxxxxx/favicon.gif” />
y este con un archivo ico.
link rel=”shortcut icon” type=”image/x-icon” href=”xxxxxxxxxxxxx/favicon.ico” />
Le pones la direccion del ico o el gif y listo.
mete los archivos o el archivo ico o gif en tu alojamiento en el raiz para que te sea mas facil.
buenas tardes!
yo he conseguido meterlo y en firefox se ve sin problemas, ya veo que en ie hay problemas, pero, y en safari? yo soy usuario de mac y tampoco me sale, mi web esta sobre una plantilla de oscommerce, no se si tiene que ver pero lo digo por si acaso…
muchas gracias, un saludo
Wnassssssss
e intentado muchas formas, y ninguna me resultó…
pero, … después d hacer unos cambios en el código, … resultó!!
es el siguiente:
1º colocaremos el código n la raiz, que se encuentra antes d .
osea, que me quedó así:
Como puedes observar cambié las comillas (“) por (‘).
http://####### (esto es la dirección del archivo) con formato .ico
Te recuerdo que el archivo es d 16*16.
Para ver los resultados os invito a mi blog
http://spaciosdhumor.blogspot.com/
saludos
@michael
link href=(‘)http://###########/########.ico(‘) rel=(‘)shortcut icon(‘) type=(‘)image/x-icon(‘)/
…
head
lo vuelvo a publicar porque no se publico con los signos reales ()
SOLO ES RETIRAR LOS PARENTESIS…
ok Entonces solucionado. al publicarlo me lo corrige automaticamente y no me di cuenta.
Amigo mio e tratado como mil veces de hacerlo pero por alguna razon o circuntancia no me resulta lo pongo en dreamweber……en la parte ahead que sale pero me es inutil……..cambie el icono en una de las paginas anexadas pero aun asi no pasa nada me podrias aportar mayores antecedentes casi paso a paso porque algo no hago bien y quiero aprender para poder colocarlo y darle mas peso a la pagina te lo agradecere mucho….
Pues tiene que quedarte algo asi:
link rel=”shortcut icon” href=”http://www.redesyseguridad.es/wp-content/uploads/2009/04/favicon.ico” type=”image/x-icon” /
pues yo hice mi pagina en una plantilla de wordpress y no se donde colocar el codigo que me preporcionan espero me puedan ayudar, ya hice el icono en chami y me da dos codigos si lo quiero animado o normal haber si me ayudan
Añade un plugin de wordpress que se llama “Shockingly Simple Favicon” con esto te vas a las opciones de este plugin y le metes la url del icono y listo. Eso si, lo primero es subir el icono a tu web.