Cómo modificar el favicon.ico de nuestra página web
Ante la gran acogida que tuvo nuestros anterior post sobre el buscador de iconos, en esta ocasión hemos decidido continuar con la misma temática y ampliar más información sobre iconos, la cual se hace imprescindible conocer para toda persona que se dedique al diseño y programación de páginas webs. Así, en este post explicaremos paso a paso qué es el favicon.ico y como cambiarlo fácilmente en nuestra web, así como las principales herramientas que tendremos que utilizar para ellos.
Como muchos ya sabreis, el favicon es el icono que aparece en los navegadores junto a la dirección de la página web. Personalizar este icono en nuestro sitio web es una tarea muy sencilla y que puede ayudarnos a mejorar considerablemente la imagen e impresión que nuestra web produce a quienes la visitan.
Para cambiar el favcion de nuestro site tan sólo debemos seguir las pautas que se describen a continuación:
- Crear el Icono: Con cualquier editor de iconos (como por ejemplo IcoFX o ToYcon) creamos un icono cuyas dimensiones sean 16x16 píxeles. Si ya disponemos de un icono que nos guste en otro formato de imagen podemos utilizar la herramienta gratuita y online de http://www.convertico.com, una web desde la que podremos fácilmente convertir nuestros archivos en formato PNG al formato ICO, y los de formato ICO a PNG, facilitando así el proceso de creación de nuestro archivo favicon. Es importante destacar que aunque la web está completamente en Inglés, su uso es sumamente sencillo, pues sólo se necesitan tres fáciles pasos para efectuar la conversión inmediata del archivo.
- Modificar la Web: Una vez tengamos el archivo *.ico que deseamos listo, nuestro próximo paso será modificar el código de nuestra página web para que los navegadores muestren el icono en la barra de direcciones. Es muy sencillo, sólo hay que poner un elemento LINK en la cabecera de la página a modificar, esto es, entre las etiquetas <head> y </head> por ejemplo:
<link rel="shortcut icon" href="http://www.loquesea.com/imagen/favicon.ico">
Es importante destacar que realmente no hace falta que el icono se llame favicon.ico, ya que con el elemento LINK podemos especificar cualquier nombre. Por otro lado, conviene señalar también que si omitimos el elemento LINK en el código de nuestra web, el navegador buscará el fichero favicon.ico en el directorio raíz del dominio.
- Verificar los Cambios: Por último, sólo resta subir nuestra web y archivos al servidor y verificar cómo queda el resultado final.
Confiamos en que estas explicaciones os sean de utilidad y os permitan mejorar el diseño y la calidad de vuestras páginas web.
Publicado el: 25/01/2010
