El favicon (FAVourite ICON) es el iconito que aparece a la izquierda del URL en la barra de direcciones del navegador. También es el icono que el navegador registra cuando guardas una página en favoritos.
El que aparece por defecto suele ser una especie de hojita en blanco o, en el caso de utilizar algún gestor de contenidos web, sería el logotipo de Joomla por ejemplo.
El personalizar el favicon dará un toque más elegante y profesional a tu web. Veamos los pasos a seguir para crear uno y subirlo a nuestro servidor web. Todo es realmente sencillo:
-
- Creamos una imagen representativa de nuestro sitio web . Yo utilicé The Gimp. El favicon tendrá un tamaño de 16*16 píxeles, por lo que debereis crearlo sobre un lienzo cuadrado. Es recomendable trabajar con un lienzo de 200*200 px por comodidad y luego escalarlo a 16*16. Reescalar no es realmente necesario como ya vereis más adelante 😉
Usad de color de fondo una transparencia en vez de blanco o gris, siempre quedará más profesional e incluso podeis probar a redondear bordes (véase el favicon de google).
- Creamos una imagen representativa de nuestro sitio web . Yo utilicé The Gimp. El favicon tendrá un tamaño de 16*16 píxeles, por lo que debereis crearlo sobre un lienzo cuadrado. Es recomendable trabajar con un lienzo de 200*200 px por comodidad y luego escalarlo a 16*16. Reescalar no es realmente necesario como ya vereis más adelante 😉
-
- Guardamos el fichero en un formato de imagen común, como un JPEG o un PNG.
-
- Vamos a http://herramientas.recuweb.com/favicon/ y en subir imagen le indicamos la ruta de nuestro fichero de imagen que contiene el favicon del punto 1.
Texto en movimiento (opcional): lo dejamos en blanco, ya que no todos los navegadores son capaces de mostrar el favicon animado.
Pulsamos en Crear FavIcon y automáticamente la herramienta nos rescalará la imagen y nos la convertirá a los formatos adecuados 😀
- Vamos a http://herramientas.recuweb.com/favicon/ y en subir imagen le indicamos la ruta de nuestro fichero de imagen que contiene el favicon del punto 1.
-
- El navegador cargará una nueva página con una vista preliminar de nuestro favicon y hacemos click en DESCARGAR. Guardamos el comprimido en formato zip que contiene nuestro favicon en nuestro equipo.
- Ahora para terminar hay que subirlo a nuestra página y referenciarlo en nuestro código HTML. Para ello abrimos el .zip obtenido en el paso anterior y subimos al directorio raiz (otro cualquiera sirve) de nuestro servidor el fichero favicon.ico mediante FTP.
¿Porqué subir el .ico y no el .jpg o el .png? Pues muy fácil: sólo se visualizaría nuestro iconito bien en todos los navegadores menos en Internet Explorer. Como somos listos, intentaremos que nuestro favicon pueda ser visualizado por el mayor número de usuarios.
Editamos nuestras páginas web (ojo si tenemos frames, con meter el código en el principal basta) y en el HEAD añadimos < link rel=»shortcut icon» href=»ruta_del_favicon» /> y todo listo. Si usais HTML en vez de XHTML utlizais los símbolos de inicio y fin de etiquetado <> en vez de < />.
Espero que esto os sirva de ayuda para aumentar vuestros conocimientos de diseño web y conseguir páginas más atractivas para los visitantes.
Navegadores compatibles con favicon (Hoy en día la gran mayoría):
-
- Internet Explorer 5+
-
- Mozilla Firefox 1+
-
- Netscape 7+
-
- Opera 7+
-
- Safari
- Konqueror 3+ y muchos más…
Obviamente navegadores en modo texto como Lynx no permiten mostrar ningún tipo de imagen o gráfico, por lo que tampoco mostrarán nuestro favicon.
