Creando y añadiendo un “favicon” a nuestra web

A día de hoy todavía se ven webs sin favicon por ahí (el icono que podéis ver en el navegador cuándo la visitáis o que queda como enlace corto cuando añadís la página a favoritos). No es que sea fundamental, desde luego, pero hace bonito y no cuesta mucho hacer uno.

Haciendo un poco de “captain Obvious” lo primero que necesitarás es una imagen. Fíjate por ejemplo en esta de wordpress, en la de gmail, en la de facebook o en la de Twiteer ¿qué ves? Un diseño sencillo y sólido. No te mates con una imagen con muchos detalles porque el tamaño en que se mostrará es muy pequeño, intenta más bien un diseño sencillo, preferiblemente en dos colores y con una letra o símbolo muy reconocibles como elemento principal. Este icono ha de ser tu “meme” en internet.

Puedes crear la imagen haciendo uso del programa de edición de imagen GIMP, totalmente libre y bajo licencia GPL, o de Inkscape. El caso es que cuando tengas diseñada tu imagen (si tienes un logo, una buena idea es poner simplemente la primera letra de este sobre tu color corporativo, y ya tienes un icono seguramente muy válido), debes guardarla en un tamaño y formato válido para su uso como icono. El tamaño ideal es alrededor de 16 x 16 px. Las opciones de formato más válidas son usar un archivo .ico, un .png o un .gif.

El .ico, si está muy comprimido, me ha dado algún problemilla con Opera y Chrome/Safari, el .gif es ideal si queréis usar un icono animado, y yo suelo utilizar .png, que además suelo comprimir lo máximo posible (tampoco es que requieran una gran definición ya que se ven miniaturizados).

Finalmente llega el momento de incluirlo en vuestra página. Basta con añadir una línea dentro del bloque head  de vuestro HTML con esta estructura:

<link rel="shortcut icon" href="directorio/vuestraimagen.laextensiónquesea" />

Importante, el parámetro rel antes que href siempre. Aunque para insertar un css o una librería de javascript en principio sea indiferente, en este caso a mi me ha fallado alguna vez poniendo primera la dirección del recurso.

En fin, con esto ya tenéis mis consejillos de cómo elaborar e insertar vuestro icono. Enjoy it!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s