¿Qué tamaño debe tener un favicon?
Elegir el tamaño correcto del favicon es esencial para que se muestre bien en todos los navegadores, dispositivos y plataformas.
Esta guía explica los tamaños de favicon recomendados y cuándo usar cada formato.
Todos los tamaños de favicon de un vistazo
Esta tabla resume todos los tamaños de favicon que deberías incluir con tu sitio web.
| Tamaño | Formato | Propósito |
|---|---|---|
| 16×16 | favicon-16x16.png | Pestaña del navegador |
| 32×32 | favicon-32x32.png | Barra de tareas |
| 48×48 | favicon-48x48.png | Acceso directo de escritorio |
| 180×180 | apple-touch-icon.png | Pantalla de inicio de iOS |
| 192×192 | android-chrome-192x192.png | Android / PWA |
| 512×512 | android-chrome-512x512.png | Instalación PWA y bienvenida |
| Cualquiera | favicon.svg | Navegadores modernos, escalable |
| Multi-tamaño | favicon.ico | Compatibilidad con navegadores antiguos |
Respuesta rápida
Respuesta corta:
Los tamaños de favicon recomendados son 16×16, 32×32, y 48×48 para navegadores, 180×180 para dispositivos Apple, y 192×192 y 512×512 para Android y apps PWA.
Tamaños de favicon para navegadores
Los favicons de navegadores de escritorio y móviles deben incluir varios tamaños para garantizar la compatibilidad.
| Tamaño | Archivo | Uso |
|---|---|---|
| 16×16 | favicon-16x16.png | Pestañas del navegador |
| 32×32 | favicon-32x32.png | Barras de tareas e interfaz |
| 48×48 | favicon-48x48.png | Accesos directos de escritorio |
| Multi-tamaño | favicon.ico | Compatibilidad con navegadores antiguos |
Tamaños de Apple Touch Icon
Los dispositivos Apple requieren iconos más grandes para los accesos directos de la pantalla de inicio.
| Tamaño | Archivo | Dispositivo |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Tamaños de iconos para Android y PWA
Las Progressive Web Apps y Chrome para Android requieren dimensiones de icono específicas.
| Tamaño | Archivo | Uso |
|---|---|---|
| 192×192 | android-chrome-192x192.png | Icono de pantalla de inicio |
| 512×512 | android-chrome-512x512.png | Lanzador de apps y pantalla de bienvenida |
Estos tamaños son necesarios para superar las comprobaciones de instalación de PWA.
Tamaño del favicon SVG
Los favicons SVG están basados en vectores y no requieren un tamaño fijo.
Recomendado:
- Usar un viewBox cuadrado (p. ej. 0 0 100 100)
- Mantener el dibujo centrado
- Evitar detalles excesivos
Los favicons SVG escalan perfectamente en pantallas de alta densidad y con zoom.
¿Qué formatos de favicon debería usar?
| Formato | Cuándo usar |
|---|---|
| PNG | El más común, amplia compatibilidad |
| ICO | Windows y navegadores antiguos |
| SVG | Navegadores modernos, escalable |
Mejor práctica: usa PNG + ICO + SVG juntos.
favicon.ico vs PNG vs SVG
Cada formato de favicon tiene una función diferente. Así puedes elegir.
| Formato | Ideal para |
|---|---|
| favicon.ico | Máxima compatibilidad con navegadores antiguos y Windows. Agrupa 16×16, 32×32 y 48×48 en un solo archivo. |
| PNG | El estándar moderno para pestañas y marcadores. Nítido en pantallas de alta densidad y fácil de crear. |
| SVG | Favicon vectorial que escala a cualquier tamaño, admite modo oscuro y está preparado para el futuro. |
Recomendación: Incluye los tres: favicon.ico para compatibilidad con navegadores antiguos, PNG para las pestañas diarias y SVG para pantallas de alta densidad y modo oscuro.
Tamaños de favicon por plataforma
Resumen de una línea de lo que espera cada plataforma.
- Chrome: PNG de 16×16 y 32×32; recurre a favicon.ico como alternativa
- Firefox: PNG o ICO de 16×16
- Safari: PNG de 16×16; las pestañas fijadas usan favicon.svg
- Edge: PNG o ICO de 16×16, 32×32 y 48×48
- Windows: favicon.ico con 16×16, 32×32 y 48×48; la barra de tareas usa 32×32
- Android: PNG de 192×192 y 512×512 a través del web manifest
- iOS: apple-touch-icon.png a 180×180 (152×152 iPad, 167×167 iPad Pro)
- PWA: PNG de 192×192 y 512×512 más un site.webmanifest
Código HTML recomendado
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Errores comunes de favicon
- Usar solo un tamaño de favicon
- Olvidar los Apple Touch Icons
- Faltan los iconos PWA
- Usar imágenes de origen de baja resolución
Genera todos los tamaños de favicon automáticamente
En lugar de redimensionar iconos manualmente, puedes generar todos los tamaños de favicon necesarios al instante con favicon.pub. Sube una sola imagen y descarga un paquete completo con ICO, PNG, SVG, Apple Touch Icons, iconos de Android y un manifiesto PWA.
Enlaces internos
Preguntas frecuentes
¿Cuál es el tamaño estándar de un favicon?
Los favicons de navegador suelen ser de 16×16 y 32×32. Los dispositivos Apple usan 180×180 y Android/PWA usan 192×192 y 512×512.
¿Necesito varios tamaños de favicon?
Sí. Diferentes navegadores y dispositivos solicitan tamaños distintos, así que incluir un conjunto completo (ICO, PNG, SVG, Apple Touch y Android) garantiza que tu sitio se vea bien en todas partes.
¿Qué es el tamaño de icono maskable?
Los iconos maskable para los avisos de instalación PWA deben ser de 512×512 con una zona segura: mantén el dibujo importante dentro del círculo central del 80 % para que no se recorte.
¿Debo usar favicon.ico o PNG?
Usa ambos. Hoy los navegadores prefieren PNG, pero favicon.ico sigue siendo la alternativa más compatible para Windows y navegadores antiguos.
About This Tool
This page provides original, human-reviewed information about favicon sizes and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.