App Icon vs Favicon: ¿Cuál es la Diferencia?
Se parecen, pero cumplen propósitos distintos. Aquí tienes cuándo usar cada uno y cómo trabajan juntos.
Comparación lado a lado
| Aspecto | Favicon | App icon |
|---|---|---|
| Uso principal | Pestañas del navegador, marcadores, resultados de búsqueda | Pantalla de inicio, alternador de apps, tiendas de apps |
| Dónde lo ven los usuarios | Navegadores de escritorio, navegadores móviles | Pantalla de inicio de iOS, launcher de Android |
| Tamaños típicos | 16x16, 32x32, 96x96px | 180x180, 192x192, 512x512px |
| Formato de archivo | ICO, PNG, SVG | PNG (a menudo maskable) |
| Definido en | Etiquetas <link> del HTML | manifest.json |
| Obligatorio para | Todos los sitios | PWAs, web apps instalables |
Qué es cada uno
Un favicon (abreviatura de "favorite icon") es el pequeño icono que aparece en las pestañas del navegador, los marcadores, el historial del navegador y los resultados de los motores de búsqueda. Es el identificador visual de tu sitio en el navegador.
Un app icon es el icono más grande que aparece en la pantalla de inicio del usuario cuando instala tu web app como una Progressive Web App (PWA). Representa tu app como una aplicación autónoma.
Dónde aparece cada uno
Favicon
Start hereTodo sitio necesita uno, sea PWA o no
- Identificación en la pestaña del navegador
- Reconocimiento visual en marcadores
- Identidad visual en el resultado de búsqueda
- Iconos en el historial del navegador
- Accesos directos de escritorio (Windows)
- Declarado en el HTML: <link rel="icon" href="/favicon.ico">
App icon
Solo aparece una vez que alguien instala la app
- Launcher de la pantalla de inicio
- Alternador de apps / multitarea
- Distintivos de notificación
- Listados en tiendas de apps
- Identidad visual en la splash screen
- Declarado en manifest.json: "icons": [{"sizes": "192x192"}]
Tamaños de favicon junto a tamaños de app icon
1. Requisitos de tamaño
Los favicons suelen ser pequeños (16x16 a 96x96px) porque aparecen en espacios compactos, como las pestañas del navegador. Necesitan ser reconocibles a tamaños diminutos.
Los app icons son mucho más grandes (180x180 a 512x512px) porque se muestran de forma destacada en las pantallas de inicio. Pueden incluir más detalle y a menudo se diseñan con variantes maskable para distintas formas de dispositivo.
2. Contexto de uso
Los favicons están siempre visibles durante la navegación: forman parte de la interfaz del navegador. Los usuarios los ven constantemente al alternar entre pestañas y sitios.
Los app icons solo aparecen tras la instalación. Representan tu app como una entidad autónoma, separada del navegador. Los usuarios los tocan para abrir tu app en modo pantalla completa.
3. Implementación técnica
Los favicons se declaran en el HTML usando etiquetas <link> en el head del documento. Se pueden especificar varios tamaños para distintos contextos.
Los app icons se definen en manifest.json, que es referenciado por el HTML. El manifest también incluye otros metadatos de PWA, como el nombre de la app, los colores de tema y el modo de visualización.
¿Necesitas ambos?
Sí, deberías tener ambos. Aquí está el porqué.
Los favicons son esenciales para todos los sitios: mejoran el reconocimiento de marca en las pestañas del navegador y en los resultados de búsqueda.
Los app icons son obligatorios si quieres que los usuarios instalen tu sitio como un PWA. Sin ellos, los avisos de instalación no aparecen y la experiencia en la pantalla de inicio será pobre.
Pueden compartir el mismo diseño, pero deben optimizarse para sus respectivos tamaños y contextos.
Consejos de diseño de favicon
Mantén los diseños simples: los detalles se pierden a 16px.
Usa mucho contraste para mayor visibilidad.
Prueba en varios tamaños (16x16, 32x32, 96x96).
Considera usar SVG para un escalado nítido.
Asegúrate de que funcione tanto en fondos claros como oscuros.
Consejos de diseño de app icon
Diseña para 192x192px como mínimo (512x512px recomendado).
Crea variantes maskable para Android.
Asegúrate de que la zona segura (el 80% interno) contenga los elementos críticos.
Usa una identidad visual consistente con tu favicon.
Prueba en dispositivos reales para obtener los mejores resultados.