¿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

Etiquetas:

Suscríbete a nuestro Feed para recibir las últimas novedades de diseño web, diseño gráfico y programación

4 Comentarios hasta el momento »

  1. Google estrena Favicon para el 2009 - The n4gash, Blog sobre Diseño gráfico y web, programación, internet, posicionamiento web y SEO dijo

    9 de Enero del 2009 a las 22:56

    […] y al meter el Firefox, con Google como página predeterminada, me ha llamado la atención un nuevo favicon del buscador. Por lo que he visto, aparece tanto en el buscador como en algunas apps de Google […]

  2. Faviconiac, obtén fácilmente el favicon de cualquier web a través de un plugin de Firefox - The n4gash Blog dijo

    17 de Febrero del 2009 a las 21:56

    […] nos ha enviado la presentación de  un nuevo proyecto web que permite obtener de forma sencilla el favicon de cualquier página web en formato PNG, […]

  3. Iconspedia, extensa colección de iconos gratis - The n4gash Blog - The n4gash Blog dijo

    19 de Mayo del 2009 a las 18:20

    […] en formato .PNG, o directamente en .ICO por si los queremos utilizar para el escritorio, como favicons, etc. La mayoría de iconos tienen una licencia Creative Commons que permite su libre utilización […]

  4. Google estrena Favicon para el 2009 dijo

    3 de Julio del 2009 a las 10:49

    […] y al meter el Firefox, con Google como página predeterminada, me ha llamado la atención un nuevo favicon del buscador. Por lo que he visto, aparece tanto en el buscador como en algunas apps de Google […]

Comentarios RSS · TrackBack URI

Dejanos tu Comentario

Nombre: (Requerido)

E-Mail: (Requerido)

Sitio WEB:

Comentario:

What is 13 + 15 ?
Please leave these two fields as-is: