¿Cómo personalizo el Favicon de mi página web o blog?

Un favicon es un icono que aparece en la parte superior del navegador junto a la URL de la web. La utilidad práctica de este elemento es nula, sólamente tiene funciones decorativas y de branding (promoción de marca). Además, con la última tendencia de los navegadores de incorporar el uso de tabs o pestañas para navegar con una sola ventana abierta, el favicon cumple otro papel, ya que permite una rápida identificación de la página que «oculta» cada tab.

¿Cómo personalizo el Favicon de mi página web o blog?

Crear uno es muy sencillo. En primer lugar tendremos que tener una imagen que deseemos usar como favicon. Hay que tener en cuenta que la imagen deberá ser  16 x 16px, por lo que no debe contener mucha información gráfica, es decir, procura que sea algo simple que permita identificar tu web, ya sea con el logotipo, una inicial o una pequeña ilustración. Si utilizamos imagenes con muchos colores, al crear un favicon de 16×16 se perderá muchísima calidad de imagen, tanta, que lo más probable es que el favicon sea indescriptible. Por eso mismo la recomendación es crear un favicon directamente con un tamaño de 16×16 o incluso 32×32. En mi caso, uso el Photoshop, aunque puedes utilizar cualquier otra herramienta de edición de imagenes (GIMP, Corel Paint Sho Pro, etc).

Cuando hayamos creado nuestro pequeño icono, bastará con subirlo a Favicon from Pics y en unos pocos segundos podremos descargar un ZIP con nuestro favicon preparado para subirlo a la web. Lo ideal sería subirlo al root de la web (directorio raiz). Lo último que necesitaremos será incluir entre los metas <head></head> de cada página los siguientes códigos. Ten en cuenta que si usas un CMS, Blog o web dinámica cuya cabecera sea un único fichero, bastará con que lo incluyas ahí.

<link type="image/x-icon" href="favicon.ico" rel="icon" />
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />

Más info | Favicon from Pics

4 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

What is 6 + 9 ?
Please leave these two fields as-is: