Seguro que, en más de un ocasión, has escuchado hablar de un favicon. Esto está muy relacionado con el diseño web, y es un punto importante que en toda página, ya sea una tienda online, un blog, una web, etc. te van a pedir. Pero, ¿qué es un favicon? ¿Para qué sirve? Y lo más importante de todo, ¿cómo se hace?
Si tienes muchas dudas acerca de esto, aquí vamos a darte las claves para que lo entiendas y, sobre todo, para que puedas presentarlo dentro de tu proyecto y quedes con una mejor presentación. ¡Te lo aseguramos!
Qué es un favicon
Vamos a empezar explicándote qué es un favicon para que lo entiendas. Y, para ello, nada mejor que darte un ejemplo práctico. Imagina que ahora mismo estás navegando (de hecho, nos estás leyendo). Pero no tienes solo una pestaña, sino varias de ellas. Te habrás dado cuenta que, en cada una de ellas, aparece el nombre de lo que refleja esa página, ya sea Youtube (porque estás escuchando música de fondo), Gmail (porque tienes abierto tu correo) o esta página.
Al lado de cada nombre, a la izquierda, te aparece una pequeña imagen, en cuadradito. La de Youtube y Gmail seguro que la identificas con los logos que tienen, pero, ¿y el resto de pestañas?
Pues eso que ves es en realidad el favicon. En otras palabras, se trata de un icono que guarda relación con la página que estás visitando, de ahí que sea tan importante el prestar atención a este detalle, porque cuando agregas a favoritos o a accesos directos una página, el favicon se convierte en la «imagen» de esa página y es por lo que hay que cuidar su diseño para que se relacione a la perfección (y sobre todo se vea bien para distinguirlo de otras).
Este pequeño icono suele tener un tamaño establecido que está en 16×16 píxeles (aunque también se puede poner en 32x32px). Dentro del mismo tienes que cuidar que todo lo que pongas se vea de manera correcta ya que, de lo contrario, aparecerá como una mancha poco identificable (y que dará muy mala imagen de tu página).
¿Por qué es tan importante el favicon?
Ahora que sabes lo que es el favicon, y que has localizado este en las páginas que abres habitualmente, ¿te has dado cuenta que hoy día cada vez son menos páginas a las que les falta? Esto es porque realmente es muy importante para dar una visión de elegancia y de saber hacer. Es decir, que vas a transmitir una imagen de marca o de corporación que se preocupa por los detalles.
Sin embargo, el favicon también tiene otros usos como son:
- Servir de identificación de tu página. Normalmente este favicon está relacionado con el logo que tienes en tu página web, solo que a un tamaño más pequeño. Pero cuando el logo es demasiado grande y no se verá en el botoncito, se tiende a elegir algo que relacione con el mismo.
- Ayudarás a que los usuarios que tengan guardada tu página puedan identificarla visualmente. Así, aunque no se acuerden de la url, o del nombre de la empresa, por la imagen del favicon sí que la van a localizar.
- Para estar «a buenas» con el SEO. Esto hay que tomarlo con pinzas. Y es que tener o no tener un favicon no va a afectar directamente al SEO (es decir, que no te va a posicionar mejor o peor por tenerlo o no). Ahora bien, cada vez es más habitual que, cuando un navegador entra en una página, busca ese favicon y, cuando no lo encuentra, entonces da un error 404. Y ya sabes que esos errores no son buenos para el SEO de una página.
Cómo hacer un favicon
Después de lo visto, está claro que un favicon es un elemento imprescindible a la hora de tener una página web. Ahora bien, ¿cómo se hace uno?
Debes saber que, en la mayoría de los casos, lo que hace es escogerse el logo de esa web, o si es demasiado grande, algo que lo identifique. Por ejemplo, imagina que tienes una web de televisión que has llamado de alguna forma. Pero eso, en el favicon, es demasiado grande. En cambio, puedes poner una imagen de una televisión para que lo relacionen. En estos casos sí se recomienda que lleve los mismos colores que tu web para que lo identifiquen mejor.
Y ahora bien, ¿cómo podemos crear un favicon? Pues tienes varias opciones:
Photoshop, Gimp…
En otras palabras, hablamos de programas de edición de imágenes ya que un favicon se crea exactamente igual que una imagen. Eso sí, tienes que guardarla en formato .ico para que la reconozca como tal porque no se puede dejar como jpg, gif o similar.
Esta forma de hacerlo te permite personalizar mucho mejor el favicon, logrando crearlo desde cero y dándole el acabado que tu quieras. Normalmente para esto se trabaja con una imagen en un tamaño normal y luego se adapta al tamaño de ese botón.
Después de hecho, se debe subir y probar en diferentes navegadores para ver si se ve bien, es representativo y, sobre todo, se entiende.
Usando herramientas online
En este caso nos referimos a páginas web que se ocupan de convertir cualquier imagen que quieras en un favicon en cuestión de segundos. Pero también tienes la opción de diseñar directamente con esas páginas tu favicon.
Si quieres lo primero (subir la imagen y convertirla), entonces te recomendamos Favicon Generator o Favic-o-matic. Pero si quieres lo segundo (diseñarlo de cero), apuesta por favicon.io o x-icon editor.
Con WordPress
¿Tu página está hecha en WordPress? ¿Y sabes que puedes usar ese sistema para crear tu favicon. Para ello puedes utilizar algunos plugins que te permiten crear este botón en base a alguna imagen que hayas subido (o que subas). También a través de «Apariencia/Personalizar» puedes hacerlo.
Una vez tienes el favicon hecho, solo tienes que ponerlo en tu web y que esta lo reconozca para poder mostrarse en la zona izquierda del nombre de tu página, así como a la hora de guardarla en favoritos. De esta forma te reconocerán fácilmente sin necesidad de pararse a leer si es la página que realmente querían visitar.