Favicon Sizes Guide: What Sizes Do You Really Need?
With so many devices, browsers, and platforms, favicon sizes can be confusing. Do you need 6 different files? Or can you get away with just one? This guide cuts through the noise.
The Complete Favicon Size Table
Size
File
Used By
Required?
16×16
favicon-16x16.png
Browser tabs (standard screens)
Recommended
32×32
favicon-32x32.png
Browser tabs (Retina/HiDPI), taskbar
Yes
48×48
favicon.ico (multi-size)
Windows desktop shortcut
Optional
180×180
apple-touch-icon.png
iOS home screen (iPhone/iPad)
Yes
192×192
android-chrome-192x192.png
Android home screen, PWA icon
Recommended
512×512
android-chrome-512x512.png
PWA splash screen, app stores
Recommended
The Minimal Setup (3 Files)
If you want to keep things simple, these 3 files cover 99% of real-world scenarios:
favicon.ico (32×32) — The universal fallback. Every browser supports it.
apple-touch-icon.png (180×180) — For iOS devices and some Android launchers.
site.webmanifest — Points to your 192×192 and 512×512 icons for PWA support.
Tip: Modern browsers actually prefer PNG over ICO. If you include a 32×32 PNG alongside the ICO, modern browsers will use the PNG for crisper rendering.
A common mistake is providing only a 512×512 icon and expecting browsers to scale it down. Here's why that's problematic:
Performance — A 512×512 PNG can be 50KB+. Browser tabs only need 16×16 (under 1KB). That's 50x more data than necessary.
Quality — Downscaling a complex logo from 512px to 16px often produces a blurry mess. Hand-optimized small icons look much better.
ICO compatibility — Older browsers and Windows shortcuts still expect ICO format.
Generate All Sizes from One Image
The good news: you don't need to manually create each size. Use the Image to Favicon tool on Mzu favicondl to upload one high-resolution image and automatically generate all the sizes listed above, packaged in a ready-to-use ZIP file.
Quick Reference Cheat Sheet
Platform
Size Needed
Format
Chrome/Firefox/Edge tab
32×32
PNG or ICO
Safari tab
32×32
PNG or ICO
Google Search results
≥48×48 (multiples of 48)
Any
iPhone/iPad home screen
180×180
PNG
Android home screen
192×192
PNG
Windows taskbar
32×32
ICO
macOS Dock (PWA)
512×512
PNG
Con tantos dispositivos, navegadores y plataformas, los tamaños de los favicon pueden ser confusos. ¿Necesitas 6 archivos diferentes? ¿O puedes arreglártelas con solo uno? Esta guía aclara todas tus dudas.
Tabla completa de tamaños de Favicon
Tamaño
Archivo
Usado por
¿Requerido?
16×16
favicon-16x16.png
Pestañas del navegador (pantallas estándar)
Recomendado
32×32
favicon-32x32.png
Pestañas del navegador (Retina/HiDPI), barra de tareas
Sí
48×48
favicon.ico (multi-tamaño)
Acceso directo de escritorio de Windows
Opcional
180×180
apple-touch-icon.png
Pantalla de inicio de iOS (iPhone/iPad)
Sí
192×192
android-chrome-192x192.png
Pantalla de inicio de Android, icono PWA
Recomendado
512×512
android-chrome-512x512.png
Pantalla de inicio de PWA, tiendas de aplicaciones
Recomendado
La configuración mínima (3 archivos)
Si quieres mantener las cosas simples, estos 3 archivos cubren el 99% de los escenarios del mundo real:
favicon.ico (32×32) — El respaldo universal. Todos los navegadores lo soportan.
apple-touch-icon.png (180×180) — Para dispositivos iOS y algunos lanzadores de Android.
site.webmanifest — Apunta a tus iconos de 192×192 y 512×512 para el soporte de PWA.
Consejo: Los navegadores modernos prefieren PNG sobre ICO. Si incluyes un PNG de 32×32 junto con el ICO, los navegadores modernos usarán el PNG para una renderización más nítida.
La configuración completa (6 archivos)
Para la mejor experiencia en todas las plataformas:
Un error común es proporcionar solo un icono de 512×512 y esperar que los navegadores lo escalen. Aquí te explicamos por qué esto es problemático:
Rendimiento — Un PNG de 512×512 puede pesar más de 50KB. Las pestañas del navegador solo necesitan 16×16 (menos de 1KB). Esto es 50 veces más datos de lo necesario.
Calidad — Reducir un logo complejo de 512px a 16px a menudo produce una imagen borrosa. Los iconos pequeños optimizados manualmente se ven mucho mejor.
Compatibilidad con ICO — Los navegadores antiguos y los accesos directos de Windows aún esperan el formato ICO.
Genera todos los tamaños a partir de una sola imagen
La buena noticia: no necesitas crear cada tamaño manualmente. Utiliza la herramienta Image to Favicon en Mzu favicondl para subir una imagen de alta resolución y generar automáticamente todos los tamaños listados arriba, empaquetados en un archivo ZIP listo para usar.
Hoja de referencia rápida
Plataforma
Tamaño Necesario
Formato
Pestaña de Chrome/Firefox/Edge
32×32
PNG o ICO
Pestaña de Safari
32×32
PNG o ICO
Resultados de búsqueda de Google
≥48×48 (múltiplos de 48)
Cualquiera
Pantalla de inicio de iPhone/iPad
180×180
PNG
Pantalla de inicio de Android
192×192
PNG
Barra de tareas de Windows
32×32
ICO
Dock de macOS (PWA)
512×512
PNG
수많은 기기, 브라우저, 플랫폼으로 인해 favicon 크기는 혼란스러울 수 있습니다. 6가지 다른 파일이 필요한가요? 아니면 하나로 충분할까요? 이 가이드가 그 혼란을 해결해 드립니다.
완벽한 Favicon 크기 표
크기
파일
사용처
필수 여부?
16×16
favicon-16x16.png
브라우저 탭 (표준 화면)
권장
32×32
favicon-32x32.png
브라우저 탭 (Retina/HiDPI), 작업 표시줄
예
48×48
favicon.ico (멀티 사이즈)
Windows 바탕 화면 바로 가기
선택 사항
180×180
apple-touch-icon.png
iOS 홈 화면 (iPhone/iPad)
예
192×192
android-chrome-192x192.png
Android 홈 화면, PWA 아이콘
권장
512×512
android-chrome-512x512.png
PWA 스플래시 화면, 앱 스토어
권장
최소 설정 (3개 파일)
간단하게 유지하고 싶다면, 이 3개 파일로 실제 시나리오의 99%를 커버할 수 있습니다:
favicon.ico (32×32) — 보편적인 대체 파일입니다. 모든 브라우저가 지원합니다.
apple-touch-icon.png (180×180) — iOS 기기 및 일부 Android 런처용입니다.
site.webmanifest — PWA 지원을 위해 192×192 및 512×512 아이콘을 가리킵니다.