LinksDominicana

Quizás hayas observado la presencia de un icono a la izquierda de la URL en la barra de direcciones del navegador. Algunas páginas web tienen asociadas estos iconos a ellas.

Asociar este icono a tu página web es muy fácil.

Crear un favicon

Existen varios métodos:

• Un programa de diseño (Gimp, pixia, inkscape...) (verProgramas de grafismo)
• Programas especializado (aconsejoIconEdit32o tambiénIconWare)
• Sitios web que transforma una imagen en favicon:
• http://www.chami.com/html-kit/services/favicon/
• http://www.favicon.co.uk/
• http://www.genfavicon.com/es/
• http://tools.dynamicdrive.com/favicon/
• http://favikon.com/

Si se respetan los estándares

Para comenzar debemos crear una imagen en formato png o gif (formatos estándares).
(podemos también utilizar formatos menos comunes, ver el enlace al final de la página).

Puedes elegir varias dimensiones: 16x16 o 32x32 pixeles.

Si no se respetan los estándares
Como de costumbre, Internet Explorer no respeta los estándares y no utiliza las imágenes con los formatos correctos.

Para este navegador, hay que utilizar una imagen en formato ico (o bmp) (no estándar, de preferencia evitarlo), y dimensiones de 16x16 pixeles.

Poner favicon en línea

Luego tienes que poner el favicon en tu página web e indicar su ruta con la etiqueta link entre las etiquetas de cabecera head.

Veamos un ejemplo con una imagen en formato png:

lt;link rel"icon" type"image/png" href"/images/mifavicon.png" /gt;

Dependiendo del formato, el atributo “type” cambiará:

• Formato png: image/png
• Formato gif: image/gif
• Formato jpeg (extension jpg o jpeg): image/jpeg

Si tienes un favicon que no respeta los estándares, el atributo “rel” también cambia:

lt;link rel"shortcut icon" type"image/x-icon" href"/images/icon1.ico" /gt;

También se puede poner un archivo favicon.ico en la raíz de la página para que algunos navegadores lo utilicen automáticamente, pero esto no es estándar.

Notas

• Creo que no es muy útil hacer un favicon para IE, dado que éste sólo lo utiliza para los favoritos.
• Si utilizas un icono en un formato estándar y otro en formato ico, no te aconsejo que pongas este último en la raíz: los navegadores lo mostrarán si no encuentran la imagen en formato png.
• También podemos utilizar un icono animado (ver enlace).

Enlaces relacionados

• http://ilmaistro.com/como-crear-un-favicon/
• http://www.tufuncion.com/favicon_iconos_ico

Fuente de origen:
http://es.ccm.net/faq/494-favicon-colocar-un-icono-en-la-barra-de-direccciones