Portada General Qué es un Favicon
Si eres de los que abren varias pestañas en el navegador web, verás que la mayoría de ellas tienen un pequeño icono en la parte izquierda de la pestaña, justo antes del nombre de la web, esto es lo que llamamos Favicon.
Vamos a ver qué es un favicon y cómo podemos crearlo para utilizarlo en nuestra web.
Un favicon es un icono que se asocia a la imagen de tu web y se muestra en las pestañas de un navegador web.
Por lo general, el favicon es el logotipo de la marca o cualquier icono que la represente, se utiliza y es muy efectivo, para localizar el sitio web que queremos entre todas las pestañas que tengamos abiertas en nuestro navegador.
Como puedes ver, con un simple vistazo y sin tener que leer el nombre de la web, puedes diferenciar y localizar fácilmente los distintos sitios que tengas abiertos.
Esto, además de estético, es muy útil y le facilita la vida al usuario, además, es bastante sencillo de crear y utilizar en cualquier sitio web.
Si eres un adicto a los marcadores web (favoritos) y tienes tu navegador lleno de carpetas y marcadores, verás que el favicon de cada web también aparece en cada marcador, lo que facilita su localización y la vida a los usuarios para encontrar el sitio que queremos más rápidamente.
Como hemos dicho antes un favicon es un icono, así que se trata de una imagen y para crear una imagen, podemos hacerla con cualquier editor de imágenes.
El editor de imágenes más famoso es Photoshop, pero no necesitas tener un programa con un perfil tan profesional (y caro) como Photoshop para crear un favicon.
Tienes muchas otras opciones gratuitas, como por ejemplo Gimp o Krita que pueden servirte perfectamente igual de bien que Photoshop para crear tu favicon.
Lo que debes de tener en cuenta al crear el favicon es lo siguiente:
En Photoshop verías algo así para crear el nuevo documento:
A partir de aquí ya puedes empezar a crear tu favicon, ya sea un diseño nuevo o importando alguna imagen.
Una vez lo hayas creado sólo tendrás que guardarlo en tu ordenador, por ejemplo, como .png, ya que no encontrarás una extensión .ico para exportar la imagen.
Una vez esté guardado renombra el archivo como favicon.ico, que es la forma más «universal» de que cualquier navegador detecte el favicon y lo muestre. Después súbelo a la carpeta raíz del sitio web.
Con sólo hacer esto, en la mayoría de las webs, ya podrás ver el favicon que has subido al acceder a la web.
En el ejemplo de la captura de pantalla se trata de una instalación básica de WordPress y ya ha funcionando subiéndolo con el nombre favicon.ico, pero en WordPress y en la mayoría de los CMS del mercado, tienen una opción para configurar el favicon que quieres utilizar.
Por ejemplo en WordPress, en Apariencia > Personalizar verás que tendrás un espacio en el que puedes Seleccionar el icono del sitio, pudiendo añadir, si quieres, una imagen .jpg o .png en lugar de renombrarla como favicon.ico.
Si lo de crear tu propio favicon usando un editor de imágenes no te ha convencido, no te preocupes porque existen servicios online en los que vamos a poder crear nuestro propio favicon de una forma más sencilla.
En Genfavicon.com podrás crear un favicon en muy pocos pasos y de una forma muy sencilla.
Lo primero que te pide es que subas una imagen. La imagen no tiene que ocupar más de 4 MB y no tiene porque tener las medidas del favicon que hemos indicado antes.
Puedes subir una imagen y luego sacar el favicon seleccionando una parte de esa imagen.
En el visor podrás seleccionar la parte de la imagen que quieres convertir en favicon seleccionar el tamaño que quieres utilizar. Luego sólo tienes que pulsar sobre Captura y Pervisualización para comprobar el resultado.
Una vez lo tengas claro, sólo tendrás que descargar el favicon o la imagen en .png para subirla a tu hosting.
Otro de los sitios en los que puedes crear tu favicon de manera online es Favicon.cc.
Podemos subir imágenes de casi todo tipo, pero no podemos recortarla online, así que intentan usar una imagen que se adapte a tu favicon.
Lo que si nos dejará será mantener el ratio de aspecto, es decir, no deformar la imagen o hacerlo para que entre en un formato cuadriculado.
En la pantalla de edición podremos ver todos los píxeles del favicon y podemos borrar o añadir color a cada uno de ellos., incluso tiene una opción para añadir una animación al favicon.
Una vez tengamos el diseño que nos guste, sólo tenemos que descargarlo y subirlo al hosting.
En Favic-o-Matic podemos crear nuestro favicon con sólo subir una imagen.
Esto quiere decir que no tendremos ningún editor ni nada por el estilo para determinar el tipo de favicon queremos.
Sólo subimos la imagen, hacemos click en start y nos descargará un archivo comprimido en el que encontraremos nuestro favicon.ico y y 2 .png, uno de 16×16 y otro de 32×32.
También veremos el código HTML que tenemos que añadir en la cabecera de nuestra web si queremos usar los .png.
Este último paso no es obligatorio, pero aquí lo tienes por si lo necesitas.
Se trata de la máxima sencillez a la hora de crear un favicon, eso si, sin ninguna posibilidad de edición.
Como has visto, si quieres usar un favicon en tu web, tienes varias opciones para conseguirlo.
Siendo algo tan sencillo no tiene mucho sentido no tener tu propio favicon, sobre todo si usamos una CMS, ya que suelen poner sus propios favicon por defecto y si no lo cambiamos es el que verán los usuarios.
Por ejemplo, si usamos WordPress y no lo cambiamos, nuestro favicon será el logotipo de WordPress, si usamos PrestaShop, el logo de PrestaShop, etc.. y eso no queda muy bien.
En cualquier caso, aquí tienes toda la información que necesitas para saber qué es un favicon y cómo puedes crear y subir el tuyo propio.