Qué es un favicon y cómo crear uno desde tu logo (2026)

Un favicon es el icono diminuto que representa tu sitio en una pestaña del navegador, un marcador o la pantalla de inicio del móvil. Créalo a partir del símbolo de tu logo, simplifícalo para que se lea a 16–32 píxeles y publica el juego mínimo de 2026: un SVG, un ICO de reserva y un apple-touch-icon de 180×180.

Por LogoSagaPublicado
En esta página
  1. ¿Qué es un favicon?
  2. ¿Por qué importa un favicon?
  3. Los tamaños y formatos de favicon que necesitas
  4. Cómo crear un favicon desde tu logo
  5. Enlazar un favicon en tu HTML
  6. Extra: un favicon que se adapta al modo oscuro
  7. Probar tu favicon
La misma marca mostrada en tamaños de favicon, incluida una versión del tamaño de una pestaña de navegador.
Un favicon es la marca de tu logo, simplificada para mantenerse nítida a tamaños diminutos.

¿Qué es un favicon?

Un favicon (abreviatura de «favorite icon») es la pequeña imagen cuadrada que representa un sitio web en una pestaña del navegador, un marcador, una entrada del historial y la pantalla de inicio del móvil. Casi siempre es una versión simplificada del logo de una marca — en concreto el símbolo, ya que no hay espacio para el nombre completo a ese tamaño.

¿Por qué importa un favicon?

Un favicon es una pieza de branding pequeña pero constante. Con una docena de pestañas abiertas, a menudo es la única forma en que alguien detecta tu sitio de un vistazo, y un icono guardado en la pantalla de inicio se sitúa junto a iconos de app pulidos. Un favicon nítido y fiel a la marca se ve meditado; uno ausente o borroso se ve sin terminar.

Los tamaños y formatos de favicon que necesitas

No necesitas la docena de iconos que enumeran los tutoriales antiguos. En 2026 el juego mínimo y fiable es pequeño:

ArchivoTamañoPropósito
favicon.svgcualquieranavegadores modernos; puede adaptarse al modo oscuro
favicon.ico16 + 32reserva heredada (navegadores antiguos)
apple-touch-icon.png180×180pantalla de inicio de iOS
Iconos PWA (opcional)192, 512aplicaciones web instalables

Tamaños como 64×64, 96×96 y 128×128 que recomiendan las guías antiguas están obsoletos — sáltatelos. El .ico es una reserva, no el archivo principal: los navegadores que admiten SVG lo preferirán.

  1. Empieza por el símbolo, no por el logo completo — el nombre no se leerá al tamaño de una pestaña.
  2. Simplifica para tamaños diminutos. Elimina el detalle fino, las líneas delgadas y los degradados sutiles que desaparecen a 16–32 píxeles. Favorece las formas contundentes y el alto contraste.
  3. Mantenlo cuadrado con un poco de margen para que no quede apretado contra los bordes de la pestaña.
  4. Exporta el juego — SVG, ICO y el PNG de 180×180 — desde el maestro vectorial de tu logo.
El paso de exportación del editor de LogoSaga mostrando favicon.svg incluido con los archivos del logo.
Exportar desde el maestro vectorial te da un favicon que coincide con el logo exactamente.

Como el SVG es el formato maestro ideal, vale la pena entender SVG vs PNG para logos antes de exportar.

Enlazar un favicon en tu HTML

Apunta a los archivos desde el <head> de tus páginas. Un juego moderno y mínimo se ve así:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Los navegadores que admiten SVG lo usan; el resto recurre al ICO.

Extra: un favicon que se adapta al modo oscuro

Un favicon SVG puede llevar su propio estilo para modo oscuro. Incrusta una media query dentro del SVG para que la marca cambie de colores con el tema del navegador:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox y Edge lo respetan; Safari todavía no, así que elige colores que se mantengan legibles en ambos temas como reserva.

Probar tu favicon

Compruébalo en una pestaña real del navegador, en claro y oscuro, y en la pantalla de inicio de un móvil. Como los navegadores almacenan los favicons en caché con fuerza, haz una recarga forzada tras cualquier cambio — o rompe la caché renombrando el archivo o añadiendo ?v=2. Si se ve turbio al tamaño de una pestaña, simplifica más la marca: el favicon es la prueba honesta de lo bien que se reduce un logo.

Si construyes tu logo con LogoSaga, la exportación ya incluye un favicon.svg junto al SVG y el PNG del logo, así que el favicon siempre coincide con la marca exactamente.

Crea un logo con un favicon a juego

Preguntas frecuentes

¿Qué tamaño debe tener un favicon?

Proporciona un SVG escalable más tamaños raster PNG: 32×32 es el estándar moderno para pestañas, 16×16 es el tamaño pequeño clásico y 180×180 es el Apple touch icon. Las PWA también necesitan 192×192 y 512×512.

¿Qué formato debe tener un favicon — SVG, PNG o ICO?

Usa un SVG para navegadores modernos, un ICO como reserva heredada y PNG para el apple-touch-icon y los tamaños PWA. El SVG es escalable e incluso puede adaptarse al modo oscuro; el ICO cubre los navegadores antiguos.

¿Puede cambiar un favicon en modo oscuro?

Sí, con un favicon SVG. Incrusta una media query prefers-color-scheme dentro del SVG para definir colores claros y oscuros. Safari aún no la respeta, así que elige un color neutro que se lea en ambos.

¿Por qué no se muestra o no se actualiza mi favicon?

Los navegadores almacenan en caché los favicons de forma agresiva. Tras un cambio, recarga forzada, o rompe la caché renombrando el archivo o añadiendo una query como favicon.svg?v=2, y confirma que las etiquetas link en el head de la página son correctas.

Fuentes