Favicon: Tu Ícono Personal En La Barra De Dirección

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:

favicon

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.

2 responses to this post.

  1. Como lo podria provar en modo loca?
    Lo que quiero hacer es ponerle el icono sin tener que usar una direccion web para ello.

    Responder

    • ¡Saludos Vimultor! Lamentamos la demora en contestar. En realidad es bastante sencillo, si usas un servidor local usa la ruta de ese servidor para apuntar a la imagen, del tipo:
      link rel=”shortcut icon” href=”http://localhost/misitio/imagenes/icono.jpg”
      Si no usas un servidor (y me parece que este es tu caso) o incluso si lo usas, podrías usar una dirección relativa, por ejemplo, en tu sitio tienes las páginas y allí una carpeta “imagenes”, apuntas a tu imagen:
      link rel=”shortcut icon” href=”imagenes/icono.jpg”
      Espero te sea útil, si no, no dudes en escribirnos ¡Buen día!
      PD: Omití los paréntesis angulares a las instrucciones (en negrita) porque causan problemas en el navegador.

      Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: