Favicon: qué tamaños necesitas de verdad
Cuántos archivos hace falta generar, qué etiquetas poner en el HTML y por qué tu favicon no aparece aunque esté bien subido.
Un favicon completo necesita apenas cinco archivos: un favicon.ico clásico en la raíz, un PNG de 32 px, un icono de 180 px para la pantalla de inicio de iOS, dos PNG (192 y 512 px) para el manifiesto de Android y PWA, y opcionalmente un SVG que escala sin generar tamaños intermedios. Nada de las listas de veinte archivos que todavía circulan por foros y tutoriales antiguos. Puedes generar el conjunto completo de favicon de un solo golpe con la herramienta de Docuboxer, que procesa la imagen en tu navegador sin subirla a ningún servidor.
El conjunto mínimo que cubre todo
De la veintena de tamaños que circulan por listas antiguas, esto es lo que un sitio moderno usa de verdad:
- favicon.ico (raíz, 16–48 px): el único archivo que navegadores y gestores de marcadores piden por convención de ruta, sin que tu HTML lo declare. Debe vivir en
/favicon.ico, no en una subcarpeta. - icon-32.png: el que usan la mayoría de navegadores modernos en la pestaña cuando no hay SVG disponible.
- apple-touch-icon.png (180×180): el icono que Safari en iOS muestra cuando alguien añade tu web a la pantalla de inicio. Sin fondo transparente: iOS lo compone sobre un fondo sólido y las zonas transparentes se ven mal.
- icon-192.png e icon-512.png: referenciados desde el
manifest.json, los usa Android para el icono de instalación de la PWA y para la pantalla de carga. - icon.svg (opcional): un solo archivo vectorial que cubre cualquier densidad de pantalla en los navegadores que lo soportan, con PNG como respaldo para el resto.
Las etiquetas <link> que van en el <head>
Generar los archivos es la mitad del trabajo; la otra mitad es declararlos:
<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.json">
El orden importa poco, pero la presencia de las cuatro sí: si falta el apple-touch-icon, iOS recorta tu propia captura de pantalla como icono de acceso directo, casi siempre con resultados feos.
El manifest.json y los iconos de Android/PWA
El manifest.json es el archivo que le dice a Android (y a cualquier navegador con soporte de PWA) qué icono mostrar al instalar tu sitio como app. Necesita un array icons con al menos las entradas de 192 y 512 px, cada una con su src, sizes y type. El de 512 px también sirve como pantalla de carga mientras la PWA arranca, así que conviene que sea una versión limpia del logo y no un recorte forzado del de 192.
Por qué el .ico puede llevar varios tamaños en un solo archivo
A diferencia de un PNG, el formato ICO es un contenedor: un mismo archivo favicon.ico puede llevar dentro varias resoluciones (16×16, 32×32, 48×48) y el sistema operativo o el navegador elige cuál pintar según el contexto. Es una herencia de Windows de los años 90, pero sigue siendo el motivo por el que un solo .ico se ve nítido tanto en una pestaña pequeña como en un acceso directo de escritorio más grande.
Diseñar para 16 px: la prueba que de verdad importa
El logo completo de tu marca —con texto, degradados o varios elementos— casi nunca se lee a 16 px, que es el tamaño real en el que la mayoría de la gente ve tu favicon la mayor parte del tiempo. La regla práctica es reducir el diseño a una sola forma simple, de alto contraste y sin texto: si tu logo tiene texto, quédate solo con el símbolo. Antes de generar el resto de tamaños, mira tu diseño en miniatura real, no en el lienzo grande donde todo se ve bien. Si partes de un logo en SVG, puedes convertirlo primero a PNG de alta resolución y ajustar el encuadre antes de reducirlo.
El favicon en tema oscuro
Un problema que aparece constantemente y casi nunca en las guías: un icono de color oscuro sobre fondo transparente desaparece cuando el navegador cambia a modo oscuro, porque la pestaña pasa a tener fondo oscuro también. La solución rápida es diseñar con un contorno o relleno que funcione sobre fondo claro y oscuro a la vez. La solución completa es declarar dos iconos distintos con media="(prefers-color-scheme: dark)" en la etiqueta <link>, aunque el soporte de esta técnica todavía varía entre navegadores.
Por qué no aparece aunque esté bien subido
Es la búsqueda más frecuente sobre este tema, y casi nunca es un problema del archivo en sí:
- Caché del navegador: el favicon es de los recursos que más agresivamente cachean Chrome y Firefox, a veces durante semanas independientemente de las cabeceras de caché que envíe tu servidor. Probar en una ventana de incógnito o borrar el historial de esa web es la forma más rápida de confirmar si el problema es solo caché.
- Ruta incorrecta: el archivo debe estar exactamente donde tu
<link>(o la convención/favicon.ico) lo espera. Una subcarpeta distinta o un despliegue que no copió el archivo a la raíz es la segunda causa más común. - Tipo MIME mal servido: algunos hostings sirven
.icocomotext/plainoapplication/octet-streamen lugar deimage/x-icon, y el navegador lo descarta silenciosamente. - CDN cacheando la versión anterior: si tienes un CDN delante, puede seguir sirviendo el favicon viejo aunque el origen ya tenga el nuevo. Hace falta invalidar esa ruta específica manualmente en la mayoría de proveedores.
- Cómo forzar el refresco para comprobarlo: añade un parámetro de versión a la URL del icono (
/favicon.ico?v=2), revisa la pestaña Network de las herramientas de desarrollador para confirmar qué está sirviendo realmente el servidor, y actualiza esa referencia cada vez que cambies el archivo.
Genera el conjunto en un minuto
Si tu logo original es un PNG grande o una captura, redimensiónalo primero a un cuadrado limpio antes de generar el favicon; partir de un recorte torcido se nota mucho más a 16 px que a tamaño completo. Y si necesitas ajustar los colores para que el icono aguante bien en tema claro y oscuro a la vez, la herramienta de extracción de paleta te ayuda a identificar los tonos dominantes de tu marca antes de simplificar el diseño.
Preguntas frecuentes
¿Cuántos tamaños de favicon necesito realmente?
Con cinco archivos cubres cualquier navegador y dispositivo moderno: un favicon.ico en la raíz (compatibilidad clásica), un PNG de 32 px, un apple-touch-icon de 180 px para iOS, y dos PNG de 192 y 512 px para el manifest.json de Android y PWA. Un SVG opcional resuelve pantallas de alta densidad sin generar más tamaños.
¿Por qué mi favicon no aparece aunque ya lo haya subido?
La causa más común es la caché del navegador: los favicons están entre los recursos que Chrome y Firefox cachean de forma más agresiva, a veces durante semanas. Otras causas frecuentes son una ruta incorrecta, un tipo MIME mal servido por el hosting, o una CDN sirviendo todavía la versión anterior.
¿El favicon.ico en la raíz sigue siendo necesario en 2026?
Sí. Muchos navegadores y gestores de marcadores piden /favicon.ico directamente aunque tu HTML no lo declare con ninguna etiqueta <link>. Es la única pieza del conjunto que sigue funcionando por convención de ruta en lugar de por declaración explícita.
¿Qué diferencia hay entre el apple-touch-icon y los iconos del manifest.json?
El apple-touch-icon de 180 px lo usa Safari en iOS para el icono de pantalla de inicio cuando alguien añade tu web como acceso directo. Los iconos de 192 y 512 px del manifest.json los usa Android y cualquier navegador que soporte PWA, tanto para el icono de instalación como para la pantalla de carga.
¿Cómo diseño un favicon que se lea bien en 16 px?
Reduce tu marca a una sola forma simple, sin texto y con alto contraste: a 16 px cualquier detalle fino, degradado sutil o letra pequeña se convierte en una mancha borrosa. Prueba el diseño en miniatura antes de generar el resto de tamaños, porque un favicon que solo se ve bien en 512 px falla en el único tamaño donde la gente lo ve de verdad.
¿Necesito una versión distinta del favicon para tema oscuro?
Si tu icono es de color oscuro sobre fondo transparente, sí: con la barra de pestañas en modo oscuro se vuelve prácticamente invisible. La solución más simple es un contorno o relleno claro que aguante ambos fondos; la más completa es declarar dos iconos con el atributo media y prefers-color-scheme.
Genera tu favicon completo ahora
Todos los tamaños, el manifest.json y las etiquetas listas para pegar. Gratis y 100% local.
Abrir Generar favicon →Herramientas relacionadas
- Generar favicon — Todos los tamaños y el manifest.json en un solo paso.
- Convertir SVG — Pasa tu logo vectorial a PNG de alta resolución.
- Redimensionar imagen — Ajusta y recorta antes de generar el favicon.
- Extraer paleta de colores — Identifica los tonos dominantes de tu marca.
También te puede interesar: herramientas SEO gratuitas y 13 herramientas para developers que respetan tu privacidad.