DesarrolloWeb.com > Manuales > Ayudas técnicas

Icono en favoritos

Valoración del artículo:

Ver comentarios del artículo (24)

En este artículo te enseñamos a colocar un icono personalizado de tu sitio en el menú de favoritos, para que aparezca en lugar del icono de Internet Explorer.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

En este artículo vamos a aprender a colocar un icono en el menú de favoritos, de modo que cuando alguien guarde la página en sus favoritos se vea la página con el icono que nosotros deseemos, en lugar del icono de Internet Explorer. El icono de nuestra página también se podrá ver en la barra de direcciones del explorador, siempre a partir del momento en que un usuario guarde la página en favoritos.

Es un efecto muy sencillo y vistoso, pero tiene un serio inconveniente: solo funciona en Internet Explorer versión 5. No funciona en Netscape ni en versiones distintas de Explorer.

Cómo conseguir un icono

Un icono es un archivo especial, que tiene extensión .ico. Los editores de gráficos habituales no trabajan con este formato, por lo que se requerirá del uso de una herramienta especial para la creación y tratamiento de la imagen que vamos a utilizar como icono.

Una popular herramienta útil para trabajar con iconos es Microangelo. Permite la creación de gráficos que luego se pueden guardar como .ico. También permite convertir a iconos gráficos en formato GIF.

Donde colocar el icono

Para conseguir nuestro objetivo tenemos dos posibilidades. La primera se trata de colocar un icono a todo un sitio web entero. Con la segunda opción podremos asignar un icono en una página de manera independiente.

Colocar un icono en un sitio, de manera global

Para ello debemos conseguir un archivo ico y darle el nombre "favicon.ico". Este archivo lo colocaremos en el directorio raiz del dominio. Cuando se introduzca en favoritos cualquier página del sitio se vera el icono seleccionado.

No siempre tenemos acceso al directorio raiz del dominio. Imaginemos que publicamos una web en Geocities, en este caso nunca tendremos acceso al directorio raiz, www.geocities.com, sino que tendremos acceso al directorio que nos hayan asignado, www.geocities.com/mipagina. Para este caso, tenemos una segunda manera de insertar el icono.

Colocar un icono específico en una página

En este caso tenemos que colocar una etiqueta en la cabecera del documento HTML (entre y ). Esta etiqueta la tenemos que colocar en cada página que queramos asociar con un icono.

<link rel="SHORTCUT ICON" href="myicono.ico">

Por supuesto, en el atributo href de la etiqueta anterior, se ha de colocar el nombre del icono que queremos utilizar y la ruta para acceder a el. En el caso del ejemplo anterior se supone que un archivo llamado myicono.ico estará en el mismo directorio que la página web.

Enviar un comentario al artículo

MANUAL: Ayudas técnicas

Formatos gráficos para páginas web

Definiciones de pantalla

Comentarios

Enviar un comentario al artículo

Fueron enviados 24 comentarios al artículo

1 comentario no revisado

23 comentarios revisados:

Por: Juan Ig Padial

25/4/01

Además con el Microangelo, se puede hacer un icono de la siguiente forma:

- Con cualquier programa de diseño, tipo Photoshop, creamos una imagen, a la hora de guardarla, lo hacemos como imagen bitmap de 256 colores.
- Nos vamos a MS-DOS y allí renombramos este archivo de .bmp a .ico con la orden ren "nombre de archivo.bmp" nombre de archivo.ico" y listo, ya tenemos el icono.

Por: Julio Ramos

24/4/02

La forma mas asequible y sencilla de hacer un icono es con el Paint. Solamente tendremos que dibujar el icono en un archivo en el que los atributos de la imagen sean razonables (p.e. 50x50 pixeles), y al Guardar como ... escribir el nombre del archivo con la extensión ico.

Por: Felipe Rojas

29/8/02

Esto NO funciona con Explorer 6.0

Por: Jose Luis

17/1/03

Seriais tan amables de explicarme por qué el Iexplorer 6 no me muestra el icono que he subido al servidor de ono y sin embargo el d otras paginas, como la vuestra, sí?

NECESITAMOS RESPUESTA

Pues que nos lo explique alguien que lo sepa, puesto por lo que he podido observar con mi experiencia es que a veces se muestran los iconos y a veces no... He visto que en IE6 para XP los iconos se muestran con mucha facilidad, aunque el de DesarrolloWeb.com ahora no lo puedo ver. En IE6 para W98 seguro que no he podido ver los iconos.

En definitiva, queda aquí la pregunta para el que la pueda resolver. Saludos.

Por: María Pié

18/1/03

Los gráficos con extensión .ico pueden hacerse con el PhotoImpact (al menos con la versión 7). Es el único programa de diseño de imágenes que conozco que te permite guardar la imagen directamente con la extensión .ico, sin tener que transformarla luego.

Por: Mauro

27/5/03

No se porque a mi no me funciona, hice todo lo que aqui aparece.

Por: Carlos

22/9/03

El programa favicom ya no es gratuito :

Program Name IconForge Favicon/BuddyIcon Edition Download Now Get this on CD
Description Create favorites icons(favicons), BuddyIcons and more
Version/File 6.28b iconforge.exe
Date 16 Jun 03
License/Cost ShareWare (Time Limited) $37.95

Por: Javier Rodriguez

22/10/03

ICONFACTORY es un plug-in, para Photoshop, que permite crear estos iconos, tanto para MAC como para PC. El plug-in funciona en Photoshop 6 y 7 para MAC y PC.

Por: LIMBO

06/7/04

Es cirto que no funciona con explorer, pasaros a FireFox, estable, intuitivo, configurable al 99%, aunque se come algun que otro javascript, el tema de los iconos lo realiza perfectamente

Por: David

05/8/04

Realmente no es necesario contar con un archivo .ICO para poderlo realizar, con solo poner en el código:

<link rel="icon" href="NOMBRE_DE_LA_IMAGEN.png" type="image/png">
Si tienes un icono pero no puede verse o cuando "quiere" se ve intenta con:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Por: Abejo

08/9/04

El IrfanView permite convertir a .ico, el IE6 NO muestra los Iconos de los sitios

Por: Largaro

26/2/05

Hacer un icono es muy facil, no hace falta ningún programa raro con el Paint se puede hacer.

Hacemos un cuadro de 16x16; pegamos el dibujo que queramos crear como icono y lo guardamos en 24 bits, y luego le cambiamos la extensión ".bmp" por ".ico"

Para poder ver la extensión de un archivo; hay que abrir un carpeta cualquiera, en la parte superior hay un desplegable llamado HERRAMIENTAS vamos a OPCIONES DE CARPETA y desactivamos en la pestaña VER una opción llamada OCULTAR LAS EXTENSIONES DE ARCHIVOS PARA TIPOS DE ARCHIVOS CONOCIDOS (una vez que podemos ver el ".bmp" ponemos ".ico"

Por: adolfoblasco

24/4/05

Geocities no acepta el favicon

Por: Paul Lopez

23/5/05

No se por que hacen tantos comentarios que en lugar de guiar mas a los usuarios los confunden.

Si NO SABES COMO HACER UN ICONO no necesitas ningun programa extranio ni meterte al MS-DOS para renombrar, es tan sencillo como dice LARGARO solo requieres del PAINT, este sencillo programa viene en todo windows, y puedes accesar a el mediante el menu principal de windows q es inicio-programas-accesorios-paint despues dentro del paint te vas al menu imagen-atributos te va a salir un cuadrito pequenio y donde dice width ponle 32 y el height tambien ponle 32 q es el tamanio estandar de un icono 32x32 pixeles (ahorita el xp usa los de 128 pero no los recomiendo todavia jeje) mejor usa 32 pixeles y aqui ya haces tu icono y a la hora de grabarlo te vas al menu archivo-guardar como y le pones favicon.ico y el tipo de abajito elige la opcion 24-bit Bitmap (*.bmp;*.dib) y es todo ya tienes tu favicon.ico

Por: yo

06/9/05

<LINK REL="SHORTCUT ICON" HREF="http://www.tuweb/favicon.ico">

solo hay q cambiar la url de tu web, lo de shortcut icon dejarlo tal como está
Puede que no salga con IE pero funciona. con opera salen

Por: kofreone

13/10/05

como ya lo habian dicho , sin mas ciencia ni programas , lo que pueden hacer es hacer la imagen de photoshop o fireworks , la importan en paint despues le dan las dimensiones apropiadas 32x32 la guardan , en la ventana de "Guardar como:" solo escribe favico.ico y ya , el paint automaticamente la guarda como archivo de icono , sin necesidad de usar dos ...

Por: unoquevaporahi

31/1/06

Renombrar el archivo a .ico no hace que el archivo pase a ser un icono... Seguirá siendo un archivo BMP pero con extensión .ico... es como si le cambias la carrocería a un 600 y le pones la de un ferrari, sigue siendo lo mismo.

Usad cualquier programa de creación de iconos(Microangelo, Axialis IconWorkshop, IconEdit, etc.), pero el paint no sirve.

Por: carlos

25/3/06

En explorer no funciona, no hay manera...

Por: Camilo

09/12/06

El icono en Internet Explorer aparece cuando agregas la pagina a favoritos.

Por: kros

02/1/07

no se hagan bolas para crear iconos solo bajen icon cool edition seleccionan una imagen que tengan y la convierten en icono con un click

Por: informata

29/5/07

Internet Explorer 6 no funciona con la etiqueta shorcut, sino que lo que hace es leer el icono del archivo que se debe situar en el home del espacio con el nombre favicon.ico.

El formato puede ser también un bmp con extensión ico sin problemas.

Espero haberos servido de ayuda.

Por: mastercafe

22/6/07

Lamento deciros que el tema de Explorer es como una caja de pandora.
No es cierto que si está en favoritos aparece (en ocasiones si.. pero no siempre)
No es cierto que solo con ponerlo ya funciona todo (en ocasiones si.. pero no siempre)
Lo que todos los navegadores conocidos: FireFox, Opera, Netscape, Mozilla, Safari, Maxthon, etc... si hacen bien con el favicon.ico el Explorer normalmente no lo hace o lo hace en ciertas condiciones.
La experiencia me dice que no es necesario que esté en favoritos, pero ayuda. Que si la web tiene una pagina principal que indica que hay favicon suele funcionar (no siempre). Que si pones la ruta completa del favicon.ico también ayuda (no siempre). Que si la meta es completa: <link rel="shortcut icon" href="http://www.tuweb.com/favicon.ico" type="image/x-icon" > suele funcionar (no siempre). suele mejorar (no siempre).
Vamos que explorer es como una loteria y nadie tiene explicación a esto.

Por: Pau

30/11/07

Donde pone: En este caso tenemos que colocar una etiqueta en la cabecera del documento HTML (entre head y /head) --> se os ha olvidado ponerlo con lt y gt, asi que no aparece nada. Lo he tenido que ver con el fuente :p
Un saludo y felicidades por la web

Ver comentarios pendientes de revisar

Enviar un comentario al artículo