Favicon: crea el icono de tu sitio web en 5 minutos
¿Qué es un favicon?
El favicon (contracción de "favorite icon") es el pequeño icono que aparece en la pestaña de tu navegador, en tus marcadores y en la pantalla de inicio del móvil cuando un usuario añade tu sitio. Es un detalle que marca toda la diferencia en términos de profesionalidad: un sitio sin favicon parece inacabado.
Los formatos y tamaños que hay que conocer
| Uso | Tamaño | Formato |
|---|---|---|
| Pestaña del navegador | 16×16px, 32×32px | ICO o PNG |
| Favoritos de Windows | 16×16px | ICO |
| Acceso directo de Android | 192×192px | PNG |
| App iOS (Apple Touch) | 180×180px | PNG |
| PWA (Progressive Web App) | 512×512px | PNG |
En la práctica, la mayoría de los generadores de favicon crean automáticamente todos estos tamaños a partir de una imagen fuente de alta resolución.
Crea tu favicon en 3 pasos
Paso 1 — Preparar tu imagen fuente
Lo ideal es usar tu logomark (la parte de icono de tu logo, sin el texto) en PNG con fondo transparente y a 512×512px como mínimo. BrandMotion Lab entrega automáticamente un archivo ICO con cada pedido — ya incluye los tamaños de 16, 32 y 64px.
Paso 2 — Generar el pack de favicon
Si quieres generar un pack completo (ICO + PNG en todos los tamaños + manifest.json):
- favicon.io : el más sencillo, gratuito, lo genera todo con un clic
- realfavicongenerator.net : el más completo, con vista previa en todos los dispositivos
Paso 3 — Integrarlo en tu sitio
En el <head> de tu HTML:
<link rel="icon" type="image/ico" href="/favicon.ico" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
En Next.js (App Router) : coloca tu favicon.ico directamente en la carpeta /app. Next.js lo detecta automáticamente.
En WordPress : Apariencia → Personalizar → Identidad del sitio → Icono del sitio.
Diseño: ¿qué hace que un favicon sea bueno?
Un favicon debe ser reconocible a 16×16px. Algunas reglas:
- Usa una sola letra, una inicial o un pictograma simple — nunca el logo completo con texto
- Contraste alto entre el icono y el fondo (claro o transparente)
- Evita los detalles finos: desaparecen en los tamaños pequeños
- Pruébalo simulando la pestaña del navegador (barra de título oscura)
BrandMotion Lab y el favicon
BrandMotion Lab genera automáticamente un archivo ICO con cada logo entregado. Es la versión optimizada del logomark para los tamaños pequeños. Puedes usarlo directamente como favicon de tu sitio o importarlo en favicon.io para generar el pack completo.