Cómo crear un favicon para tu sitio

Un favicon es el pequeño icono que aparece en la pestaña del navegador junto al título de tu página. Todo sitio profesional alojado en un hosting de calidad debería tener un favicon. Aunque parece un detalle minúsculo, el favicon es en realidad un elemento muy importante de tu marca en internet. Sin él, tu sitio resulta poco profesional y a los visitantes les cuesta más reconocer tu pestaña entre las decenas de páginas abiertas.

¿Qué es un favicon y por qué importa?

Un favicon (abreviatura de «favorites icon») es un pequeño icono que se muestra en varios lugares: en la pestaña del navegador, en la lista de marcadores, en el historial de navegación, en la pantalla de inicio de los dispositivos móviles e incluso en los resultados de búsqueda de Google. Este icono ayuda a los usuarios a identificar rápidamente tu sitio y contribuye al aspecto profesional de tu presencia online.

Desde el punto de vista de la experiencia de usuario, el favicon es clave. Con un buen favicon y un nombre de sitio de calidad, tu sitio será reconocible. Cuando un usuario tiene 15 pestañas abiertas, el favicon es la única forma de identificar visualmente qué pestaña pertenece a tu sitio. Sin un favicon, el navegador muestra un icono genérico de globo terráqueo o de documento vacío, lo que da una impresión poco profesional de inmediato.

¿Qué tamaños de favicon hacen falta?

Los navegadores y dispositivos modernos requieren favicons en distintos tamaños. Estos son los más importantes:

16x16 píxeles: el tamaño clásico para la pestaña del navegador. Es el tamaño mínimo que debería tener todo sitio.

32x32 píxeles: se usa para los marcadores y la barra de tareas en Windows. Un tamaño muy habitual.

48x48 píxeles: icono del sitio en Windows. Se usa cuando un usuario añade un acceso directo al escritorio.

180x180 píxeles (apple-touch-icon): para dispositivos iOS cuando un usuario añade el sitio a la pantalla de inicio. Apple utiliza este tamaño para todos los iPhone y iPad.

192x192 y 512x512 píxeles: para dispositivos Android y Progressive Web Apps (PWA). Estos tamaños se definen en el archivo web app manifest.

Además del formato estándar .ico, que admite varios tamaños en un único archivo, hoy también se usan los formatos .png y .svg. El formato SVG es especialmente práctico porque escala sin pérdida de calidad.

Cómo hacer un favicon: herramientas

Hay varias formas de crear un favicon, desde herramientas totalmente gratuitas hasta profesionales:

RealFaviconGenerator.net: es la mejor herramienta gratuita para generar favicons. Subes una imagen (tamaño recomendado 512x512 o mayor) y la herramienta genera automáticamente todos los tamaños necesarios, incluidos apple-touch-icon, los iconos de Android y los tile icons de Windows. También genera el código HTML que solo tienes que copiar en la cabecera de tu sitio.

Favicon.io: una herramienta sencilla que te permite crear un favicon a partir de texto, un emoji o una imagen subida. Resulta especialmente útil si quieres un favicon con las iniciales de tu marca: solo tienes que introducir las letras, elegir una fuente y un color, y la herramienta genera todos los archivos necesarios.

Canva: si quieres más control sobre el diseño, puedes usar Canva para crear un icono de 512x512 y luego usar RealFaviconGenerator para generar todos los tamaños.

Adobe Illustrator o Figma: para diseñadores profesionales que quieran control total. Crea un icono SVG y expórtalo en los tamaños necesarios.

Consejos para un buen diseño de favicon

El favicon es extremadamente pequeño, así que el diseño debe ser sencillo y reconocible. Estos son los consejos clave:

Usa formas simples: letras, formas geométricas o símbolos estilizados. Los logotipos detallados no se ven a 16x16 píxeles. Si tu logotipo tiene texto, usa solo las iniciales o un elemento iconográfico.

Elige colores contrastados que funcionen bien tanto sobre fondos claros como oscuros. Muchos navegadores tienen modo oscuro, así que comprueba cómo se ve tu favicon sobre ambos fondos.

Evita demasiados detalles. A 16x16 píxeles cada píxel se nota. Menos es más cuando se trata de favicons.

Cómo añadir un favicon a un sitio WordPress

El entorno de WordPress incorpora un sistema para establecer favicons llamado «Site Icon» (Icono del sitio). Estos son los pasos:

1. Ve a Apariencia > Personalizar en el panel de administración de WordPress.

2. Haz clic en Identidad del sitio.

3. En la sección Icono del sitio, haz clic en «Seleccionar imagen» y sube tu icono. WordPress recomienda una imagen de al menos 512x512 píxeles.

4. WordPress generará automáticamente todos los tamaños necesarios y añadirá las etiquetas meta adecuadas a la cabecera de tu sitio.

Es el método más sencillo y funciona con todos los temas modernos de WordPress. No necesitas ningún complemento ni editar el código manualmente.

Cómo añadir un favicon a un sitio HTML

En los sitios HTML estáticos, tienes que añadir manualmente las etiquetas link en la sección <head> de tu HTML. Tras generar todos los tamaños de favicon con RealFaviconGenerator, obtendrás un código parecido a este:

Coloca el archivo favicon.ico en el directorio raíz de tu sitio (junto a index.html). Después añade las etiquetas link para los distintos tamaños en la sección head: link rel="icon" para el favicon estándar, link rel="apple-touch-icon" para dispositivos iOS y link rel="manifest" para el soporte PWA.

Es importante que los archivos estén disponibles en las rutas que has indicado en el HTML. Se recomienda que favicon.ico esté en el directorio raíz, porque muchos navegadores buscan automáticamente ese archivo en esa ubicación.

Probar el favicon

Tras la instalación, prueba el favicon de la siguiente manera: abre el sitio en distintos navegadores (Chrome, Firefox, Safari, Edge), añade el sitio a marcadores y comprueba que el icono se muestra, pruébalo en el móvil y usa la herramienta Checker de RealFaviconGenerator, que verifica que todos los tamaños están correctamente implementados.

Ten en cuenta que los navegadores cachean los favicons de forma agresiva. Si has cambiado el favicon y no ves el cambio, prueba a hacer una recarga forzada (Ctrl+Shift+R) o a borrar la caché del navegador. También puedes añadir un parámetro de query string a la ruta del favicon para forzar una recarga.

Conclusión

Un favicon es un detalle pequeño pero importante que contribuye al aspecto profesional de tu sitio. Con herramientas gratuitas como RealFaviconGenerator, crear e implementar un favicon es cuestión de 10 minutos. No descuides este elemento: forma parte de la primera impresión que tu sitio causa en los visitantes.