Como crear un Favicon Online para tu Web

viernes, 7 de marzo de 2014


Un favicon o también conocido como icono de página, es una pequeña imagen utilizada por los desarrolladores web para otorgarle una identidad a su web. Esta imagen es mostrada en la barra de dirección del navegador y por lo general suele tener un tamaño de 16x16px.

Anteriormente el favicon de una web solo podría añadirse si la imagen se encontraba en formato “.ico”. Sin embargo debido a las constantes actualizaciones que tienen los navegadores web, ahora es posible crear un favicon en formato .png o .gif.

La siguiente imagen muestra contorneado en color azul el favicon de algunos sitios web populares.

Puedes crear favicons de diferentes maneras, por ejemplo utilizando Photoshop o alguna otra herramienta de diseño y edición de imagen. No obstante para simplificar aun más las cosas, vamos a aprender como crear favicon online, utilizando una sencilla herramienta web.

Crear Favicon Online

Existen diversas páginas que nos permiten crear nuestros favicon online, pero por experiencia propia y facilidad me atrevo a recomendar Genfavicon.com

Como puedes ver en la imagen superior, este sitio divide la creación del favicon en 3 sencillos pasos:

  • Selecciona una imagen de tu computadora o bien indica la dirección web de la imagen que desees usar como favicon. A continuación da un clic en el botón “Subir Imagen”, la imagen cargada aparecerá dentro del recuadro superior blanco.
  • Con la imagen cargada, deberás mover los controles hasta que se ajusten a la parte de la imagen que deseas se convierta en el favicon. Posteriormente selecciona el tamaño, yo recomiendo 16 x 16px. Y da un clic en Captura y previsualización.
  • En esta sección verás el favicon resultante y podrás descargarlo en formato .ico o .png.
Agregar Favicon a Web

Hasta ahora solo hemos creado nuestro favicon pero, ¿Cómo agregarlo a nuestra web?
Para agregar un favicon a tu web, será necesario subir el favicon a la raíz del sitio web y añadir una línea de código. Esta línea debe colocarse antes del cierre de la etiqueta </head>.

Si usas un CMS como WordPress esta línea deberás añadirla en el archivo “header.php” de la plantilla que estés utilizando. Si usas Blogger ya sabrás que existe un widget destinado para ello.

No hay comentarios.:

Publicar un comentario