favicon.ico es un icono, es decir, una pequeña imagen, que aparece en algunos navegadores junto a la dirección de una página web.
Pasos para poner un favicon en tu página web:
En realidad es muy sencillo, pero no te saltes ningún paso. No vale la pena perder mucho tiempo con esto de los iconos, así que no te pongas nervioso y sigue los pasos uno por uno.
Qué necesitas
Antes de nada, asegúrate de que tienes todo esto:
- Un editor de imágenes que guarde en formato .ico. No, un .ico no es una imagen cualquiera con la extensión cambiada. Tienes que guardar la imagen con formato .ico. Hay muchos programas que lo hacen.
- Un editor de páginas web, es decir, un editor de texto normal y corriente. Hay decenas de ellos que son gratuitos, pero también puedes comprar uno (si quieres y te lo puedes permitir).
- Un programa para subir el icono a tu espacio web. El icono lo subes a la web exactamente igual que el resto de tus páginas.
- Una página web (naturalmente). No te hace falta un dominio propio. El servidor donde esté tu página web tiene que estar configurado correctamente, aunque normalmente casi todos lo están.
- Nada más.
Por supuesto, un navegador que soporte faviconos (IE5 o superior, Mozilla 0.96 o superior, Netscape 6.2 o superior, o Konqueror), sería útil para probar que todo funciona correctamente.
Crear el icono
El icono debe tener las siguientes características:
- Dimensiones 16 píxeles x 16 píxeles;
- 16 colores (4 bits);
- Formato ICO, no BMP, no GIF, no JPG.
En algunos navegadores puedes usar iconos mayores, con más colores y en otros formatos, pero si quieres que tu icono funcione a la primera, hazlo de 16x16, con 16 colores y en formato ICO.
Puedes bajarte un editor de iconos y crear tu icono tranquilamente en la comodidad de tu hogar. Para una lista completa de editores de iconos freeware y shareware, visita el sitio web de softonic.com.
Otra opción es crear tu icono con cualquier programa de edición gráfica (por ejemplo el programa de dibujo Paint que viene con Windows, o cualquier otro que ya tengas), y el pequeño programa Clic, que lo guarda en formato ICO y con la paleta de 16 colores de Windows.
Modificar nuestras páginas HTML
Ahora modificaremos nuestras páginas web para que los navegadores muestren el iconito en la barra de direcciones. Es muy sencillo, sólo hay que poner un elemento LINK entre las etiquetas <HEAD> y </HEAD> de tus ficheros HTML (vamos, que se lo metas en la cabeza), por ejemplo:
<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico">
o por ejemplo:
<link rel="shortcut icon" href="http://www.undominio.com/directorio/favicon.ico">
De momento sólo tienes un favicon.ico (es suficiente, ¿no?) así que lo mejor será que lo pongas junto con el fichero principal de tu página web.
Modifica todas las páginas HTML que quieras. Para empezar te aconsejo que cambies sólo la inicial, no vaya a ser que después de todo el esfuerzo resulte que te has equivocado en alguna tontería. Ya tendrás tiempo para cambiar el resto cuando veas que funciona.
Nota: realmente no hace falta que el icono se llame favicon.ico, ya que con el elemento LINK podemos especificar cualquier nombre; por otro lado, si no ponemos el elemento LINK en el HTML, el navegador buscará el fichero favicon.ico en el directorio raíz del dominio.
Eso es todo, hasta el próximo tutorial.
¿Quieres tener tu propio blog?
