🚀 Cómo reducir Font Awesome a 10 KB y acelerar tu sitio web
Los íconos hacen que los sitios web sean intuitivos. Navegación, redes sociales, botones de acción: en todas partes necesita pequeñas pistas visuales que los visitantes reconozcan al instante. Font Awesome ha resuelto este problema durante 14 años con una biblioteca de más de 2000 íconos gratuitos que se conectan con una sola línea. El problema es que esa sola línea trae consigo cientos de kilobytes.
El paquete completo de Font Awesome 7 Free pesa unos 150 KB por estilo solo en archivos de webfont, sin el CSS. Sume el CSS (otros ~100 KB minificados), y cada primera carga de página entrega más de 250 KB al usuario. Peor aún: si usa de 8 a 10 íconos de dos mil, el navegador igual descarga todo. En 4G móvil, eso significa de 2 a 3 segundos extra de espera. Google PageSpeed penaliza esa carga con una reducción directa de puntuación.
Pero el problema tiene solución. Le mostraremos cómo extraer de la biblioteca solo los íconos que realmente usa en su sitio y obtener un tamaño final de 10 a 15 KB sin perder funcionalidad. Cubrimos todos los métodos: del automático al manual, de herramientas en línea a utilidades de CLI. Sin magia, solo técnicas que funcionan.
💡 Resumen rápido:
- Analice su sitio y compile una lista de los íconos de Font Awesome realmente en uso
- Elija el método de optimización para su situación: la herramienta en línea FontCut, la utilidad CLI fa-subset o el mecanismo oficial de Kit
- Para máximo control, tome la ruta manual con FontForge o IcoMoon: requiere esfuerzo pero le da control completo sobre el archivo final
- Genere el webfont y el CSS recortados, reemplace la versión completa en su servidor con ellos
- Mida la velocidad antes y después: la mejora típica en el PageSpeed Score es de 20 a 40 puntos
Por qué recortar Font Awesome
La razón principal es la velocidad de carga. Un estudio de Google muestra que el 53% de los visitantes móviles abandona una página si tarda más de 3 segundos en cargar. Cada 100 KB extra en la ruta crítica de renderizado aumentan el tiempo hasta el First Contentful Paint.
Font Awesome Free 7 contiene tres estilos: Solid, Regular y Brands. Combinados, son más de 2000 íconos y unos 450 KB de archivos de webfont comprimidos. Una landing page o un blog típico usa de 10 a 20 íconos, menos del 1% de la biblioteca. El navegador descarga todo lo demás para nada.
La segunda razón son las Core Web Vitals. La métrica LCP (Largest Contentful Paint) depende directamente de qué tan rápido recibe y renderiza las fuentes el navegador. Un Font Awesome sin recortar bloquea el renderizado del texto hasta que el webfont se carga. Después del subsetting, el archivo se vuelve tan pequeño que el navegador lo recibe en la primera solicitud de red.
La tercera razón es el tráfico móvil. Los usuarios con planes de datos limitados no le agradecerán 400 KB extra en cada página. El subsetting le devuelve el control sobre su presupuesto de carga.
Cifras del mundo real: reducir un archivo de webfont de 345 KB a 14,5 KB elevó el Lighthouse Performance Score de 52 a 89 puntos en un proyecto. La diferencia es visible a simple vista: la página se vuelve interactiva casi al instante.
Método 1: mecanismo oficial de Kit (recomendado)
El enfoque más simple y con mayor soporte es usar un Kit de Font Awesome con subsetting integrado. Este método funciona con una cuenta gratuita y no requiere herramientas de terceros.
Cómo funciona
Un Kit es un paquete personalizado de Font Awesome que usted configura en su panel de control en fontawesome.com. En los ajustes del Kit, hay una sección «Icon Selection» con dos modos:
- Por estilo: marca los estilos que necesita (Solid, Regular, Brands) y el Kit carga solo esos seleccionados. Solo con este paso, elimina dos de los tres estilos si solo necesita Solid.
- Por ícono: especifica íconos concretos mediante búsqueda y el Kit genera un archivo que contiene solo esos. Este modo proporciona la máxima compresión.
Después de guardar la configuración, el Kit reconstruye automáticamente el paquete. Usted obtiene una etiqueta <script> para insertar en el <head> de su sitio. La CDN de Font Awesome entrega la versión ya recortada. Sin archivos locales, sin compilación manual.
Ventajas del enfoque Kit
- No necesita descargar ni alojar archivos: la CDN de Font Awesome distribuye el paquete recortado globalmente
- Cuando añade un ícono nuevo, simplemente actualiza la lista en los ajustes del Kit y la reconstrucción ocurre automáticamente
- Funciona con Font Awesome Pro, incluidos los estilos Duotone y Sharp
- Soporta tanto el modo SVG+JS como el modo Webfonts+CSS
Cuándo un Kit no encaja
La única limitación: un Kit recortado no se puede descargar a su propio servidor en el plan gratuito. Si alojar las fuentes localmente es crítico para usted (red interna, política de seguridad), un Kit no es una opción. Entonces revise los métodos 2 y 3.
Método 2: herramienta en línea FontCut
Si no quiere registrarse en Font Awesome o prefiere un archivo ZIP listo que pueda poner en su repositorio, pruebe FontCut.com. Es un generador en línea gratuito diseñado específicamente para Font Awesome 6.4.0 y Bootstrap Icons.
El proceso tiene tres pasos:
- Seleccione un conjunto de íconos (Font Awesome Free 6.4.0, la última versión disponible)
- Marque los íconos que necesita en la cuadrícula visual
- Descargue un archivo ZIP con los archivos CSS y de webfont, súbalo a su servidor
El resultado es un paquete independiente de 10 a 15 KB que usted mismo aloja. La herramienta no requiere registro y la vista previa muestra el tamaño final en tiempo real.
Limitación: FontCut usa FA 6.4.0, no la versión actual 7.2.0. Para la mayoría de los proyectos, la diferencia es insignificante: los íconos de estilo sólido no cambian entre versiones. Pero si necesita íconos añadidos en FA 7 (paquetes Pro+), FontCut no los ofrecerá.
Método 3: utilidad CLI fa-subset (para desarrolladores)
La detección automática de íconos usados es el enfoque más preciso. La utilidad fa-subset (Python, BSD-2-Clause, instrucciones en Dev.to) escanea el código fuente de su proyecto, encuentra todas las clases fa-* y genera un webfont recortado que contiene solo los íconos realmente utilizados.
Instalación:
1 pip install fonttools
Ejecución básica (simulación para análisis):
1 python3 bin/fa-subset.py \ 2 --src ./src ./templates \ 3 --ext .html .php .twig .js \ 4 --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \ 5 --out ./optimised \ 6 --dry-run
La utilidad muestra una lista de los iconos encontrados y el tamaño proyectado del archivo optimizado. Sin el flag --dry-run, genera el CSS y la webfont listos para usar en la carpeta ./optimised.
Ventajas de fa-subset:
- Escanea archivos PHP, HTML, JS, Blade, Twig, Vue, React y cualquier archivo de texto de su proyecto
- Entiende los iconos duotone (puntos de código duales en Font Awesome 6+)
- Puede generar un informe JSON para pipelines de CI/CD:
--report-json ./report.json --strict-styles - Funciona con temas de WordPress, plantillas de Laravel y componentes de React/Vue
Resultado real en producción: compresión de 803 KB (fuentes + CSS) a 14,5 KB, una reducción del 98%. La utilidad es gratuita y no está vinculada a los servicios de Font Awesome.
Método 4: IcoMoon (constructor visual de fuentes)
IcoMoon es una aplicación web para crear fuentes de iconos personalizadas. Está disponible en icomoon.io/app. El enfoque es ligeramente más complejo que el de los Kits, pero ofrece una capacidad única: mezclar iconos de diferentes librerías en un solo archivo.
Paso 1: seleccione el paquete Font Awesome
Vaya a icomoon.io/app, haga clic en «Add Icons From Library», busque Font Awesome en la lista y haga clic en «Add».
Paso 2: marque los iconos que necesita
En la ventana de selección, marque todos los iconos que utiliza en su sitio haciendo clic en cada uno. Puede seleccionar varias librerías a la vez (por ejemplo, Font Awesome + Material Icons) y obtener un único archivo con iconos de ambos conjuntos.
Paso 3: genere y descargue la fuente
Tras la selección, haga clic en el botón «Generate Font» en la parte inferior de la página. IcoMoon mostrará todos los iconos seleccionados y ofrecerá un botón «Download». El archivo ZIP contiene los archivos de webfont (woff, woff2, eot, svg, ttf), un archivo style.css y una demo demo.html.
Guarde los archivos en el repositorio de su sitio y enlace style.css en el <head>. Si algo salió mal, abra demo.html del archivo: muestra exactamente cómo se enlaza y se usa la fuente.
IcoMoon funciona bien cuando necesita mezclar iconos de diferentes conjuntos o cuando fundamentalmente no quiere depender del CDN de Font Awesome.
Método 5: recorte manual con FontForge
Es el método más laborioso, pero también el que ofrece mayor control. Resulta adecuado cuando usted desea entender cada byte del archivo final o trabaja en un entorno sin acceso a servicios externos.
Paso 1: localice la fuente
Descargue Font Awesome desde el sitio oficial. Elimine el enlace CDN del <head> si estaba allí. Desempaquete el archivo en el repositorio de su sitio.
Conecte el CSS localmente:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Limpie la caché del navegador y recargue el sitio. Los iconos deberían mostrarse como antes, pero ahora usted controla los archivos en su servidor.
Paso 2: elimine los archivos innecesarios
Después de desempaquetar el archivo de Font Awesome, verá la estructura de carpetas:
Solo los archivos CSS y webfont son necesarios para el funcionamiento. Los navegadores modernos solo necesitan el formato woff2, por lo que los archivos ttf, eot y svg pueden eliminarse.
Elimine las fuentes Less y SCSS si no planea compilarlas. Conserve solo css/ y fonts/ con el archivo fa-solid-900.woff2 (o el equivalente para su versión).
Paso 3: edite la webfont en FontForge
Descargue e instale FontForge (un editor de fuentes gratuito y de código abierto). Abra el archivo .woff2 mediante Archivo → Abrir.
En la interfaz de FontForge, localice el panel de glifos. Para evitar el desplazamiento manual, vaya a Codificación → Compactar: todas las posiciones ocupadas se moverán al principio.
Ahora la parte más crítica: mantenga presionada la tecla Mayús y seleccione todos los glifos que su sitio NO utiliza. Elimínelos (Editar → Limpiar). Conserve solo los iconos realmente presentes en su marcado: redes sociales, flechas, iconos de menú, logotipos de marcas.
Guarde el resultado: Archivo → Generar fuentes. Seleccione Web Open Font Format (woff2) y especifique el nombre del archivo. Reemplace la webfont original en la carpeta fonts/ con la versión recortada.
Recargue el sitio y verifique todos los iconos. Si alguno desapareció, usted eliminó un glifo necesario: abra FontForge de nuevo y repita la selección con más cuidado.
¿O quizás simplemente cambiar de librería?
A veces, la mejor optimización no es optimizar Font Awesome, sino elegir una herramienta que sea más ligera desde el principio. Las alternativas modernas proporcionan iconos en formato SVG con eliminación de código no utilizado a nivel de importación: solo los iconos que usted importa explícitamente terminan en el paquete final.
Tres opciones que vale la pena considerar:
Lucide Icons: más de 1460 iconos, licencia MIT, sucesor directo de Feather Icons. Iconos en una cuadrícula de 24px, estilísticamente cercanos a FA, pero el paquete pesa apenas unos kilobytes con tree-shaking. Para React/Vue/Svelte, componentes nativos con props
size,colorystrokeWidth.Phosphor Icons: más de 1400 iconos en seis estilos (fino, ligero, regular, negrita, relleno, duotono). Cada icono se importa individualmente:
import { House } from '@phosphor-icons/react'. Sin lastre no utilizado.Bootstrap Icons: más de 2000 iconos SVG, gratuitos, con desarrollo activo. Compatibilidad directa con el ecosistema Bootstrap, pero utilizables de forma independiente. Los archivos SVG separados permiten incrustar iconos en línea sin solicitudes adicionales.
Si su sitio funciona con WordPress, consulte nuestra guía sobre cómo añadir Font Awesome a WordPress. Para quienes quieran profundizar en las fuentes web, tenemos un análisis sobre carga de fuentes web sin bloquear el renderizado.
⁉️🤔 Preguntas frecuentes
¿Qué es el subsetting de iconos y por qué es necesario?
El subsetting es el proceso de crear una versión reducida de una fuente de iconos que contenga únicamente los iconos que realmente se usan en el sitio. El paquete completo de Font Awesome 7 Free pesa alrededor de 450 KB en archivos de fuente web comprimidos. Un sitio típico usa entre 10 y 20 iconos; tras el subsetting, el archivo se reduce a 10-15 KB. La diferencia de carga se refleja de inmediato en la puntuación de PageSpeed: la mejora típica es de 20 a 40 puntos.
¿Cuántos iconos carga el navegador si conecté Font Awesome mediante CDN?
Todos. Un enlace CDN a
all.min.cssdescarga el conjunto completo de tres estilos: Solid, Regular y Brands. El navegador carga todos los archivos de fuente web aunque solo se use un icono en la página. Esta es precisamente la razón por la que el enfoque CDN sin un Kit es el más costoso en bytes. Un Kit con la opción «By Icon» resuelve este problema: el CDN entrega solo los iconos que usted seleccionó explícitamente en la configuración.
¿Qué método de optimización debo elegir para un sitio WordPress?
Si su sitio funciona con WordPress y no quiere lidiar con la línea de comandos, use el Kit oficial (método 1). La configuración toma 5 minutos en el panel de fontawesome.com y los resultados se sirven de inmediato mediante CDN. Si la política de seguridad prohíbe usar CDN, FontCut (método 2) funciona: descargue el ZIP, súbalo por FTP y conéctelo en
header.php. Para desarrolladores que buscan automatización, fa-subset (método 3) puede escanear las plantillas PHP de su tema y reconstruir la fuente en cada despliegue.
¿Es seguro eliminar los formatos de fuente web ttf, eot y svg?
Sí. Los navegadores modernos (Chrome, Firefox, Safari, Edge) admiten woff2 desde 2016. Según los datos de Can I Use, la cobertura alcanza al 98% o más del mercado global de navegadores. El formato woff2 ofrece mejor compresión (en promedio, un 30% más compacto que woff). Los archivos eot (necesarios solo para IE8), ttf y svg pueden eliminarse sin problema de la carpeta de fuentes. Conserve solo woff2 y, si necesita compatibilidad con Safari antiguo en iOS 12 e inferiores, añada woff como alternativa.
¿Vale la pena usar Font Awesome en 2026?
Depende del proyecto. Si ya tiene Font Awesome implementado y usa entre 5 y 10 iconos, el subsetting (cualquiera de los métodos anteriores) resuelve el problema de peso en una hora. Si el proyecto es nuevo y está eligiendo una librería desde cero, considere Lucide o Phosphor: están diseñadas con tree-shaking desde el inicio y no generan sobrecarga. Font Awesome sigue siendo líder en cantidad de iconos e integraciones del ecosistema, pero su costo en peso sin subsetting es mayor que el de las alternativas SVG modernas.
¿Vale la pena preocuparse por unas pocas decenas de kilobytes?
Definitivamente sí. Cada kilobyte no optimizado en la ruta crítica de renderizado reduce directamente la conversión. Amazon calculó que 100 ms de retraso en la carga cuestan un 1% en ventas. Google penaliza las páginas lentas en los resultados de búsqueda móvil. Esto no es perfeccionismo; es economía directa.
Elija el método según su situación:
- Mínimo esfuerzo: Kit con la opción By Icon. 5 minutos, resultado inmediato en CDN.
- Alojamiento local, sin registros: FontCut. 10 minutos, ZIP en su servidor.
- Automatización CI/CD: fa-subset. Escanea el código, reconstruye en cada despliegue.
- Control total: FontForge o IcoMoon. Lleva más tiempo, pero conoce cada glifo.
Reducir de 450 KB a 15 KB cambia drásticamente la percepción de velocidad. Pruébelo en un proyecto, mida PageSpeed antes y después. El resultado hablará por sí solo.
Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.