¿Qué es el favicon.ico?
INDICE
- Introducción
- Crear el favicon
- Añadirlo al código de la página
- Fuentes de referencia e información
Introducción
Mirando los log de cualquier página web nos podemos encontrar fácilmente con esto, sobre todo si se es novato y/o no se tiene mucha experiencia con las páginas web:
[Fecha] [error] [client xx.xx.xx.xx.] File does not exist: /ruta/de/archivos/del/servidor/dominio/favicon.ico
Buscando información por google, encontramos que el archivo favicon.ico corresponde con el iconito que aparece al lado de las urls en los navegadores web. El favicon es esa imagen que vemos en nuestros navegadores web... pero como se crea? como se integra con nuestras páginas web, con nuestros subdominios,etc..... Es de decir que en algunas versiones de navegadores está opción no está disponible, o está implementada de forma distinta como para IE (Win...qué??), pero como ese caso nosotros ni nos lo planteamos, ni profundizamos...
Lo primero que tenemos que hacer es conseguir la imagen que queramos poner como "icono favorito" y la modificaremos de tal manera que cumpla con las siguientes premisas:
- Debe de ser de un tamaño de 16x16 px (px -> pixeles). Aunque algunos navegadores aceptan tamaños de 32x32 px.
- Ha de estar guardada con 4 bits (16 colores)
- Debe de estar en formato ".ico".
Hay usuarios que utilizan archivos .gif y otros, para poder colocar imágenes animadas y otras. Yo he estado provando por encima a colocar un .png a 32x32 px, especificándolo con la etiqueta "Link" pero no me ha funcinado.... Seguiré probando.
Crear el favicon
Existen distintas herramientas libres y propietarias con las que podemos crear nuestro favicon; como por ejemplo Gimp, el editor de imágenes por excelencia de la GNU, el cual te permite modificarlo a tu antojo y guardarlo en el formato correcto. Es muy simple (si no quieres pedir imposibles), una vez tengamos la imagen que queremos utilizar:
1- La abrimos en Gimp
2- Si queremos hacer algún cambio en la imagen, recortarla, seleccionar por colores, añadir cosas, etc....
3- Necesitamos "escalar" la imagen para que tenga el tamaño correcto, de seguro que funciona - 16x16 px. para probar a ver - 32x32 px.
4- Guardamos la imagen con el nombre "favicon.ico" y el programa automáticamente nos preguntará la cantidad de colores que queremos utilizar. Debemos seleccionar la opción "4 bpp, alfa de 1 bit, paleta de 16 elementos". es decir, 4 bits^2 = 16 colores.
Una vez creado el icono, debemos integrarlo en la página web.
Añadirlo al código de la página
Los actuales navegadores buscan el archivo favicon.ico en el directorio raiz sino se especifica lo contrario con la etiqueta "Link". De todas maneras aunque no cambiemos del directorio raíz dicho archivo, añadimos en el código html de la página, en las etiquetas <head> y </head>, la siguiente línea de código:
<link rel="shortcut icon" href="http://url-del-sitio/favicon.ico" type="image/x-icon" /> ó
<link rel="icon" href="http://url-del-sitio/favicon.ico" type="image/x-icon" />Si por el contrario, estamos utilizando nuestra máquina para publicar la página (o para hacer pruebas en ella) utilizamos la dirección 127.0.0.1 o "localhost". Yo lo he intentado con el hostname de mi máquina pero no ha funcionado :( ... Seguiré probando. Por lo que quedaría:
<link rel="..." href="http://127.0.0.1/favicon.ico" type="image/x-icon" /> ó
<link rel="..." href="http://localhost/favicon.ico" type="image/x-icon" />Es posible guardar el archivo favicon con un tamaño distinto (32x32 px), con hasta 256 colores, con una extensión distinta y en un directorio que no sea la raiz... Pero es posible que no todos navegadores lo soporten, por lo que algunos usuarios no lo verán.
Fuentes de referencia:
- http://www.favicon.net
- http://es.wikipedia.org/wiki/Favicon
- http://herramientas.recuweb.com/favicon/
Otros usuarios:
- http://www.cristalab.com/blog/18400/que-es-un-favicon-y-como-lo-uso.html
- http://macuoren.es/2007/12/como-crear-un-favicon-animado-simple.html
Un saludo.
Relacionado con ¿Qué es el favicon.ico?
