¿Qué es un Favicon (y qué tamaños necesito)?

Un favicon (abreviatura de "favorite icon") es el pequeño gráfico que los navegadores muestran junto al título de la página en la pestaña, en la barra de marcadores, en el historial y, cada vez más, en los resultados de los motores de búsqueda. El nombre viene de Internet Explorer 5 en 1999, donde el icono se usaba únicamente como identificador de marcador. Veinticinco años después, el mismo formato de archivo y el mismo marcado HTML siguen funcionando, pero el papel del favicon se ha ampliado tanto más allá de ese propósito original que "simplemente sube un .ico de 16x16" ya no es la respuesta correcta.

Para qué se usa realmente un favicon hoy

Los navegadores y sistemas operativos modernos toman archivos del conjunto de favicons para una amplia gama de contextos, cada uno con expectativas distintas de tamaño y formato:

• Pestañas y marcadores del navegador. Normalmente se renderiza a 16x16 o 32x32 píxeles CSS, pero en pantallas de alta densidad el navegador toma una versión más grande y la reduce. Un icono diminuto y pixelado junto a un título nítido se ve desactualizado.
• Resultados de búsqueda. Google muestra favicons junto a los resultados de búsqueda móviles desde 2019 y en escritorio desde 2023. El icono debe ser de al menos 48x48, se recomiendan múltiplos de 48, y el archivo debe ser rastreable.
• Pantalla de inicio de iOS y Android. Cuando un usuario elige "añadir a la pantalla de inicio", iOS toma el apple-touch-icon (180x180), Android toma iconos del web app manifest (típicamente 192x192 y 512x512). Sin declaraciones explícitas, ambas plataformas generan una captura borrosa como fallback.
• Aplicaciones Web Progresivas (PWA). Las PWA instaladas como apps independientes dependen del web app manifest para los iconos del lanzador, el conmutador de tareas y la splash screen. Tamaños incorrectos significan un sitio instalable que se ve roto.
• Pestañas ancladas en Safari macOS. Usa un SVG monocromo separado (mask-icon) para el aspecto de las pestañas ancladas. Un caso de nicho, pero trivial de soportar.
• Anclado de mosaicos en Windows. Edge y el menú Inicio de Windows pueden anclar sitios como mosaicos, lo cual requiere un conjunto separado de declaraciones msapplication-TileImage.

La consecuencia pragmática: necesitas un pequeño conjunto de archivos (típicamente entre cuatro y seis), no un solo .ico, y un puñado de etiquetas HTML link para declararlos.

Qué formatos de archivo importan

Tres formatos son relevantes en 2026, y los días en que se necesitaban todos simultáneamente quedaron atrás.

• PNG. El estándar adecuado. Soporte universal, sin pérdida, los fondos transparentes funcionan en todas partes. Un PNG por tamaño objetivo.
• SVG. Soportado por todos los navegadores modernos para favicons. Un SVG escala a cualquier tamaño y se mantiene nítido en pantallas de alta densidad sin necesidad de assets retina separados. Advertencia: los favicons SVG deben ser autónomos (sin referencias externas, sin hojas de estilo externas, sin fuentes incrustadas) y Safari solo los soporta junto con un fallback PNG.
• ICO. El formato contenedor heredado que puede albergar varios tamaños en un solo archivo. Sigue siendo útil para un caso específico: la petición a /favicon.ico en la raíz del sitio, que todos los navegadores, lectores RSS y rastreadores hacen implícitamente aunque no lo enlaces. Devolver un 404 es inofensivo pero genera ruido en los logs del servidor. Un pequeño .ico multi-tamaño (16x16, 32x32, 48x48 en un solo archivo) lo silencia.

WebP y AVIF, aunque excelentes para imágenes de contenido, no se usan para favicons porque el soporte de los navegadores en este rol es inconsistente. Quédate con PNG y SVG.

La lista real de archivos que necesitas en 2026

Un conjunto sólido y a prueba de futuro cubre todos los contextos anteriores con este mínimo:

• favicon.ico — multi-tamaño (16, 32, 48), colocado en la raíz del sitio
• favicon.svg — escalable, usado por los navegadores modernos cuando esté disponible
• favicon-96x96.png — fallback de raster explícito en un tamaño medio cómodo
• apple-touch-icon.png — 180x180, sin transparencia (iOS añade las esquinas redondeadas)
• web-app-manifest-192x192.png — pantalla de inicio de Android, lanzador PWA
• web-app-manifest-512x512.png — splash screen de PWA, contextos de mosaico grandes

Son seis archivos. El HTML correspondiente en <head>:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Y un site.webmanifest mínimo:

{
  "name": "Nombre de tu Sitio",
  "short_name": "Sitio",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Esto cubre pestañas del navegador, marcadores, resultados de Google, pantalla de inicio de iOS, pantalla de inicio de Android e instalación PWA. Cualquier cosa más allá es territorio de casos extremos.

Restricciones de diseño para un favicon que realmente se lea

La parte más difícil del diseño de un favicon no es la exportación, es hacer algo legible a 16x16. Algunas reglas que producen consistentemente buenos resultados:

• Simplifica sin piedad. Un logo completo rara vez funciona como favicon de 16x16. Usa un único elemento dominante: una letra, un símbolo, una marca abstracta. Cualquier cosa con trazos finos o detalles delicados se difumina.
• Contraste fuerte. El favicon vive en un chrome de navegador claro u oscuro que no puedes predecir. Blanco puro sobre transparente desaparece en temas claros; negro puro sobre transparente desaparece en temas oscuros. Usa un fondo sólido o diseña para ambos modos (un SVG con media queries prefers-color-scheme funciona).
• Relación cuadrada con margen seguro. Diseña sobre un lienzo cuadrado pero mantén alrededor de un 10% de padding desde los bordes. Algunas plataformas (iOS, iconos adaptativos de Android) recortan o enmascaran el icono, y un diseño que llega hasta el borde se ve cortado.
• Prueba en tamaño real. Mirar un icono de 16x16 con zoom al 200% engaña. Renderízalo al 100% junto a otras pestañas para ver cómo compite realmente por la atención.

WordPress: cómo funciona el Icono del Sitio

WordPress tiene soporte de favicon integrado desde la versión 4.3. En el admin, bajo Apariencia, Personalizar, Identidad del Sitio, hay un campo "Icono del Sitio" que acepta una sola imagen cuadrada de mínimo 512x512. WordPress entonces genera y sirve automáticamente los distintos tamaños de favicon desde esa fuente.

La generación automática cubre favicon.ico, apple-touch-icon a 180x180 y los tamaños PNG estándar en el head HTML. No genera un web app manifest por defecto, así que la instalación PWA recurrirá al apple-touch-icon. Para la mayoría de los sitios eso es suficiente.

Las carencias del Site Icon integrado: no puede servir archivos diferentes por resolución (sin soporte SVG más allá de la conversión a raster), y no produce un manifest con el tamaño 512x512 más grande que prefieren las instalaciones PWA y las splash screens de Android. Para un sitio donde realmente te importa la apariencia PWA, complementar el Site Icon con etiquetas <link> manuales en el functions.php de un child theme es el camino más limpio. Plugins como RealFaviconGenerator (también un buen generador web si quieres saltarte la exportación manual) manejan esto de principio a fin.

Cómo verificar que tu configuración de favicon funciona

1. Comprobación de pestaña. Abre el sitio en una ventana de incógnito (para evitar favicons cacheados) y confirma que el icono aparece junto al título. Prueba al menos en Chrome, Firefox y Safari.
2. Petición a la raíz. Visita /favicon.ico directamente. Debe devolver un 200 con el icono, no un 404. Muchos sitios fallan en esto incluso cuando su HTML tiene un <link rel="icon"> correcto.
3. Pantalla de inicio iOS. En un iPhone, toca el botón compartir en Safari y "Añadir a la pantalla de inicio". La vista previa debe mostrar tu icono nítido de 180x180, no una captura borrosa.
4. Búsqueda de Google. Busca tu sitio en un dispositivo móvil. El icono debe aparecer junto al resultado. Si no, la URL de Google https://www.google.com/s2/favicons?domain=tusitio.com muestra lo que el rastreador tiene cacheado actualmente.
5. Lighthouse. La auditoría PWA de Lighthouse en Chrome DevTools detecta entradas de manifest faltantes, tamaños incorrectos y otros problemas de declaración.

Problemas comunes y qué los causa

• "Mi favicon no aparece." Casi siempre es un problema de caché. Los navegadores cachean los favicons de forma muy agresiva. Limpia la caché de favicons (Chrome: visita chrome://favicon-cache, Firefox: limpia caché y datos offline) o prueba en incógnito.
• "Se ve en escritorio pero no en móvil." Normalmente un apple-touch-icon faltante o una ruta de manifest incorrecta. Los navegadores móviles priorizan sus propios iconos específicos de la plataforma sobre el genérico <link rel="icon">.
• "La búsqueda de Google muestra un globo genérico." O el favicon es demasiado pequeño (menos de 48x48), o el archivo no es rastreable (bloqueado por robots.txt, detrás de autenticación, devuelve content-type erróneo), o Google simplemente aún no ha recrastreado. La latencia de recrastreo para favicons es a menudo de semanas.
• "El icono de la pantalla de inicio tiene un cuadro blanco alrededor." Las imágenes apple-touch-icon no deben tener transparencia; iOS no aplana los fondos transparentes a tu color de tema, los deja blancos. Guárdalos con un fondo sólido que coincida con tu marca.
• "El icono se ve borroso en pantallas retina." Solo se sirve el pequeño favicon.ico. Los navegadores modernos usarán la versión SVG o PNG 96x96 si la declaras; comprueba que el HTML realmente incluye esas link tags.

Qué verifica InspectWP

La sección de favicon de un reporte de InspectWP verifica que se declara un favicon en el head HTML, que la URL /favicon.ico devuelve una respuesta válida, y que se ha establecido un apple-touch-icon para el soporte de pantalla de inicio iOS. Que falte cualquiera de estos es un hallazgo de baja severidad, pero el efecto acumulativo en las primeras impresiones (resultados de búsqueda, marcadores, pantalla de inicio móvil) es real. Un sitio que se ve pulido en todas partes excepto en su favicon parece inacabado. La buena noticia: es una configuración única que, bien hecha, no necesita tocarse nunca más.