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.
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: sólo funciona en Internet Explorer versión 5. No funciona en Netscape ni en versiones antiguas de Explorer. Actualizado: el icono personalizado para las webs ahora lo soportan todos los navegadores.
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.
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.
Es un efecto muy sencillo y vistoso,
Actualizado: Este es uno de los primeros artículos publicados en DesarrolloWeb.com y desde entonces algunas cosas han cambiado, aunque todavía podemos seguir sus instrucciones para publicar un icono para nuestra web. Para empezar, todos los navegadores de la actualidad soportan el icono "favicon". Internet Explorer 6 es el único que da algunos problemas, pero ese navegador cada día se utiliza por menos usuarios. Además, ahora los navegadores no necesitan que se marque la web como favorita para empezar a mostrar el icono. Simplemente, cuando visitan una página, intentan acceder al archivo favicon.ico en la raíz del dominio y lo muestran en la barra de direcciones, en las pestañas o donde sea. Se pueden leer los comentarios de los usuarios, al final del texto del artículo, que muchas veces ofrecen pistas y actualizaciones interesantes para los interesados en colocar su propio icono.
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.
Nota: Hemos publicado un vídeo que muestra el proceso de creación de un icono con Gimp y cómo subirlo por FTP para que se muestre en una página web: Crear icono favicon.ico para una web con Gimp.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...