Estarás harto de ver a menudo pequeñas imágenes en las pestañas de tu navegador. A esos minúsculos iconos se les conoce como favicon (contracción de favourites icon) y sirven para identificar rápidamente a qué web pertenece esa página que tenemos abierta. Si tienes una página web o blog, tú también tienes que tener un favicon o de lo contrario se mostrará el que tengas por defecto (por ejemplo, el icono de wordpress, joomla o drupal).
Hoy vamos a hablar de:
Para qué sirve un favicon
El favicon sirve de primeras para identificar visualmente la web de origen en la pestaña en el navegador. Pero como su propio nombre indica, es un icono de favoritos, que se muestra cuando añades una página marcadores. No tener nada ofrecerá una imagen de página poco profesional.
Historia del favicon resumida
Parece mentira que una cosa tan pequeña genere tanta controversia, pero así es. En principio el favicon sólo admitía el formato .ico. Llegó un punto que los navegadores modernos comenzaron a admitir .png (como siempre, Internet Explorer fue la excepción) y más tarde han comenzado a usarse otros tamaños adicionales al 16×16 pixels original. Hoy sigue habiendo confusión entre qué combinaciones de navegador/sistema operativo aceptan qué tipo de icono. Y la cosa no deja de evolucionar, pero no tiene sentido meterse demasiado en temas de compatibilidad total cuando ésta no existe o es tan inconsistente.
Consideraciones de diseño
El favicon se trata de reducir una imagen representativa de tu web a un tamaño minúsculo, por lo que hay que hacer un ejercicio de minimalismo. Un logotipo con mucho detalle quedará como un borrón al reducirlo a 16×16 píxeles. Cualquier texto, por corto que sea, sería ilegible. Y lo más seguro es que tengas que prescindir de sombras u otros efectos que pueda tener tu logotipo y dejarlo en una forma simple, una letra o algo similar.
El icono puede ser creado con fondo transparente (con lo cual se verá «flotando» en el típico gris de la barra de navegador) o podemos situarlo sobre un cuadro de fondo de un color. Podemos también jugar con términos medios, como un círculo o un cuadrado con esquinas redondeadas, dejando el resto de la superficie del cuadrado con transparencia.
Crear el favicon
Puedes crear tu favicon con cualquier programa de imagen que utilices, como The Gimp o Photoshop. Para ello, es muy recomendable que controles fundamentos de la imagen digital como el tamaño y la resolución.
Si no te manejas con estas herramientas, hay webs que te permiten hacerlo automáticamente a partir de una imagen que subas (tu logotipo en grande, por ejemplo). De todos modos, lo recomendable es que crees la imagen cuadrada por tu cuenta en formato «.png» y emplees servicios gratuitos online para generar el .ico a los tamaños deseados.
Por ejemplo, con una imagen ya cuadrada para evitar distorsiones (pongamos 200x200px) nos vamos a IcoConverter o a DynamicDrive y seguimos los pasos.
1.- Examinamos y subimos nuestra imagen.
2.- Seleccionamos si queremos, aparte del tamaño clásico de 16, incluir otros. Recomendable incluir los tamaños de 32 y 48.
3.- Obtendremos un fichero «favicon.ico» con diferentes tamaños encapsulados.
4.- Vamos a nuestro FTP y colocamos nuestro favicon.ico en la carpeta raíz.
5.- En el <HEAD> de nuestra web (si es wordpress, en el fichero header.php del tema, a no ser que uses algún plugin como el All In One Favicon) introducimos el código:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Rizando el .ico
El clásico uso de los favicons se ha topado con la multiplataforma. El auge de los móviles y las tablets nos ha llevado a un panorama que aún no sabemos como se asentará pero la variedad de tamaños hipotéticamente requeridos es enorme. Si hasta ahora no sabías bien lo que era un favicon, no te comas la cabeza. Si por el contrario buscas cubrir exhaustivamente todas las necesidades, puede que te interesen herramientas como FaviconIt , que genera la friolera de 15 archivos diferentes y el código para utilizarlos, aunque no creo que algo así pueda ser una solución estándar de futuro.
Disfruta de tu favicon
Lo último sólo es comprobar que tu favicon se ve bien y funciona en los diferentes navegadores. Ten paciencia y no te agobies, que no es automático. Habrás de refrescar la página, quizá vaciar la caché y/o esperar un tiempo para ver el resultado. Pero pronto tu web lucirá más profesional y tus lectores podrán reconocerte por tu favicon corporativo.
Esto le puede ayudar con la mayoría de navegadores y dispositivos: http://faviconit.com
Hola Eduardo.
De hecho, tu herramienta ya estaba metida en el artículo. Un saludo 🙂
Gracias!
También es muy útil la herramienta Favicon.pro, te permite crear un favicon (icono) del tamaño que escojas con solo dos clicks. Saludos!