Favicon: crea el icono de tu sitio web

¿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. El pack final del Pack Logo incluye un archivo ICO cuando tu logo contiene un icono detectable — ya incluye los tamaños de 16, 32 y 48px.

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

Cuando se detecta un icono en tu logo, el pack final del Pack Logo contiene un archivo ICO: 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.