octubre 15, 2011

Implementando El Favicon En Tu Sitio Web

Cada cierto tiempo alguien llega a preguntarme sobre cómo hacer que su ícono favorito (usualmente el logo del negocio) se muestre a la izquierda de la barra de dirección del navegador, pues realmente resulta muy vistoso tenerlo allí cuando visitan tu sitio, como este, por ejemplo:
Pues no es complicado usar un favicon, que es como se le llama a este ícono, y hay mucha información al respecto (busca “colocar favicon” o similares), como no trato de reinventar la rueda y es muy sencillo, les cuento como lo hago:
  1. Un ícono con la imagen que deseas usar recomendado: de 16 colores (4 bits), medida de 16px por 16px, ojo que es un ícono (*.ico) no una imagen, para diseñarla tienes aplicaciones como MicroAngelo, o tienes la opción de trabajar en línea, ya sea dibujando con Favicon Generator o convirtiendo una de tus imágenes en ícono con DynamicDrive.
  2. Ahora debemos agregar una etiqueta link en el código HTML de tu página, entre las etiquetas <head> y </head>, usaremos dos atributos:
    1. rel: con el valor shortcut icon
    2. href: apuntando a la ubicación de tu favicon, la dirección podría ser absoluta o relativa, un ejemplo de dirección absoluta sería:
      http://www.misitioweb.com/imagenes/mifavicon.ico
      La dirección relativa dependerá de la ubicación de cada página, la etiqueta completa sería:
      <link rel=”shortcut icon” href=”http://www.misitioweb.com/imagenes/mifavicon.ico” />
  3. Si gustas, pruébalo en modo local, no debería haber problema y luego sube todo al servidor
A estas alturas todos lo navegadores deben soportar el uso de favicons, pero algunos no lo muestran en su barra de dirección, si no en la pestaña respectiva.
Finalmente, una herramienta en línea más completa para diseñar tu favicon, animaciones y otras opciones de personalización en el sitio de HTML Kit.
Etiqueta: , , ,

No hay comentarios.:

Publicar un comentario

Tu comentario

Suscribirse a: Comentarios de la entrada (Atom)