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:
– 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: 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:
- Lista de herramientas online
- Lista de programas que trabajan con formato .ico
- Microangelo, quizás el mejor programa específico
- Plugin gratuito para Photoshop
- Otros recursos en la Wikipedia
5 comentarios
Para favicones con transparencia online recomiendo el generador de dynamic drive: http://tools.dynamicdrive.com/favicon/
Un saludo
Pues muchas gracias. me guardo el post y los enlaces ya que estamos trabajando para darle “imagen coorportiva” (como se llaman estas cosas xd) a “EME”.
Cuando tengamos el logo listo esto me servira par aponer el favicon 😉
Gracias 🙂
Favicon.cc también es una opción interesante, que no sólo te permite crear uno a partir de una imagen sino también pixel a pixel. Además, tiene un buscador y un “últimos favicons” (¿o “faviconos”?) para ver los más recientes. Y, por supuesto, puedes elegir cualquier favicon creado por otro usuario (algunos están realmente currados) ya que todos tienen licencia Creative Commons.
Un saludo.
Nosotros tenemos un servicio gratis para crear favicon desde una imagen en http://genfavicon.com