Cómo crear e insertar un favicon en tu página web

10 Septiembre 2009

Cómo crear e insertar un favicon en tu página web

Un favicon es un pequeño icono que aparece en la mayoría de los navegadores junto a la dirección de una página web. Alguno se preguntará, ¿qué importancia puede tener este pequeño icono de apenas 16×16 píxeles en mi web? La respuesta dependerá de la importancia que le des a tu imagen de marca. Un favicon no solo potencia este aspecto, sino que también ayuda a tus lectores a reconocer tu web dentro de su apartado de favoritos y es de saber general que todo lo que se pueda hacer para mejorar la experiencia lectora de los visitantes de una página web es una inversión que vale la pena y que con el tiempo terminará dando sus frutos. Hoy aprenderemos a crear un favicon y a insertarlo en una página web o blog en tres simples pasos.

Primer paso: Creación del favicon

Si disponemos de una imagen cuadrada de cualquier tamaño o cuenta de Twitter no tendremos más que visitar la página “Favicons from Pics” y cargar el icono o facilitar nuestro usuario de Twitter pinchando a continuación “Generate favicon.ico”. Posteriormente descargaremos el archivo generado pulsando “Download Favicon Package”.

Para los “manitas” que utilicen Photoshop, hay un fantástico tutorial en ingles realizado por Jeniffer Apple que explica todo el proceso de creación de favicons desde el archifamoso programa de edición fotográfica de Adobe.

Segundo paso: Carga del favicon en el directorio de la web

Dependiendo del proveedor de hosting que utilices hay diferentes formas de cargar el favicon en el directorio de la web. Lo más común es subirlo mediante alguna aplicación FTP. Por tanto, si has utilizado el sistema de “Favicons from Pics” tendrás que descomprimir la carpeta descargada y subir el archivo “favicon.ico” a tu directorio.

Tercer paso: Inserción del favicon

Agrega la siguiente línea de código en la cabecera de tu página web entre las líneas que parten del <head> hasta las que llegan a </head>:

<link rel="shortcut icon" href="http://www.tupáginaweb.es/favicon.ico">

Aunque resulte obvio, para los despistados he de aclarar que hay que sustituir el “tupáginaweb.es” por el dominio que tengas contratado. En mi caso sería “Xavs.es”.

Espero que este breve tutorial os haya servido de ayuda. Si tenéis alguna duda, no tienes más que preguntármela mediante un comentario en esta entrada y si pensáis que puede servirle de ayuda a algun contacto vuestro, no dudéis en enviársela de la manera que os sea más cómoda.