Muchos lectores me escriben para preguntarme cómo se hace un favicon (el iconito que aparece en los navegadores junto a la dirección web de tu página). Es algo bastante básico para geeks empedernidos y hay mucha literatura al respecto, pero son legión también quienes hacen sus pinitos como webmaster e ignoran algunos de estos importantes detalles.
Bien, dado que ya he comentado que es un clásico de la Web y que hay recursos para dar y tomar, no repetiré en este post lo que perfectamente puedes encontrar en Google, aunque sí ofreceré un listado de recursos al final.

Mi intención es recomendar dos herramientas que, a mi modo de ver, son de los más eficaces y sencillas en su categoría. Ah, y ambas gratis también. Una online, con todas las ventajas y comodidad que eso conlleva; y la otra, todo un clásico ya de los sistemas de edición de imágenes:

Crear favicon online

– FavIcon from Pics: es un servicio web que te genera automáticamente un favicon a partir de una imagen alojada en tu ordenador. Es tan sencillo como subir la imagen, darle a un botón, comprobar cómo luce el favicon y descargártelo. Ofrece, además, las opciones de scroll de texto y animación. La carpeta de descarga (en .zip) incluye modelos a 32×32, 16×16 y la imagen original. Limitación: no he logrado que me genere favicons con transparencias.

Gimp

– Gimp: de sobra conocido, sobre todo por los editores de imágenes como alternativa gratuita y de código libre a Photoshop, te da la posibilidad de crear cualquier imagen y salvarla en formato .ico (que es el que debe tener todo favicon). Para ello, una vez tengas la imagen (recuerda, siempre en 16x16px o 32x32px) tan solo tienes que darle a ‘guardar como’ y darle el nombre ‘favicon.ico’.

Para integrar el favicon en tu web o blog, sólo debes subir el archivo ‘favicon.ico’ (preferentemente el de 16×16) a la carpeta que prefieras de tu instalación (se recomienda en la raíz, donde está el index) e incluir entre las etiquetas <head><!--formatted--> y </head><!--formatted--> (header o cabecera de la página) el código:

<link rel="shortcut icon" href="/favicon.ico" /><!--formatted-->

si está en la raíz, o

<link rel="shortcut icon" href="ruta/hacia/la/carpeta/favicon.ico" /><!--formatted-->

si está en cualquier otra ubicación.

Ésas son mis recomendaciones. Si quieres más, ahí te va este listado de recursos: