Favicon

Un favicon o icono de favoritos, del inglés "favorite icon", es una pequeña imagen asociada con una página o sitio web en particular, cuyo nombre deriva del hecho de que los navegadores web lo suelen mostrar en las listas de marcadores o favoritos, en los historiales de páginas visitadas y de navegación reciente, así como en la barra de direcciones y en el encabezado de la pestaña correspondiente.

Favicon

Qué es un favicon

El término favicon proviene de la terminología en inglés "favorite icon", que significa icono de favoritos. Se denomina así porque es el icono que se visualiza en las listas de marcadores o favoritos del navegador. También aparece en otros lugares, como en la barra de direcciones y en el encabezado de las pestañas del navegador.

El favicon es una pequeña imagen que simboliza el sitio en que estamos, por lo que forma parte de la identidad del sitio. Además, esta imagen ayuda a la navegación del usuario, ya que permite reconocer la página de cada pestaña, cuando tenemos muchas abiertas en el navegador.

A su vez el favicon es utilizado por los favoritos del explorador para mostrar las páginas que has agregado. Cuando la página de origen no cuenta con un favicon, simplemente se muestra la dirección, lo que provoca que el usuario tenga que leer para identificar el sitio.

Por ello, aunque hay sitios que no utilizan favicon, son los menos, ya que el favicon resulta muy útil para potenciar la imagen de un sitio y facilitar la navegción.

Para establecer el favicon de un sitio web, se debe insertar en el head de la página una etiqueta link que apunte al archivo del favicon, por ejemplo:
<link rel="shortcut icon" href="http://example.com/favicon.ico" />

Por lo general, el favicon es una imagen de 16×16 pixels en formato ICO, un formato de archivo binario para iconos de Windows, aunque muchos navegadores soportan además para el favicon otros formatos de imagen diferentes a ICO, como PNG, GIF o JPG. También puede tener distintas ubicaciones o tamaños.

Aunque es habitual que el favicon sea un fichero de nombre favicon.ico ubicado en el directorio raíz del sitio web, esto no es obligatorio y puede tener cualquier nombre y estar localizado en cualquier ubicación.

Por ejemplo, el favicon de Wikipedia es http://en.wikipedia.org/favicon.ico:

Favicon de Wikipedia

Como vemos, los usuarios identifican las páginas por su favicon en forma inconsciente, por lo que abren las pestañas de favoritos en décimas de segundo y sin leer el nombre del sitio, sino a través de la identificación del icono.

Por lo tanto, si estás realizando un sitio web éste debe contar con un favicon para que sea más fácil de identificar por los usuarios en la red y así lograr una mayor memoria visual por su parte.

Cómo crear un favicon

Para crear y editar un favicon puede usarse un editor de imágenes estándar que permita dibujar pixel por pixel, o se puede usar un editor de iconos, que además de editor de imágenes incluye opciones avanzadas para iconos, como filtros, función para crear un icono a partir de una imagen o de la captura de una parte de la pantalla, así como extracción de iconos de los archivos binarios ejecutables EXE o bibliotecas DLL de Windows.

Existen programas para crear y editar iconos para todas las plataformas, así como también recursos online que permiten la elaboración rápida del favicon sin necesidad de tener grandes conocimientos de diseño.

Para crear un favicon con The GIMP (GNU Image Manipulation Program), el editor de bitmaps del GNU, partiremos de una imagen de 16×16 pixels y la guardaremos con la siguiente configuración:

  • 16×16 pixels.
  • 16 colores (4 bits).
  • Formato .ico.

Eso sí, dado que el favicon es una pequeña imagen cuadrada de sólo 16×16 pixels, es necesario que sea una imagen sencilla que permita una rápida previsualización, por lo que la imagen seleccionada no deberá contener texto ni muchos detalles.

Artículos en la categoría "Diseño web"

  1. Contenido web
  2. Ghostwriter (escritor fantasma)
  3. Sobrecarga de información (infoxicación)
  4. Copyleft
  5. Cross-browser
  6. CSS
  7. Desarrollo web con Firefox
  8. Diseño web adaptativo (Responsive Web Design)
  9. Editor de páginas web
  10. Enlace roto
  11. Estándares web
  12. Favicon
  13. GIF animados con The Gimp
  14. Hacer una página web
  15. Hiperenlace (hyperlink)
  16. Hipertexto
  17. HTML (HyperText Markup Language)
  18. Linkware
  19. Modelo de color HTML
  20. Navegador móvil
  21. Navegador web
  22. Nube de tags
  23. Páginas web estándar
  24. FAQ (Frequently Asked Questions)
  25. Páginas web gratuitas
  26. Páginas web para móviles
  27. Psicología del color
  28. Web 2.0
  29. Web 3.0
  30. Sitio web (website)
  31. Blog
  32. Blogosfera
  33. Comunidad virtual
  34. Internet superficial, Internet profunda e Internet oscura
  35. Podcast (podcasting)
  36. Web semántica
  37. Mashup
  38. Fotoblog
  39. Wiki
  40. Microblogging
  41. Página web
  42. Portal
  43. Redes sociales
  44. Videoblog
  45. WordPress
  46. WWW (World Wide Web)

Los comentarios están cerrados