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.
Hola, espero me ayuden porque no se mucho de diseno de paginas. tengo mi pagina web con wordpress.org y queria subir esa imagen al lado del http://www., Fui a favicon y me dio esta direccion , lo que no se es donde pegar es direccion en mi editor de pagina, alguien me puede ayudar ? Yo uso word press. org
Leete el post. y los mensajes. Esta muy facil hacerlo. tu icono subelo al raiz de www y luego añades el link que explico mas arriba.
TenÃa entendido que esto solo funcionaba con archivos tipo .ico, pero de ser asà esto facilitarÃa las cosas porque casi no alojan este tipo de archivos. Me queda la duda y talvez lo compruebe otro dÃa, pero si el maestro lo confirma ni hablar. Muchas gracias.
Claro que si puedes. usa png o jpeg pero en cada caso en algunos exploradores no habre bien.
Les dejo un excelente directorio web para que publiquen su sitio: http://www.interred.com.ar
hola. en caso de wordpress que hago?
Lo mismo que digo en el post. yo tengo wordpress y lo tengo hecho. sube la foto a la raiz de tu web.
MUCHISIMAS GRACIAS, he estado buscando y he encontrado varios sitios que me indicaban como hacerlo, pero al compararlo con tu información me he dado cuenta de que tenian un fallo de código. Para mi es muy importante haberlo conseguido, ya tengo icono en mi web http://www.comotocarunaguitarra.net, de verdad que te estoy agradecido