Para añadir un favicon a tu sitio web, coloca un pequeño conjunto de archivos de icono en la raíz del sitio y haz referencia a ellos en el <head> del HTML con etiquetas <link>, luego apunta un pequeño manifiesto web a los iconos más grandes de la PWA. Ese es todo el trabajo en 2026, y es más que la única línea de 16x16 que muestran la mayoría de los tutoriales. Aquí te explicamos exactamente cómo añadir un favicon a tu sitio web para que aparezca en las pestañas del navegador, marcadores, pantallas de inicio de iOS e iconos de aplicaciones de Android, además de la solución para el favicon que se niega obstinadamente a aparecer.
La mayoría de las guías se detienen en una etiqueta link rel="icon" y lo dan por terminado. Esa etiqueta funciona para una pestaña del navegador de escritorio y nada más. Los dispositivos modernos solicitan una familia completa de tamaños y formatos, y si los omites obtienes un icono de pestaña borroso, un cuadrado gris genérico en un iPhone o ningún icono de PWA. Esta guía te proporciona el paquete completo de archivos, el fragmento exacto para el <head> y el truco de caché que resuelve la queja más común sobre los favicons.
Lo que realmente necesita un favicon en 2026#
Antes, un favicon era un solo archivo .ico de 16x16 píxeles. Esa época terminó. El icono de la pestaña del navegador es ahora solo uno de los varios lugares donde aparece el icono de tu sitio, y cada superficie espera un archivo diferente.
Esto es lo que solicita un icono hoy y lo que cada uno espera:
- Las pestañas y marcadores del navegador de escritorio quieren un ICO pequeño (16x16 y 32x32) más, idealmente, un SVG escalable.
- Los navegadores modernos prefieren un favicon SVG nítido que se adapte a cualquier DPI sin desenfocar.
- Safari en iOS (pantalla de inicio y accesos directos) quiere un PNG de 180x180 sin transparencia, llamado apple touch icon.
- Chrome en Android y PWAs leen un
site.webmanifesty obtienen iconos PNG de 192x192 y 512x512, incluyendo una variante enmascarable.
La buena noticia: no tienes que dibujar todo esto a mano. Diseñas una imagen maestra cuadrada (512x512 o más grande, idealmente con fondo transparente) y exportas el conjunto completo a partir de ella. Un generador de favicons gratuito toma esa única imagen de origen y produce cada tamaño, el ICO, el SVG, el manifiesto y el fragmento de cabecera en un solo paso, que es la ruta más rápida a través de todo este proceso.
Consejo clave: diseña tu icono como una forma simple y audaz que se lea a 16x16. Los detalles finos y el texto pequeño desaparecen a escala de favicon. Una sola letra, un monograma o un glifo fuerte superan a un logotipo completo reducido cada vez.
Los archivos exactos que necesitas#
Antes de tocar HTML, coloca estos archivos en el directorio raíz de tu sitio (la misma carpeta que tu index.html o tu carpeta public/ en un framework). Este es el conjunto moderno mínimo que cubre todos los dispositivos.
| Archivo | Tamaño/Formato | Qué sirve |
|---|---|---|
favicon.ico | 16x16 + 32x32, ICO multiresolución | Navegadores antiguos, icono de pestaña predeterminado |
favicon.svg | Vector escalable | Navegadores modernos, nítido en cualquier DPI |
apple-touch-icon.png | 180x180 PNG, opaco | Pantalla de inicio de iOS y accesos directos |
icon-192.png | 192x192 PNG | Pantalla de inicio de Android, PWA |
icon-512.png | 512x512 PNG | Pantalla de inicio de PWA, tiendas de aplicaciones, adaptable |
site.webmanifest | JSON | Indica a Android/PWA qué iconos usar |
Dos detalles importan más de lo que la gente espera. El favicon.ico debe ser un ICO multiresolución real que contenga marcos de 16x16 y 32x32, no un PNG renombrado, para que los navegadores puedan elegir el tamaño correcto. Y el icono de Apple Touch debe ser opaco con un fondo sólido, porque iOS no respeta la transparencia y rellenará las áreas transparentes con negro, arruinando tu icono.
Por qué favicon.ico vs SVG no es una elección excluyente#
La gente trata favicon.ico versus SVG como una elección. No lo es. Envías ambos y dejas que cada navegador tome lo que entienda.
- SVG es el futuro: un solo archivo, infinitamente escalable, compatible con adaptación al modo oscuro mediante una consulta de medios dentro del SVG. Los navegadores modernos lo prefieren.
- ICO es la red de seguridad: los navegadores antiguos, algunos lectores de feeds y ciertas plataformas aún solicitan
/favicon.icopor nombre incluso si nunca lo enlazas.
Servir ambos te cuesta unos pocos kilobytes y garantiza un icono nítido en todas partes. Si solo envías uno, envía el ICO por compatibilidad, pero la mejor práctica moderna es ambos.
Cómo Agregar un Favicon a tu Sitio Web Paso a Paso#
Este es el procedimiento completo desde un <head> vacío hasta un favicon que funciona en todos los dispositivos. Sigue el orden indicado.
Paso 1: Crea tu imagen maestra del icono#
Comienza con una sola imagen cuadrada de 512x512 píxeles o más grande, con fondo transparente (PNG o SVG). Mantén el diseño simple y de alto contraste para que sobreviva al ser reducido a 16 píxeles. Si tu logotipo es ancho o detallado, crea una marca cuadrada simplificada solo para el favicon. Puedes redimensionar y cuadrar cualquier arte fuente con un redimensionador de imágenes gratuito antes de exportar.
Paso 2: Genera todos los tamaños y formatos#
Introduce tu imagen maestra en un generador de favicons para producir el ICO, el SVG, el icono táctil de Apple de 180x180, los PNG de 192 y 512, y el manifiesto. Hacer esto manualmente en un editor de imágenes es lento y propenso a errores, especialmente el ICO multiresolución, que la mayoría de los editores no pueden exportar correctamente. El generador de favicons de Molixa genera el paquete completo más un fragmento de cabecera listo para pegar. Si ya tienes un logotipo vectorial, también puedes convertirlo limpiamente con un convertidor de SVG a PNG para obtener iconos PNG perfectos en cada tamaño.
Paso 3: Sube los archivos a la raíz de tu sitio#
Coloca todos los archivos generados en la raíz o directorio público de tu sitio para que sean accesibles en URLs como https://tusitio.com/favicon.ico y https://tusitio.com/site.webmanifest. La ruta /favicon.ico en particular debe resolverse en la raíz, porque algunos clientes la obtienen allí automáticamente independientemente de tu HTML.
Paso 4: Agrega las etiquetas de enlace en el head de tu HTML#
Pega este bloque dentro del <head> de cada página (o en tu diseño/plantilla compartida para que se aplique en todo el sitio):
<!-- ICO clásico para navegadores antiguos -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- SVG escalable moderno -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Pantalla de inicio de iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Manifiesto PWA / Android -->
<link rel="manifest" href="/site.webmanifest">
Este es el conjunto moderno completo de enlaces de favicon. El navegador lee todos estos y elige la mejor coincidencia para su contexto. No necesitas una etiqueta separada para cada tamaño PNG, porque el manifiesto maneja los iconos de Android y PWA.
Paso 5: Crea el manifiesto web#
El site.webmanifest es un pequeño archivo JSON que indica a los instaladores de Android y PWA qué iconos usar. Una versión mínima y correcta se ve así:
{
"name": "Nombre de tu Sitio",
"short_name": "TuSitio",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
],
"theme_color": "#ffffff",
"display": "standalone"
}
La entrada purpose: "maskable" es la que la mayoría de las configuraciones olvidan. Android recorta los iconos en círculos, cuadrados redondeados y rectángulos redondeados según el dispositivo. Un icono enmascarable tiene relleno (una zona segura) para que el recorte nunca corte tu logotipo. Sin él, Android puede encoger tu icono dentro de un cuadro blanco o cortar los bordes.
Paso 6: Despliega y verifica en dispositivos reales#
Sube tus cambios, luego verifica el favicon en una pestaña de escritorio, en un iPhone (agregar a pantalla de inicio) y en Android (instalar o agregar a pantalla de inicio). Si no aparece de inmediato, casi siempre es caché, no un error de código, lo cual cubre la siguiente sección.
Por qué tu favicon no se muestra (la solución real)#
Esta es la parte que todos los tutoriales básicos omiten, y es la razón número uno por la que la gente cree que hizo mal la configuración. Tu HTML probablemente está bien. El problema es que los navegadores almacenan en caché los favicons de forma muy agresiva, más que casi cualquier otro recurso.
Cuando un navegador carga tu favicon antiguo (o la ausencia de uno), puede conservar ese resultado durante días, ignorando tu nuevo archivo incluso después de una actualización normal de la página. Así que subes un icono nuevo y bonito, recargas y aún ves el antiguo o un globo en blanco. Así es como romper la caché, en orden de esfuerzo:
- Actualización forzada de la página con Ctrl+Shift+R (Windows) o Cmd+Shift+R (Mac). Esto limpia muchas, pero no todas, las cachés de favicon.
- Agrega una cadena de consulta de versión al enlace, como
href="/favicon.ico?v=2". Aumenta el número cada vez que cambies el icono y el navegador lo tratará como un archivo nuevo. - Visita la URL del favicon directamente en la barra de direcciones (
tusitio.com/favicon.ico) y actualiza forzadamente esa página para forzar una nueva descarga. - Prueba en una ventana de incógnito/privada, que ignora la caché de favicon existente, para confirmar que el nuevo icono está realmente activo.
- Borra las imágenes en caché en la configuración de tu navegador si todo lo demás falla en tu propia máquina.
Advertencia: no pierdas una hora reescribiendo tus etiquetas de enlace porque el icono "no se actualiza". Abre primero una ventana privada. Si el favicon se muestra allí, tu código es correcto y solo estás luchando contra una caché obsoleta en tu perfil normal.
El truco de la cadena de consulta de versión (?v=2) es el movimiento profesional. Garantiza que la próxima vez que rediseñes tu icono, cada visitante que regrese obtenga el nuevo en lugar de una reliquia en caché. Agrégala desde el primer día y nunca más depurarás un favicon fantasma.
Nota sobre transparencia y fondos#
Dos reglas de transparencia confunden a la gente. El icono de apple touch debe ser opaco, así que dale un color de fondo sólido que coincida con tu marca. El favicon SVG y los PNG de la pestaña del navegador pueden mantener un fondo transparente, lo que se ve más limpio tanto en navegadores claros como oscuros. Confundir estos causa el clásico error de "cuadro negro en iPhone", donde un icono de apple touch transparente se rellena de negro.
Favicons en Frameworks (Next.js, Vite, WordPress)#
Las etiquetas link son las mismas en todas partes, pero dónde colocarlas varía según el stack.
- Next.js (App Router): coloca
favicon.ico,icon.svgyapple-icon.pngen el directorioapp/y Next genera las etiquetas automáticamente. Para el manifiesto, añade unmanifest.tso unsite.webmanifestestático enapp/. - Vite / HTML plano: pon los archivos en
public/y pega el bloque de links en el<head>de tuindex.html. Vite sirvepublic/en la raíz del sitio. - WordPress: usa la función de Icono del Sitio en Apariencia, Personalizar, Identidad del Sitio para lo básico, o añade el bloque completo de links mediante el
header.phpde tu tema o un plugin de inyección en el head para tener control total. - Generadores de sitios estáticos (Astro, Hugo, Eleventy): coloca los archivos en la carpeta static/public y añade el bloque de links a tu layout base para que cada página lo herede.
Sea cual sea el framework, el requisito subyacente no cambia: los archivos de icono deben resolverse en URLs de nivel raíz, y el head debe referenciarlos. Si estás comprimiendo esos iconos PNG para mantenerlos pequeños, hazlo sin pérdida de calidad usando un compresor de imágenes gratuito para que el icono de 512x512 se mantenga nítido en las pantallas de inicio de PWA.
Preguntas Frecuentes#
¿Cuál es el HTML mínimo para agregar un favicon a un sitio web?
Como mínimo, coloca un favicon.ico en la raíz de tu sitio y agrega <link rel="icon" href="/favicon.ico"> en tu <head>. Esto cubre la pestaña básica del navegador de escritorio, pero deja sin configurar los iconos de iOS, Android y PWA. Por lo tanto, para cualquier sitio real, debes agregar el SVG, el icono táctil de Apple y las etiquetas del manifiesto mostradas arriba.
¿Todavía necesito un archivo favicon.ico en 2026, o el SVG es suficiente?
Debes incluir ambos. El SVG es más nítido y escala perfectamente en navegadores modernos, pero algunos navegadores y clientes antiguos aún solicitan /favicon.ico por nombre. Mantener un ICO multiresolución como respaldo garantiza un icono en todas partes, y solo cuesta unos pocos kilobytes incluirlo.
¿Por qué mi favicon funciona en modo incógnito pero no en una ventana normal?
Esto se debe al almacenamiento en caché del favicon, no a un error de código. Tu perfil normal del navegador tiene una versión en caché desactualizada, mientras que la ventana privada obtiene la nueva. Actualiza forzadamente, agrega una cadena de versión ?v=2 a tu etiqueta de enlace, o borra las imágenes en caché para forzar la actualización. Si se muestra en incógnito, tu HTML es correcto.
¿Qué tamaño debe tener el icono táctil de Apple y la transparencia importa? Usa un PNG de 180x180 con un fondo sólido y opaco. iOS no admite transparencia en los iconos de la pantalla de inicio y llenará cualquier área transparente con negro, lo que arruina la apariencia. Dale un fondo del color de tu marca para que se vea intencional en la pantalla de inicio.
¿Qué es un icono enmascarable y necesito uno?
Un icono enmascarable es un icono de PWA con relleno adicional (una zona segura) para que Android pueda recortarlo en un círculo, cuadrado redondeado o cuadrado redondeado sin recortar tu logotipo. Se declara en el manifiesto con "purpose": "maskable". Si tu sitio se puede instalar como PWA o agregar a la pantalla de inicio de Android, necesitas uno para evitar un icono recortado o encajonado.
¿Cómo genero todos los tamaños de favicon sin un editor de imágenes?
Sube una imagen maestra cuadrada (512x512 o más grande) a un generador de favicons y exportará el ICO, SVG, icono táctil de Apple, PNGs de PWA y manifiesto en un solo paso, junto con el fragmento de código para el <head>. Esto evita la tarea manual más difícil, construir un ICO multiresolución correcto, que la mayoría de los editores de imágenes no pueden exportar adecuadamente.
Cómo agregar un favicon a tu sitio web de forma correcta#
Saber cómo agregar un favicon a tu sitio web en 2026 va más allá del simple archivo de 16x16: incluye el ICO y SVG para navegadores, un icono opaco de apple touch para iOS, PNGs de 192 y 512 más un icono adaptable en un manifiesto web para Android y PWAs, y referéncialos todos en tu <head>. Genera el paquete completo a partir de una imagen maestra, agrega ?v=2 a tus etiquetas de enlace para que los cambios futuros invaliden la caché, y verifica en dispositivos reales. Hazlo una vez y tu ícono se verá nítido en cada pestaña, marcador y pantalla de inicio, sin tener que depurar un favicon fantasma en el futuro.
