Tamaños de favicon — Guía completa
Todos los tamaños de favicon que importan en 2026 — y los cuatro archivos que los cubren.
Sin registro, sin rastreoLas guías de favicon adoran listar quince tamaños y treinta etiquetas link, y la mayoría dejó de importar hace años. La respuesta honesta es más corta: cuatro archivos cubren todos los navegadores, todas las pantallas de inicio y los resultados de Google. Esta página es la tabla de consulta: para qué sirve cada tamaño, cuáles son legado y el HTML exacto para pegar.
Verificado contra el comportamiento actual de los navegadores en agosto de 2026. Si solo quieres los archivos, el generador de favicon de este sitio arma el .ico multitamaño y los PNG en tu navegador — sin subir nada y sin registrarte.
Los cuatro archivos que cubren todo
Un sitio moderno necesita exactamente cuatro archivos de icono: un favicon.ico en la raíz del sitio (16, 32 y 48 px dentro de un solo contenedor), un icono SVG para los navegadores que escalan, un apple-touch-icon de 180×180 para la pantalla de inicio de iOS, y un manifest que apunte a PNG de 192 y 512 px. Este es el HTML completo:
<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.webmanifest">Los navegadores que entienden SVG eligen el vector y se ven nítidos a cualquier densidad; los demás usan el .ico. iOS lee el apple-touch-icon y Android lee el manifest. El resto de esta página explica qué va dentro de esos archivos.
Tabla completa de tamaños de favicon
| Tamaño (px) | Archivo | Dónde aparece |
|---|---|---|
| 16 × 16 | favicon.ico | Pestaña del navegador, barra de direcciones, marcadores — el tamaño que la gente más ve. |
| 32 × 32 | favicon.ico | Pestañas en pantallas retina, accesos directos de la barra de tareas de Windows. |
| 48 × 48 | favicon.ico | Accesos directos del escritorio de Windows; también la unidad base que Google usa en los resultados de búsqueda. |
| 64–256 | favicon.ico (opcional) | Accesos directos e iconos de aplicación en pantallas de alta densidad. Útil, pero no requerido para la web. |
| 180 × 180 | apple-touch-icon.png | Pantalla de inicio de iPhone y iPad. Un solo archivo de 180 px cubre todos los dispositivos iOS modernos. |
| 192 × 192 | PNG del manifest | Icono de pantalla de inicio en Android Chrome. |
| 512 × 512 | PNG del manifest | Aviso de instalación de PWA y pantalla de arranque. |
| Cualquiera (vector) | icon.svg | Favicon escalable para Chrome, Edge y Firefox; nítido en cualquier pantalla. |
Tamaños legado que puedes saltarte en 2026: el juego antiguo de Apple (57, 72, 76, 114, 120, 144, 152 y 167 px) queda cubierto por el único icono de 180 px, porque iOS elige el icono más cercano por encima del que necesita. Los mosaicos de browserconfig.xml de Microsoft (70, 150, 310 px) murieron con Internet Explorer y el Edge clásico.
favicon.ico: sigue sin ser opcional
Todos los navegadores siguen pidiendo /favicon.ico en la raíz del sitio por defecto — antes de leer tu HTML, e incluso en páginas que declaran otros iconos. Si el archivo no existe, acumulas un chorro interminable de errores 404 en los registros, y cualquier cosa que busque iconos sin analizar el HTML (lectores RSS, rastreadores viejos, servicios de marcadores) muestra una hoja en blanco en vez de tu marca.
ICO es un formato contenedor, no una sola imagen: un .ico guarda varias resoluciones y quien lo consume elige la que quiere. El juego estándar para la web es 16 + 32 + 48. Si el mismo archivo va a servir como icono de aplicación de Windows, añade 256 — ese es el juego que Microsoft documenta para el Explorador y los iconos de app.
ICO vs PNG vs SVG
| Formato | Soporte | Úsalo para |
|---|---|---|
| ICO | Universal, incluidos los navegadores viejos y el propio Windows. | El favicon.ico de la raíz. El respaldo seguro que siempre funciona. |
| PNG | Universal en etiquetas link. | El apple-touch-icon y los iconos 192/512 del manifest. Simple y sin pérdida. |
| SVG | Chrome, Edge y Firefox. Safari todavía ignora los favicons SVG. | El favicon escalable moderno: un archivo diminuto, nítido donde tenga soporte. Mantén siempre un respaldo ICO o PNG para Safari. |
El favicon en los resultados de Google
Google muestra el favicon junto a los resultados en móvil y en escritorio, lo que convierte al favicon en un activo de búsqueda. Los requisitos documentados: el icono debe ser cuadrado, de al menos 8×8 px pero idealmente un múltiplo de 48×48 (Google lo reescala desde ahí), estar alojado en una URL estable que no cambie a menudo, y ser rastreable — si robots.txt bloquea el icono o la portada, Google muestra un globo genérico.
Un favicon.ico multitamaño que incluya 48×48 cumple esto automáticamente. Si cambiaste el icono y la búsqueda sigue mostrando el viejo, Google refresca los favicons en su propio calendario de rastreo — normalmente días o semanas; pedir un nuevo rastreo de la portada puede acelerarlo.
Errores frecuentes
- Usar el logo completo. A 16×16 un logotipo con texto se convierte en una mancha gris. Recorta hasta una letra, un símbolo o una forma fuerte antes de generar nada, y juzga la vista previa de 16 px: eso es lo que la gente ve.
- Servir solo un icono de 16 px. En pantallas retina se ve borroso; incluye siempre el de 32 px en el .ico.
- Publicar solo el SVG. Safari ignora por completo los favicons SVG — sin un respaldo ICO o PNG, los usuarios de Safari ven una hoja en blanco.
- Olvidar el archivo de la raíz. Aunque declares iconos en etiquetas link, /favicon.ico sigue dando 404 para todos los clientes que lo piden a ciegas.
- Ignorar el tema oscuro del navegador. Una marca casi negra desaparece sobre una barra de pestañas oscura. Prueba en ambos temas, o añade un contorno sutil o una forma de fondo.
- Mover la URL del icono en cada despliegue. Google asocia el favicon a una URL estable; una ruta con hash (icon.3f2a1.png) puede retrasar semanas la actualización del icono en los resultados.
Genera los archivos
El generador de favicon de este sitio convierte cualquier PNG, JPG, WebP o SVG en un favicon.ico multitamaño (de 16 a 256 px) más los PNG sueltos, todo en tu navegador — no se sube nada, sin cuenta y sin marca de agua. Para los PNG de 180, 192 y 512 px, el redimensionador de imágenes produce dimensiones exactas de la misma forma. Si tu logo no es cuadrado, recórtalo primero con el recortador de imágenes.