Favicon
| ||||||
Favicon: Es un icono (o ícono), es decir, una pequeña imagen, que aparece en algunos navegadores junto a la dirección de una página web.
Sumario
Definición
La forma original de definir un favicono era poniendo un archivo llamado favicon.ico en el directorio raíz del servidor web, el cual era mostrado automáticamente en los favoritos de Internet Explorer. Después, sin embargo, se creó un sistema más flexible, usando HTML para indicar la localización de un icono para cada página servida, el cual es identificado añadiendo dos elementos link en la sección <head> del documento como se detalla abajo.
De esta manera, cualquier imagen de un tamaño apropiado (16×16 pixeles o más) puede ser usada, y aunque todavía muchos usan el formato ICO, otros navegadores ahora también soportan los formatos de imagen animada GIF y PNG.
Utilidad
Es cuestión de imagen, lo mismo que un logotipo.
Formato que debe tener
La imagen debería esta guardada en formato ICO. ICO es un formato propietario de Microsoft para almacenar varios ficheros BMP (bitmaps) juntos, y normalmente se utiliza para contener iconos de escritorio de Microsoft Windows. Lo más conservador es que el icono tenga unas dimensiones de 16x16 píxeles y 16 colores (usando la paleta estándar de 16 colores de Windows), pero teniendo en cuenta que los iconos se pueden arrastrar al escritorio como accesos directos, y que la mayoría de la gente navega con 256 colores o más, se puede usar perfectamente un icono de 32x32 y 256 colores.
De hecho, como el formato ICO puede contener varios iconos, se pueden meter cuatro iconos dentro de un mismo fichero favicon.ico: 16x16x16 colores, 32x32x16 colores, 16x16x256 colores y 32x32x256 colores, y Windows se encargará de escoger el más apropiado para cada contexto. (al menos en teoría).
Características
A la hora de crear un favicon, podemos echar mano de muchos programas de diseño gráfico como Gimp, Photoshop, o incluso Paint, pero a menos que quieras un trabajo muy detallado, resulta poco práctico y complicado para algunos. En esos casos, podemos utilizar varios servicios online que nos faciliten la tarea, y uno de los más sencillos es favicononline.es. Con este servicio, podemos crear nuestro favicon basándonos en una imagen ya existente de manera sencilla y rápida.
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.
Dónde Guardar la imagen
En teoría, en cualquier parte de tu espacio web. Lo recomendable es hacerlo en el directorio raíz del dominio, y si eso no es posible, junto a la página principal del sitio web.
Como debe llamarse la imagen
El nombre por defecto que buscan los navegadores es favicon.ico. En realidad, se puede llamar de cualquier modo, preferiblemente con la extensión .ico. Sin embargo, si no se usa el nombre estándar favicon.ico es necesario añadir a las páginas HTML un elemento LINK en la cabecera del documento que indique cuál es el nombre del icono y dónde esta situado.
Hay dos posibles problemas con esto: que el navegador sólo quiera iconos con el nombre favicon.ico, o que el navegador sólo quiera iconos situados en el raíz del dominio. También es posible que el navegador no encuentre el icono si no se pone el elemento LINK anterior, aunque se llame favicon.ico y esté en el raíz del dominio. Por tanto lo más seguro es llamarlo favicon.ico, colocarlo en el raíz del dominio y poner un elemento LINK que indique dónde está:
<head> ... otros elementos ... <link rel="shortcut icon" href="http://sudominio.com/favicon.ico"> ... otros elementos ... </head>
