Hoy te explicamos como crear un favicon.
En el blog ThreeStyles, he visto un artículo que me ha gustado mucho, es un modelo por la forma que se ha planteado y por su sencillez en explicar un concepto, se titula All About the Favicon – Resources / History.
Inspirándome en dicho artículo (que está en inglés) trato de hacer uno propio añadiéndole alguna cosa más.
Pero antes que nada debemos contestar a la pregunta ¿Qué es un favicon?
Para algunos pueden pasar desapercibidos, pero son esos pequeños detalles que llaman la atención en el diseño de una página.
Los famosos favicons (abreviatura del inglés ‘favorites icon’), es una pequeña imagen que se muestran a la izquierda de la dirección URL en tu navegador web.
El objetivo principal de un favicon, es mostrar esa pequeña imagen en tu barra de marcadores cuando alguien los añade a los marcadores de su sitio, de esa manera se destaca del texto del marcador.
El favicons también se muestran en navegadores que soporten la navegación por pestañas (mayoría de los navegadores modernos), para ayudarle a una mayor distinción entre cada pestaña.
Por lo tanto, podemos resumir que es una marca gráfica distintiva que diferencia una página de otra, ya que actúan como indicadores visuales para los visitantes y les ayudan a asociar fácilmente el contenido con un marcador en el navegador, eso ayudar a los usuarios a seleccionar rápidamente un sitio web dentro de la gran multitud de páginas.
Actualmente es difícil de encontrar un sitio que no hagan uso de ellos.
La primera aplicación de favicons fue la de Internet Explorer 4, y requería que puedas cargar el archivo favicon.ico a la raíz de tu servidor web que a su vez carga la imagen en la sección de favoritos en IE4. Otros navegadores comenzaron a aplicar este favicons con la mejor técnica que se necesitaba.
Llegó a través de HTML, por lo que podemos enlazar el favicon.ico, lo que significa que podría haber favicons múltiples para un sitio Web o ser capaz de colocar el favicon donde quieras en el servidor.
El camino correcto para vincular un Favicon. A continuación se muestra cómo llevar correctamente la conexión a un favicon:
<link rel="shortcut icon" href="images/favicon.ico" />
Grandes ejemplos de favicon. En SmashingMagazine, han publicado una serie de artículos a modo de escaparate sobre los favicons, para que nos sirva de inspiración. Destacan por su belleza, y se adaptan perfectamente al diseño de los diferentes sitio en general.
Todas las imágenes de los favicons que aparecen en los artículos están vinculadas a la página que las contiene, de ese modo tenemos más información sobre su diseño con respecto al resto de la página. Una buena selección que con toda seguridad son una fuente de inspiración:
- Part 1: Inspire Yourself: 50 Remarkable Favicons
- Part 2: Inspire Yourself: More Creative Favicons
- Part 3: Creative Favicons: When Small Is Beautiful
- Part 4: Creative Favicons: Tiny Artwork
- Episode 5: The Delicate Beauties
- Favicon Episode 6: Black, Abstract and Hand-Drawing
- Favicon Episode 7
- Favicon Episode 8
Recursos para generar favicon. Una buena colección de generadores y otros recursos para este tipo de detalles gráficos, que nos sirve para ponernos al día en las novedades, que podemos encontrar en Web-based Favicon Generators and Favicon Resources., de SixRevisions.
El artículo original da una pequeña explicación de cada uno de los enlaces, yo solamente te dejo el enlace a cada uno de ellos.
Generadores de favicon:
- Dynamic Drive Favicon Generator
- GenFavicon Generator
- Favicon.cc Generator
- favicon.ico Generator
- favicon maker
- 256 Pixels
- Favicon Editor
- Favicon/Icon Generator und Online-Editor
- Genfavicon
- ConvertIcon
- FavIcon from Pics
- Favicon Generator
Otros recursos sobre favicon:
- Favicon Collector
- Faviconize
- fineicons Favicon Gallery
- Making a Good Favicon
- Inspire Yourself: 50 Remarkable Favicons.
Después de todo esto ya no hay escusa para no tener este pequeño dibujo, es tu deber cívico crear uno para tu sitio.
