Guía de implementación de favicon para SaaS: React y Next.js de principio a fin
Un favicon bien diseñado aparece en pestañas, marcadores, accesos directos y pantallas de inicio. En productos SaaS aporta reconocimiento inmediato y transmite profesionalismo. Esta guía cubre todo el proceso: diseño, exportación y configuración en React/Next.js.
¿Qué es un favicon y por qué importa?
Definición y propósito
Es la “miniatura” oficial de tu sitio y se muestra en:
- Pestañas del navegador
- Listas de marcadores e historial
- Accesos directos de escritorio y móviles
- Iconos cuando se instala como PWA
Impacto en SaaS
Branding
- Facilita identificar tu app entre múltiples pestañas
- Mantiene la consistencia visual en todos los puntos de contacto
- Refuerza la confianza del usuario
Experiencia de usuario
- Mejor navegación cuando hay muchas pestañas abiertas
- Íconos claros en marcadores y pantalla de inicio
Beneficios técnicos
- Evita errores 404 al solicitar
favicon.ico - Mejora la percepción del tiempo de carga
- Optimiza la compatibilidad PWA
Especificaciones y requisitos
Tamaños recomendados
ICO (compatibilidad heredada)
- 16×16, 32×32, 48×48 px dentro de un
favicon.ico
PNG (estándar moderno)
- 16×16, 32×32, 96×96, 180×180, 192×192, 512×512
SVG (vectorial)
- Escala infinita y archivos ligeros, aunque IE no lo soporta
Requisitos por plataforma
iOS
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Android (manifest)
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Windows
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
Cómo crear tu favicon
Principios de diseño
- Simplicidad: debe ser reconocible en 16px
- Color: usa la paleta principal y cuida el contraste
- Forma: canvas cuadrado, evita líneas ultra finas y textos largos
Herramientas recomendadas
- Profesionales: Illustrator, Sketch, Figma, Photoshop
- Alternativas gratuitas: GIMP, Inkscape, Canva, Figma free
- Generadores online: RealFaviconGenerator, Favicon.io, Canva Favicon Maker
Proceso paso a paso
- Diseña el icono base
Tamaño: 512×512 px
Formato: PNG o SVG
Fondo: transparente
-
Prueba múltiples tamaños (16px, 32px, 64px)
-
Exporta todos los formatos: PNG por tamaño, ICO multi-size, SVG
-
Optimiza el peso: elimina metadatos y apunta a menos de 5 KB por archivo cuando sea posible
Implementación en React
Estructura recomendada
/public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── mstile-150x150.png
├── favicon.svg
├── site.webmanifest
└── browserconfig.xml
Referencias en public/index.html
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="%PUBLIC_URL%/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
React Helmet
import { Helmet } from 'react-helmet';
function App() {
return (
<>
<Helmet>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="alternate icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#0A0A0A" />
</Helmet>
{/* resto de la app */}
</>
);
}
Implementación en Next.js
App Router (Next 13+)
export const metadata = {
icons: {
icon: [
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
{ url: "/favicon.ico" },
],
shortcut: ["/favicon.ico"],
apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
other: [{ rel: "mask-icon", url: "/safari-pinned-tab.svg", color: "#0A0A0A" }],
},
themeColor: "#ffffff",
manifest: "/site.webmanifest",
};
Pages Router
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<Html lang="es">
<Head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="msapplication-TileColor" content="#0A0A0A" />
<meta name="theme-color" content="#ffffff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
Manifest y browserconfig
site.webmanifest
{
"name": "Tu SaaS",
"short_name": "SaaS",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#0A0A0A</TileColor>
</tile>
</msapplication>
</browserconfig>
Preguntas frecuentes
| Problema | Causa común | Solución |
| --- | --- | --- |
| El navegador no muestra el favicon | Archivo en ruta incorrecta o falta favicon.ico | Asegura que exista en /public y limpia la caché |
| Icono borroso en iOS | Sin Apple Touch Icon en 180×180 | Exporta PNG de alta calidad y evita compresión excesiva |
| En dark mode se pierde | Colores sin contraste | Añade contorno o invierte la paleta para versiones oscuras |
| PWA sin icono | Manifest incompleto (falta 192/512 px) | Añade los tamaños y vuelve a desplegar |
Automatizar el proceso
- Usa el generador de favicon de AImageTools
- Descarga el paquete (PNG/SVG/ICO + manifest)
- Copia los archivos a
/public/ - Añade verificaciones en CI/CD
- Tras desplegar, limpia la caché y prueba en varios dispositivos
Conclusión
Aunque pequeño, el favicon es el primer punto de contacto visual con tu marca. Define un icono claro, exporta todos los formatos necesarios y configúralo correctamente en React o Next.js para garantizar una presencia consistente en pestañas, marcadores, móviles y PWAs. ¡Implementa tu set completo de favicons hoy mismo y eleva la imagen de tu SaaS!