Una de las preguntas más frecuentes que recibimos es la que hace referencia a la forma de personalizar el icono que aparece en el menú Favoritos de Internet Explorer cuando se guarda una página web.

Internet Explorer, como buen producto Microsoft, permite personalizar el icono que aparece tanto en este menú como el que se muestra en la barra de direcciones cuando se visita una de nuestras páginas, mediante una imagen especial, un icono, que se llama favicon.ico y que debe estar en el directorio raíz de nuestro sitio web.

Fijaros bien en el nombre de la imagen, favicon.ico, es decir, debe ser una imagen que se llame favicon y que tenga extensión .ico, los famosos iconos de Microsoft.

Para crear una imagen de este tipo, tendremos que usar unos programas gráficos especiales, uno de los cuales, el más conocido es Microangelo, de la casa ImpactSoft, del que podemos descargar una versión demo desde http://www.impactsoft.com.

La interfaz de este programa es simple e intuitiva, permitiendo la creación directa de un icono o la importación de cualquier tipo de imagen (basta copiarla en la aplicación origen y pegarla en Microangelo). Las imágenes aparecen en la interfaz en modo pixels, es decir, formada por cuadraditos de colores, cada uno de los cuales representa un pixel.

Vamos a crear un icono para HTMLWeb, y seguiremos el proceso completo:

1. En primer lugar, abrimos Paint Shop Pro y capturamos el logotipo gráfico de la home de HTMLWeb, usando la herramienta capture en su modalidad área, procurando aproximarnos lo más posible a una captura rectangular.

2. Limpiamos la imagen de parásitos de la captura, dejando sólo el logo y el color de fondo adecuado. Para ello seleccionamos el cuentagotas   y marcamos el color de fondo como colores de fondo y de borde de nuestro trabajo, haciendo click con ambos botones del ratón sobre el color de fondo de la captura. Luego seleccionamos la herramienta pincel    y borramos todos los restos indeseados.

3. Tenemos que buscar una imagen cuadrada, ya que nuestro objetivo, favicon, debe tener esta forma, y lo normal es que la captura no nos quede así. Para solucionarlo, vemos las dimensiones de nuestra imagen actual, calculamos el rectángulo más pequeño que la contenga y creamos una nueva imagen de ese tamaño, con color de fondo igual que el buscado, pegando encima de ella la imagen anterior, centrándola adecuadamente (le pongo bordes para que la veáis):

4. Ahora debes pasar esta imagen a Microangelo, creando primero en este programa una nueva imagen tipo icono, de 16x16 ó 32x32 pixels, 16 ó 256 colores, y copiando la imagen de Photoshop, la pegamos en Microangelo. Debemos comprobar que se vea bien a ese tamaño, ya que se suelen deformar bastante los contornos. Guardamos la imagen con el nombre de favicon.ico y la abrimos en un navegador, viendo cómo queda.

5. Bueno, vemos que quedan bastante borrosos los contormnos. Retocamos en Microangelo pixel a pixel hasta lograr un aspecto adecuado.

Otra forma de crear un cino es directamente en Microangelo. Deberemos procurar diseñar una imagen lo más simple posible, con pocas curvas, con trazos de 1 pixel. Se hace simplemente seleccionando los el color deseado en la paleta correspondiente y utilizar luego sobre el lienzo la herramienta de dibujo necesario (pincel, rectángulo, círculo, etc.).

Una vez conseguido n uestro icono, sólo nos queda subirlo al directorio raíz de nuestro sitio web; es decir, si tu página principal es:

http://www.pepe.com/index.html

La ruta del icono debe ser:

http://www.pepe.com/favicon.ico

A veces esto no funciona, sobre todo cuando no tenemos dominio propio, sino que nuestras páginas están en un hosting gratuito. En estos casos, podemos situar el icono en la carpeta que deseemos, y luego hacer referencia en las páginas a dicho icono mediante la etiqueta LINK:

<link rel="shortcut icon" href="http://www.pepe.com/images/favicon.ico">

Esto suponiendo que lo hayamos metido en una carpeta llamada images.

Ahora tendremos que añadir la etiqueta anterior en todas y cada una de las páginas de nuestro site (en el caso anterior, con dominio propio, no es necesario, ya que Internet Explorer busca la existencia de favicon.ico en el directorio raíz por sí sólo).

Subimos las páginas y la imagen al servidor web, abrimos una de ellas y la añadimos a nuestros favoritos. Veremos que al acceder de nuevo a Favoritos, nuestra página aparece precedida por el icono creado.

Inicialmente, no aparecerá el icono en la barra de direcciones. Cerramos el navegador, lo abrimos de nuevo y volvemos a cargar la página: aparecerá perfectamente.