Tamaños óptimos de favicon en 2026 — ICO multi-tamaño + apple-touch-icon + SVG, el stack moderno
Tomoda HinataAutor y mantenedor de la herramientaPublicado el 26 abr 20264 min de lectura
Antes bastaba un 16×16 favicon.ico en la raíz; el stack moderno espera ICO multi-tamaño (16/32/48), apple-touch-icon para iOS, SVG favicon vectorial y, opcional, iconos de manifest para PWA.
Herramientas usadas en esta guía
Qué tamaños usa la pestaña moderna
Chrome/Edge 16/32, Firefox 16/32, Safari 16 en pestaña 32 en bookmark, barra de tareas Windows 48. ICO con 16/32/48 sirve.
Por qué apple-touch-icon no es opcional
iOS toma una miniatura de la página si no hay; 180×180 es la diana nativa.
SVG favicon — vector + modo oscuro gratis
Firefox 41+/Chrome 80+/Safari 9+/Edge 80+. SVG con `prefers-color-scheme` cambia con el OS.
PWA — iconos de manifest
192/512 PNG en manifest.webmanifest.
Setup mínimo moderno
head: SVG → ICO → apple-touch-icon → manifest (PWA).
Pasos
Aprox. 1 minPNG 512×512 cuadrado
Cuadrado obligatorio.
ICO multi-tamaño
16/32/48 unidos.
apple-touch-icon
180×180 PNG, sin redondear (iOS lo hace).
Colocar en root
Linkar en head como arriba.
| Asset | Tamaño | Uso |
|---|---|---|
| favicon.ico (16+32+48) | 5–8 KB | Pestañas/marcadores |
| favicon.svg | 1–4 KB | Vector + modo oscuro |
| apple-touch-icon.png | 8–15 KB | iOS |
| icon-192.png | 10–18 KB | PWA Android |
| icon-512.png | 25–60 KB | PWA splash |
Preguntas frecuentes
¿Sigue haciendo falta el ICO si tengo SVG?
Sí, navegadores antiguos y previews lo esperan.
¿Por qué 180×180?
Es el target nativo del iPhone HiDPI.
¿Incluyo 64?
Opcional; si IE <0.1%, omite.
¿Cómo hacer SVG dark-mode?
`<style>` con `prefers-color-scheme` y clases.
¿ICO con alpha?
Sí, ICO moderno.
¿Se suben archivos?
No.
Probar ahora
Turn any image into a multi-size ICO file
ICO / Favicon MakerEste artículo incluye traducción asistida por IA. Avísanos si encuentras errores.