Favicon con alpha
El favicon, como sabéis, es ese pequeño icono que aparece en los navegadores junto a la dirección de una página web, y puede ser un pequeño quebradero de cabeza si lo quieres con transparencia, sombras u otras sofisticaciones. Y por supuesto que se vea bien en todos los navegadores, en todas las plataformas…
Es fácil generar una imagen de dimensiones 16 píxeles x 16 píxeles y 16 colores (4 bits), pero con el formato llega el problemilla. Debe ser .ico (no .bmp, no .gif, no .jpg, no .png) para su correcta visualización en todos los navegadores y plataformas. Te lo cuenta mejor la wikipedia.
Existen un montón de aplicaciones online que transforman tu archivo en .ico en un plis y funcionan de maravilla, a no ser que tu archivo requiera transparencia y no sea un diseño ajustado al pixel. De todas formas paso unos links ya que a mí me han facilitado el trabajo en la mayoría de los casos:
Mi problema era visualizar correctamente el favicon de Xmisswebs con el navegador Firefox en el Mac, y buscando llegué a este tutorial magnífico donde encontrarás un link para descargarte un plugin del Photoshop que te permite guardar tus iconos en formato .ico, ¡totalmente gratuito! ;p
Resumiendo:
- Guárdalo, “guardar como”, en formato .ico.
- Sube tu archivo al servidor a la raíz de tu página web.
- Introduce este código en el <head> de tu index.html <link rel=“icon” href=“favicon.ico” type=“image/x-icon”>
8 Noviembre 2009.
