¿Qué tamaños de favicon necesitas en 2026? El conjunto ideal

En 2026 el conjunto ideal de favicon es: un favicon.ico que contenga imágenes de 16, 32 y 48 px, un PNG de 96x96 (para Google Search), un favicon SVG opcional, un apple-touch-icon.png de 180x180 y PNG de 192x192 y 512x512 (más un maskable de 512) declarados en un manifiesto de aplicación web. Los mosaicos de Windows y los tamaños antiguos de Apple solo hacen falta si debes dar soporte a dispositivos muy antiguos. A continuación te explicamos el porqué, con una tabla de tamaños, HTML listo para usar y los errores más comunes que conviene evitar.

El panorama de los favicons solía ser caótico: cada navegador y sistema operativo pedía su propio tamaño, lo que daba lugar a los infames bloques de 20 líneas en el <head>. Hoy casi todo eso está obsoleto. Los navegadores modernos escalan un único icono bien hecho, iOS quiere un solo tamaño y Android lee el manifiesto. Este artículo separa lo que realmente se necesita de lo que solo es agradable tener.

La respuesta corta: el conjunto ideal de archivos de favicon

• favicon.ico (16, 32, 48 px en un solo archivo) en la raíz del sitio. Los navegadores, los lectores de feeds y muchas herramientas siguen solicitando /favicon.ico automáticamente.
• favicon.svg (opcional pero recomendado) para un renderizado nítido a cualquier tamaño y compatibilidad con el modo oscuro.
• PNG de 16x16, 32x32 y 96x96 como alternativas explícitas. La versión de 96 px ayuda en Google Search, que exige un múltiplo de 48 px.
• apple-touch-icon.png de 180x180, opaco, sin transparencia.
• PNG de 192x192 y 512x512 en manifest.json, más un icono maskable de 512x512 para Android.
• Etiqueta meta theme-color para tintar la interfaz del navegador en el móvil.
• Mosaicos de Windows (70, 150, 310 px) con browserconfig.xml solo para Windows antiguo y sitios anclados en IE11.

Tabla de tamaños de favicon: finalidad, nombres de archivo y prioridad

Usa esta tabla como lista de verificación. "Obligatorio" significa que un sitio normal se verá roto o inacabado sin él; "Recomendado" significa una mejora clara de calidad; "Opcional" significa un uso de nicho o heredado.

favicon.ico: 16, 32 y 48 px en un solo archivo

Un archivo ICO es un contenedor que guarda varios mapas de bits. Un buen favicon.ico incluye imágenes de 16x16, 32x32 y 48x48 para que el navegador o el sistema operativo elija la más cercana. Colócalo en la raíz de tu dominio (https://example.com/favicon.ico). Aunque tu HTML apunte a otra ubicación, muchos rastreadores, lectores RSS y navegadores antiguos siguen solicitando esa URL exacta, así que tenerlo evita ruido de errores 404 en tus registros.

No te limites a cambiar la extensión de un PNG a .ico. La mayoría de los navegadores lo toleran, pero algunas herramientas lo rechazan y pierdes la ventaja de la multirresolución. Exporta un ICO real.

Favicons PNG: 16, 32 y 96 px

Los enlaces PNG con sizes explícito permiten al navegador elegir el mejor mapa de bits sin analizar el ICO. En la práctica, 32x32 cubre las pestañas de alta densidad y 16x16 es casi redundante hoy en día. Merece la pena añadir el tamaño 96x96 porque Google Search muestra favicons junto a los resultados y exige un icono cuadrado cuyo tamaño sea múltiplo de 48 px (48x48, 96x96, 144x144 y así sucesivamente). Un archivo de 96 px ofrece a Google una fuente más nítida que uno de 48 px cuando reduce la imagen para los resultados móviles.

Consejo de diseño: a 16 px el detalle fino desaparece. Usa una forma atrevida y sencilla, alto contraste y poco texto o ninguno. Puedes ajustar y previsualizar tu icono en el editor de MakeFav antes de exportarlo.

Favicon SVG y modo oscuro

Un favicon SVG es un único archivo diminuto que se mantiene nítido en cualquier densidad de pantalla. Lo admiten los navegadores basados en Chromium y Firefox. La compatibilidad de Safari ha sido históricamente limitada, así que nunca dependas solo del SVG: conserva las alternativas ICO y PNG.

La mayor ventaja es la personalización del tema. Como un SVG puede contener CSS, puedes adaptar el icono al esquema de color del usuario con prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Ten en cuenta que la media query refleja el tema del navegador o del sistema operativo, que es el que usa la barra de pestañas. No sigue un selector de tema de tu propio sitio web.

Una peculiaridad conocida: cuando se declaran tanto un ICO como un SVG, Chrome puede elegir el ICO. Declarar el ICO con sizes="32x32" y listar el SVG después hace que Chrome prefiera el SVG, como se muestra en el código siguiente.

Apple touch icon: 180x180 y los tamaños heredados

Cuando un usuario añade tu sitio a la pantalla de inicio de iOS o iPadOS, Safari usa el apple-touch-icon. Hoy basta con un único PNG de 180x180 px: iOS lo reduce para dispositivos más antiguos y iPads. Llámalo apple-touch-icon.png y colócalo en la raíz; iOS incluso busca ese archivo por defecto si no existe ninguna etiqueta link.

Reglas para el icono de Apple:

• Sin transparencia. iOS rellena de negro los píxeles transparentes, así que un logotipo transparente suele acabar convertido en una mancha negra. Añade un color de fondo sólido.
• Sin esquinas redondeadas. iOS aplica su propia máscara redondeada. Proporciona un cuadrado completo.
• Mantén el contenido importante alejado de los bordes, ya que las esquinas se recortan.

¿Cuándo necesitas los tamaños heredados (57, 72, 76, 114, 120, 144, 152, 167)? Solo si das soporte a iOS 6 o anterior, o si quieres un control exacto de píxeles por dispositivo para el iPad Pro (167 px) y el iPad (152 px). Para casi cualquier sitio en 2026, basta con el archivo de 180x180. La configuración de máxima compatibilidad que aparece más abajo incluye algunos por completitud.

Iconos de Android y PWA: 192, 512 y maskable

Chrome en Android y otros navegadores compatibles con PWA leen los iconos del manifiesto de aplicación web, no de <link rel="icon">. Para que la app sea instalable necesitas al menos un PNG de 192x192 y otro de 512x512. El icono de 192 px se usa en la pantalla de inicio y en el lanzador de aplicaciones; el de 512 px aparece en las pantallas de bienvenida y en los cuadros de instalación.

Iconos maskable y la zona segura

Los iconos adaptativos de Android pueden recortarse en forma de círculo, squircle u otra forma según el dispositivo. Un icono maskable está diseñado para recortarse sin problemas: el contenido importante debe quedar dentro de la zona segura, un círculo centrado con un diámetro del 80% de la imagen (el radio equivale al 40% del lado). Para un archivo de 512x512, eso significa mantener tu logotipo dentro de un círculo de unos 410 px de diámetro y extender el color de fondo hasta los cuatro bordes para que no queden huecos tras aplicar la máscara.

Declara el icono maskable como una entrada propia con "purpose": "maskable". Evita "any maskable" en un solo archivo: el margen necesario para el enmascarado se ve demasiado pequeño cuando el icono se muestra sin máscara.

Ejemplo de manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Sirve el archivo como application/manifest+json (o application/json) y enlázalo desde cada página con <link rel="manifest" href="/manifest.json">. Algunos proyectos lo llaman site.webmanifest; el nombre no importa, lo que importa es el enlace.

Mosaicos de Windows y browserconfig.xml

Windows 8.1 y 10 permiten a los usuarios anclar un sitio al menú Inicio, e IE11 y el Edge heredado leen las imágenes de los mosaicos desde browserconfig.xml. Los tamaños habituales son 70x70 (pequeño), 150x150 (mediano), 310x150 (ancho) y 310x310 (grande). El Edge basado en Chromium usa en su lugar el manifiesto y los favicons normales, así que esta es una función heredada. Inclúyela solo si tu audiencia aún incluye configuraciones antiguas de Windows, por ejemplo en entornos corporativos.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: tintar la interfaz del navegador

La etiqueta meta theme-color indica a los navegadores móviles (y a algunos de escritorio) qué color usar para la barra de direcciones o la barra de título. No es un favicon, pero forma parte del mismo conjunto de marca. Puedes proporcionar valores distintos para el modo claro y el oscuro:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Configuración moderna mínima frente a máxima compatibilidad

Configuración moderna mínima (recomendada para la mayoría de los sitios)

Cinco archivos cubren más del 99% de los usos reales: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) y los dos iconos del manifiesto (192 y 512). Añade el PNG de 96x96 si te importa la visibilidad en Google Search, y un icono maskable si publicas una PWA.

<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">
<link rel="manifest" href="/manifest.json">

Configuración de máxima compatibilidad

Elígela cuando atiendas a una audiencia amplia o empresarial, o cuando quieras cubrir todos los clientes posibles. Añade tamaños PNG explícitos, tamaños heredados de Apple, mosaicos de Windows y colores de tema.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Fíjate en las rutas relativas a la raíz que empiezan por /. Funcionan a cualquier profundidad de página, lo que nos lleva a los errores más comunes.

Errores comunes con los favicons y cómo solucionarlos

1. Rutas incorrectas

Un enlace como href="favicon.ico" se resuelve de forma relativa a la URL actual, por lo que funciona en / pero falla en /blog/post/. Usa URL relativas a la raíz (/favicon.ico) o absolutas. Comprueba también que los archivos existen de verdad: abre cada URL directamente en el navegador y asegúrate de que devuelve HTTP 200, y no una redirección a una página 404 o a un muro de inicio de sesión.

2. Atributo sizes ausente o incorrecto

Sin sizes, los navegadores deben descargar los iconos para inspeccionarlos y pueden elegir el equivocado. Declara siempre sizes en los enlaces PNG y asegúrate de que coincide con las dimensiones reales en píxeles. Un archivo etiquetado como 32x32 que en realidad mide 64x64 provoca resultados inconsistentes.

3. Caché agresiva

Los navegadores guardan en caché los favicons durante mucho tiempo, a menudo de forma independiente de la caché de la página. Tras un cambio de marca, el icono antiguo puede persistir durante días. Cambia el nombre del archivo o añade una cadena de consulta de versión (/favicon.ico?v=2) y actualiza las etiquetas link. Las recargas forzadas a menudo no actualizan el icono de la pestaña; abrir la URL del icono directamente y recargarla suele funcionar.

4. Imágenes no cuadradas

Los favicons deben ser cuadrados. Un logotipo rectangular se estira, se recorta o se encaja con bandas de forma impredecible. Diseña una marca cuadrada específica, como una inicial o un símbolo, en lugar de reducir un logotipo tipográfico ancho.

5. Apple touch icons transparentes que se vuelven negros

iOS rellena la transparencia con negro. Dale al icono de 180x180 un fondo opaco y no redondees las esquinas de antemano.

6. Iconos maskable sin zona segura

Si el logotipo toca los bordes de un icono maskable, Android lo recortará. Manténlo dentro del círculo central del 80% y rellena todo el lienzo con el color de fondo.

7. Bloquear los iconos a los rastreadores

Si robots.txt prohíbe la ruta de tu favicon, Google no puede obtenerlo y mostrará un icono genérico de globo terráqueo en los resultados de búsqueda. Recuerda también que Google necesita el favicon en el mismo host que la página y solo lo actualiza de vez en cuando, por lo que los cambios pueden tardar días o semanas en aparecer.

8. Olvidar el enlace al manifiesto o las finalidades (purpose)

Un manifiesto que no está enlazado, o que carece de iconos de 192 y 512 px, impide el aviso de instalación en Chrome. Valídalo en las herramientas para desarrolladores de tu navegador, en la pestaña Application.

Genera el conjunto completo con un clic

Crear una docena de archivos a mano en un editor de imágenes, convertirlos luego a ICO y escribir el manifiesto es tedioso y propenso a errores. MakeFav genera todos los archivos anteriores a partir de una sola imagen, texto o emoji: favicon.ico multitamaño, PNG, SVG, Apple touch icon, PNG de 192/512, un icono maskable, mosaicos de Windows, manifest.json y browserconfig.xml, además de un fragmento HTML listo para pegar, todo en una descarga ZIP. Puedes ajustar el fondo, el margen y la forma en el editor, verificar un sitio existente con el verificador de favicons y automatizar la generación mediante los recursos para desarrolladores.

Lista de verificación para el despliegue

1. Sube todos los archivos a la raíz de tu sitio.
2. Pega el fragmento HTML en el <head> de cada página (o en tu plantilla compartida).
3. Asegúrate de que las rutas son relativas a la raíz y devuelven HTTP 200.
4. Comprueba el modo claro y el oscuro, una instalación en la pantalla de inicio de iOS y una instalación en Android.
5. Ejecuta el verificador para detectar tamaños ausentes o que no coinciden.
6. Invalida las cachés con una cadena de versión si has sustituido un icono antiguo.

Preguntas frecuentes

¿Sigo necesitando favicon.ico en 2026?

Sí. Aunque los navegadores modernos aceptan PNG y SVG, muchos rastreadores, lectores de feeds, clientes de correo y navegadores antiguos siguen solicitando /favicon.ico directamente. Un ICO multitamaño con imágenes de 16, 32 y 48 px es un archivo pequeño que evita iconos ausentes y errores 404.

¿Qué tamaño debe tener un favicon para Google Search?

Google exige un favicon cuadrado cuyo tamaño sea múltiplo de 48 px, de al menos 48x48. Un PNG de 96x96 es una opción segura, y también se admite un SVG. Google también necesita que el archivo sea rastreable, así que no lo bloquees en robots.txt. Las actualizaciones pueden tardar días o semanas en aparecer.

¿Basta con 180x180 para el Apple touch icon?

Para casi todos los sitios, sí. iOS e iPadOS reducen un PNG de 180x180 para todos los dispositivos actuales. Los tamaños antiguos (de 57 a 152 px) solo importan para versiones muy antiguas de iOS. Recuerda usar un fondo opaco para que el icono no se vuelva negro.

¿Qué es un icono maskable y necesito uno?

Un icono maskable es un PNG de 512x512 diseñado para las formas de icono adaptativo de Android. Su contenido importante queda dentro de un círculo de 80% de diámetro en el centro, y el fondo rellena todo el cuadrado. Solo lo necesitas si ofreces una PWA instalable, pero hace que el icono parezca nativo en lugar de quedar dentro de un círculo blanco.

¿Por qué mi favicon antiguo sigue apareciendo después de cambiarlo?

Los navegadores guardan en caché los favicons por separado y durante mucho tiempo. Cambia el nombre del archivo o añade una cadena de consulta de versión como ?v=2, actualiza las etiquetas link y luego abre la URL del icono directamente y recárgala. Los motores de búsqueda pueden tardar más en actualizar su propia copia.