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.
Ver el perfil de Jesús Dugarte