Cuando tienes un montón de pestañas abiertas en el navegador, ¿cómo identificas la que estás buscando en ese momento? Seguro que te fijas en los favicons: un pequeño icono que aparece al lado del título de la web.
Además de en las pestañas de los navegadores, los favicons (del inglés favorites icon o icono de favoritos) también aparecen junto a los marcadores de favoritos, en el historial, barras de búsqueda, navegadores móviles, accesos directos en la pantalla de inicio y en la página de resultados de los motores de búsqueda.
A veces, al crear una web, no se les presta demasiada atención a estos iconos, pero pueden tener un gran impacto en el resultado final de tu web. En este artículo hablaremos sobre por qué necesitas un favicon y cómo puedes crear uno y añadirlo a tu web.
- ¿Por qué tu web debería tener un favicon?
- Crea un favicon para tu web en tres pasos
- Tres consejos para diseñar un buen favicon para tu web
- Pequeño pero poderoso
¿Por qué tu web debería tener un favicon?
Los favicons son una de esas pequeñas cosas que tienen un gran impacto, y te explicamos por qué:
- Los favicons mejoran la experiencia de usuario: gracias a los favicons, los usuarios pueden identificar fácilmente tu web si tienen varias pestañas abiertas. Además, tu web se distinguirá mejor en los resultados de búsqueda. Es un pequeño elemento que mejora significativamente la experiencia de la web y permite que la gente pueda encontrarla siempre que la necesite.
- Los iconos de favoritos mejoran la percepción de la marca: si tu web tiene un favicon, es mucho más sencillo que te puedan identificar en una maraña de pestañas o resultados de búsqueda. Los visitantes empezarán a asociar tu web con tu icono personalizado, independientemente del dispositivo desde el que te visiten. Además, si utilizas una versión de tu logo, el favicon servirá como refuerzo de tu identidad de marca y podrás mantener una coherencia estética entre los diferentes canales de marketing.
- Los favicons dan credibilidad a tu web: con un icono genérico (como el icono del mundo), puede dar la impresión de que tu web está sin terminar o no recibe mantenimiento. Los iconos personalizados, sin embargo, le dan un toque de confianza y profesionalidad a tu web al instante.
Ahora ya sabes por qué los iconos de favoritos son un elemento clave en cualquier web. Además, con WordPress puedes añadir uno a tu sitio de forma sencilla: te lo explicaremos en las siguientes secciones.
¿Los favicons tienen algún impacto en el SEO de la web?
No de forma directa, pero los favicons sí que tienen cierta influencia en el SEO. ¿De qué manera? Google inspecciona tu web y busca el archivo del icono para identificar tu web. Los visitantes hacen lo mismo: identifican los iconos que conocen en los resultados de búsqueda, lo que mejora la proporción de clics.
No solo lo decimos nosotros: un usuario de Reddit notó un descenso en el tráfico orgánico porque Google no estaba mostrando su favicon en los resultados de búsqueda.
Mi favicon desapareció de Google Search: a mediados de febrero, Google eliminó de los resultados de búsqueda el favicon de mi sitio, lo que causó un pequeño descenso en el tráfico orgánico. Lo he vuelto a subir, pero todavía no aparece.
Crea un favicon para tu web en tres pasos
Al investigar para crear un icono de favoritos, te puedes encontrar por ahí mucha información contradictoria o confusa: ¿Debería estar en SVG o PNG? ¿El tamaño correcto debería ser 16×15 o 48×48? Ve directo al grano con esta guía paso a paso con todo lo que necesitas saber:
Paso 1: Diseña tu favicon
Lo ideal es que tu icono sea una variante de tu logotipo. Así te aseguras de que la identidad de tu marca es consistente y fácil de recordar. Si tu web no tiene logo, puedes contratar a un diseñador gráfico o crear uno por tu cuenta con herramientas de diseño gráfico como Canva o Photoshop.
Cuando tengas el logo, puedes exportarlo en el tamaño adecuado (512×512) directamente desde Canva o Photoshop. También puedes subir el logotipo a un generador de iconos para convertirlo en favicon. Aquí tienes una lista de cinco sencillos generadores de iconos:
Estas herramientas generan los iconos de favoritos tanto en formato PNG como en ICO. Por ejemplo, en RealFaviconGenerator, puedes subir la imagen que quieras, ver cómo queda en diferentes dispositivos y descargar el paquete de iconos. También puedes personalizar cómo aparece el favicon en navegadores que tengan un tema oscuro.
Consejo: Utiliza un fondo transparente en tus iconos para que queden mejor con el fondo del navegador. Si tu logo no tiene fondo transparente, puedes utilizar una herramienta como Remove.bg para borrar el fondo en cuestión de segundos.
Paso 2: Optimiza el tamaño y el formato de tu favicon
Si has creado tu web con WordPress, comprueba que cumples con las directrices para las imágenes de icono del sitio.
- Relación de aspecto: el favicon debe ser una imagen con forma cuadrada.
- Dimensiones: en los sitios de WordPress, el tamaño del favicon debe ser de 512×512 píxeles, como mínimo.
- Tipo de archivo: WordPress es compatible con cualquier formato de icono válido: los tipos de archivo más comunes son PNG y SVG.
Entonces, ¿cuál elegir, PNG o SVG? Depende.
- En el formato SVG (Scalable Vector Graphics), el favicon no está compuesto de píxeles, sino de caminos y formas. Esto hace que pueda escalarse hasta el infinito sin perder definición. El problema es que no todos los navegadores son compatibles con el formato SVG en los favicons.
- Por otro lado, el formato PNG, además de estar ampliamente aceptado en todos los navegadores y dispositivos, es más sencillo de utilizar, ya que es un formato muy común que es muy probable que ya hayamos usado previamente.
Si quieres saber qué navegadores son compatibles con qué formatos de favicon, échale un vistazo a la página Can I Use, donde todas tus dudas quedarán resultas de un plumazo. Consulta qué versiones de los navegadores son compatibles con los formatos PNG y SVG.
Nota: Según el navegador y el dispositivo del usuario, tu favicon puede aparecer en diferentes tamaños. Por ejemplo, los iconos suelen tener unas dimensiones de 96×96 en los accesos directos al escritorio. El tamaño más pequeño es 16×16. Elige un favicon que quede bien incluso reducido a esas dimensiones. También puede ser buena idea conocer las directrices de Google para garantizar que tu favicon aparece de forma óptima en las páginas de resultados de búsqueda y en las pestañas de los navegadores.
Paso 3: Añade el archivo del favicon a tu web
Si usas WordPress, hay dos formas muy fáciles de añadir un favicon a tu web:
- Desde los ajustes generales de WordPress.
- Desde el personalizador de WordPress.
Veamos cada una de ellas.
Desde los ajustes generales de WordPress
Este es el método más rápido y sencillo para añadir un icono a tu web de WordPress. Solo tienes que asegurarte de que el favicon es cuadrado y tiene unas dimensiones de 512×512 píxeles y WordPress se encargará de lo demás.
- En el escritorio de tu sitio, ve a Ajustes → Generales.
- Haz clic en el botón «Elige un icono del sitio».
- Sube un archivo nuevo o elige uno de tu biblioteca multimedia.
- Cuando hayas elegido la imagen, haz clic en el botón «Establecer como icono del sitio». WordPress te pedirá que reajustes las dimensiones de la imagen si es necesario.
Podrás ver una previsualización del favicon cuando hayas guardado los cambios:
Desde el personalizador de WordPress
Con el personalizador de WordPress también puedes subir un favicon de forma sencilla.
- En el escritorio de tu sitio, ve a Apariencia → Personalizar.
- Haz clic en «Identidad del sitio».
- En la parte inferior, encontrarás el botón «Seleccionar el icono del sitio» para subir tu favicon.
- También puedes recortar la imagen si lo necesitas.
Otro método para añadir un favicon en cualquier web (tanto si está hecha con WordPress como si no) es editar los archivos de código del tema. Estos son los pasos para hacerlo:
- Sube el archivo del favicon al gestor o biblioteca de archivos multimedia de la plataforma que estés utilizando para crear la web.
- Copia la URL del archivo subido.
- Inserta el siguiente fragmento de código en la sección <head> del HTML:
<head>
…
<link rel="icon" href="https://yoursite.com/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="https://yoursite.com/favicon.png" type="image/x-icon">
…
</head>
Este método no es del todo recomendable, ya que muchas plataformas de creación de webs tienen formas más sencillas de subir un favicon, y trastear con el código puede causar errores de funcionalidades y de apariencia si no tienes cuidado.
Tres consejos para diseñar un buen favicon para tu web
Te dejamos algunas recomendaciones que te pueden venir bien para conseguir que tu favicon tenga un aspecto profesional y funcione bien:
1. Que sea simple
No utilices logos muy recargados que tengan demasiados detalles o mucho texto. Si tu empresa tiene un nombre un poco largo, puedes no usarlo al completo, por ejemplo. Que sea conciso y se limite a una sola letra o siglas. ¿Por qué? Un favicon es un icono muy pequeño: te interesa que se vea claramente en todos los navegadores y dispositivos. Utiliza un símbolo llamativo bien definido y que se pueda reconocer fácilmente.
2. Comprueba los colores
Con la gran variedad de navegadores que hay ahora y la popularidad del modo oscuro, no olvides comprobar que tu favicon se ve bien en todos los tipos de fondo. Pruébalo sobre fondos blancos, grises y negros. También te puede ayudar que el fondo de tu icono sea transparente.
3. Prueba el favicon
Comprueba cómo se ve tu icono en diferentes navegadores, dispositivos móviles, tabletas, marcadores de favoritos y pestañas fijadas. Si no aparece correctamente en alguno de ellos, investiga la causa y restablece las dimensiones al tamaño adecuado.
Pequeño pero poderoso
Un favicon es un pequeño detalle que puede tener un gran impacto en la identidad de marca y la experiencia de usuario de tu web. Esperamos que este artículo te haya ayudado a aprender a crear uno fácilmente para dejar tu web tan pulida como se merece.
Pero añadir un icono no es lo único que puedes hacer para mejorar la experiencia de tu web. También influyen otros aspectos como una velocidad de carga supersónica y una interfaz de usuario clara e intuitiva. Crea tu web con WordPress.com (o migra una que ya tengas) y disfruta de un servicio de hosting gestionado con un rendimiento y seguridad inigualables.
WordPress.com en Español 