El favicon.ico es una imagen que aparece en los navegadores justo a la izquierda de la dirección de la página web.
Con Ópera o Firefox se puede ver el icono sin problemas (al menos en las últimas versiones de cada uno). En Internet Explorer se puede ver a partir de la versión 7 sin hacer nada, y antes de esa versión añadiendo primero la página a tus favoritos. El favicon.ico es también el icono que aparece a la izquierda de algunas (puede que de todas) las direcciónes de nuestros favoritos, siempre que la página web a la que apunta cada dirección tenga icono asignado.
El favicon nos da la posibilidad de personalizar un poco más nuestra página web, le da un aspecto mucho más profesional y consigue que nuestros visitantes asocien nuestra dirección con un icono, haciéndoles más fácil la tarea de localizar una página dentro de sus favoritos. A continuación vamos a ver cómo añadir un icono a nuestras páginas. Ah!, en la imagen siguiente puedes ver lo que es un favicon.ico, por si todavía no lo sabes ;).
1. Crear el icono
El icono tiene que estar en formato ico (no vale un .bmp ni un .jpg ni un .gif y cambiarle de extensión), sus dimensiones han de ser de 16×16 pixels y no puede tener más de 16 colores.
Para crear tu propio icono puedes buscar algún programa por internet (en softonic encontrarás muchos), o puedes hacer como yo: utilizar Photoshop para diseñarlo (o incluso el Paint de Windows) y el programa «clic» para guardarlo con formato ico. Si ya hemos diseñado nuestro icono, existe otra opción alternativa a «clic«; en Dynamicdrive nos porporcionan una herramienta gratuita y vía web, que nos convierte cualquier imagen en formato bmp, jpg, png o gif al formato ico de 16 colores que necesitamos.
2. Modificar el código HTML para añadir el icono a nuestras páginas
Este paso es mucho más sencillo. Abriremos los ficheros de nuestras páginas con cualquier editor de HTML (si no tenemos ninguno, el Bloc de notas de Windows también vale) y añadiremos lo siguiente dentro de las etiquetas <head> y </head>
<link rel="shortcut icon" href="mi-directorio-de-imagenes/favicon.ico" />
Donde el contenido del atributo href será la ruta hasta nuesto icono.
Y con estos sencillos pasos ya deberíamos tener a punto nuestro nuevo y flamante icono en nuestras páginas
