Favicon, añadiendo un icono a tus URL

Dentro del “tuneo” de nuestras webs, uno de los detallitos “pro” que podemos utilizar el es favicon en nuestras URL. El favicon es un pequeño icono que aparece en el navegador a la izquierda de nuestra URL en la barra de direcciones. También lo utilizan los navegadores en las pestañas, al lado del título de la web, y en los menús de favoritos/marcadores y del historial.

Antiguamente, en los tiempos de Internet Explorer 5, esta función sólo era visible si el usuario había agregado la página a favoritos, por eso lo del nombre (favicon = favorites icon), pero hoy en día los navegadores actuales lo muestran sin necesidad de que el usuario te agregue a su lista de marcadores.

Originalmente el favicion era un icono (formato .ico) de 16×16 píxeles, pero hoy en día la mayoría de los navegadores pueden mostrar también imágenes en formato JPG, GIF o PNG, incluso imágenes animadas. Además del formato 16×16, algunos navegadores pueden mostrar iconos de 32×32, posibilitando un poco más de espacio en nuestra área de creatividad.

Para agregar este icono a tu web, simplemente sube el archivo .ico al raiz de tu servidor, y añade la siguiente instrucción en el HEAD de las páginas en las que quieres que se muestre:

<link type=”image/x-icon” rel=”shortcut icon” href=”favicon.ico” >

Donde favicon.ico es el nombre del archivo. Puedes usar en su lugar logo.png o cualquier otra cosa. Sólo tiene que coincidir el nombre y formato del archivo con el href de la instrucción. Y si en lugar de en el directorio raíz lo metes en otra carpeta, asegúrate de indicarlo correctamente en el href del código.

Si utilizas el clásico formato ico, tienes un montón de webs donde te hacen la conversión online desde los formatos gráficos, como Favicon Generator, Favicon.cc, DeGraeve, Dynamic Drive o Genfavicon, por ejemplo. Si lo prefieres, también hay software offline que puedes utilizar a tal efecto, como Microangelo.

Anuncios

5 pensamientos en “Favicon, añadiendo un icono a tus URL

  1. La foto que sirve de ejemplo en el artículo es de una de mis webs. Ahi puedes verlo. En esta no puedo hacerlo, ya que está alojada directamente en WordPress, y no tengo acceso FTP. De hecho ya WordPress pone su favicon.

    Pero ya te daré instrucciones para que lo hagas en El Bibliófilo Enmascarado.

  2. Pingback: ¿Como publico mi web?: Pasos a dar tras el diseño | El blog de Cesar Jodra

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