Cómo crear un «favicon» para tu web o blog

Según la wikipedia «un favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores gráficos suelen mostrar el favicono de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente.

understanding-favicons

Asimismo los utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores (navegadores web) o favoritos, en los historiales (navegador web) de páginas visitadas y de navegación reciente, y toda vez que deban hacer referencia a ellas.»

El favicon además de cumplir con la función de identificar tu página con un pequeño icono, también denota profesionalismo, en la actualidad todas las páginas profesionales lo tienen.

Generadores de «favicon»

Para diseñar el favicon algunos desarrolladores utilizan editores gráficos como The Gimp o Photoshop, pero si andas en busca de más opciones, estas son algunas «en línea» que te permitirán crear uno de forma sencilla:

  • Favicon.cc: una herramienta muy fácil de utilizar que te permite importar una imagen o crear un nuevo diseño con una vista previa automática de tu favicon y editarla en la misma página web.
  • 256pixels.com: una herramienta que te permite crear tu favicon pixel por pixel con vista previa. Mantiene una colección que se actualiza diariamente para que cojas «ideas».
  • Favicontool: te permite crear tu favicon a través de subir una imagen predeterminada de cualquier tamaño y dimensión y asociarla un texto animado (scroll).
  • Favicongenerator.com: te permite crear tu favicon en tan sólo 5 pasos y una imagen.
  • Dagondesign.com: sube una imagen de 16 x 16 en cualquier formato y tendrás listo tu favicon en un paso.
  • Favicon.ru: crea tu favicon en 3 diferentes tamaños.

En todos los casos una vez finalizado el proceso (ya sea desde una imagen previa que puedes «subir»  o creando el icono desde cero) podrás descargarte el fichero resultante «favicon.ico».

Cómo usar finalmente el «favicon»

Si tienes un blog, estos disponen de herramientas para personalizar las páginas y el icono que las representa. Para Blogger de google se hace desde la sección «Diseño» y pulsando sobre  «Editar» del bloque «favicon»:

f1 f2

En el caso de querer asociarlo a nuestra página lo recomendable es colocarlo en la carpeta raíz de nuestro sitio web. Es decir, si tu dominio es www.tupagina.com, el favicon debería estar en www.tupagina.com/favicon.ico.

Una vez «subido» el fichero modificaremos nuestro código HTML. Solo tienes que colocar un elemento LINK entre las etiquetas de cabecera HEAD de tus ficheros HTML. Por ejemplo:

  • Si usas formato .ICO:
<linkrel=”shortcut icon” href=”http://www.tupagina.com/favicon.ico”>
  • Si usas otros formatos como .PNG o .GIF:
<link rel=”shortcut icon” type=”image/png” href=”http://www.tupagina.com/favicon.png”>