Icono de aplicación: en qué se diferencia de un favicon
Un icono de aplicación es la imagen que representa una app instalada en una pantalla de inicio, un lanzador, un dock o un conmutador de apps, a diferencia de un favicon, que representa un sitio dentro de un navegador. En la web el mismo diseño sirve para ambos: iOS toma el icono de la app de la etiqueta link apple-touch-icon, mientras que Android y las PWA de escritorio lo toman del array icons del manifiesto de aplicación web. Cada plataforma lo recorta y enmascara a su propia forma, así que el diseño tiene que estar dibujado para sobrevivir a eso.
Mismo diseño, distinto trabajo
Un favicon vive dentro del chrome del navegador, a 16 o 32 píxeles, junto a un título de página que carga con la mayor parte del significado. Un icono de aplicación vive en una pantalla de inicio a 100 píxeles o más, por sí solo, junto a una docena de competidores, y es lo único que te identifica. Recibe más espacio y más escrutinio.
La diferencia práctica es de dónde lo lee la plataforma y qué le hace después. Los navegadores dibujan un favicon tal cual se proporciona. Los sistemas operativos recortan los iconos de app a una forma, añaden una sombra y a veces los tiñen o atenúan, así que una marca que llega hasta el borde del lienzo se recorta.
De dónde lee cada plataforma el icono de aplicación
| Plataforma | Origen | Tamaño a incluir |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | 180x180 PNG, opaco |
| Android | Array icons del manifiesto | PNG de 192x192 y 512x512 |
| PWA de escritorio | Array icons del manifiesto | PNG de 512x512 |
| Máscara de forma del lanzador de Android | Entrada del manifiesto con purpose maskable | PNG de 512x512, zona segura del 80% |
| Acceso directo de Windows | favicon.ico | Entrada de 48x48 |
Las dos declaraciones que importan
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS lee la primera, Android y las PWA de escritorio leen el array icons del archivo referenciado por la segunda. Entre ambas cubren todas las superficies de app instalada.
Preguntas frecuentes sobre iconos de aplicación
¿Necesito diseños distintos para el icono de aplicación y el favicon?
Normalmente no diseños distintos, pero a menudo un tratamiento distinto. El icono de aplicación quiere un fondo lleno y relleno generoso; el favicon quiere la marca lo más grande y simple posible. El mismo logotipo, dos exportaciones.
¿Por qué mi icono de la pantalla de inicio parece una captura de pantalla?
iOS recurre a una captura de pantalla de la página cuando no encuentra ninguna etiqueta link apple-touch-icon ni ningún /apple-touch-icon.png en la raíz del sitio. Añadir cualquiera de los dos lo soluciona, aunque el icono antiguo puede persistir hasta que se vuelva a añadir el acceso directo.
¿Qué tamaño debería tener el diseño de origen?
1024x1024 o mayor, cuadrado, sin esquinas redondeadas incrustadas. Todos los tamaños de plataforma se reducen limpiamente a partir de él, y las plataformas aplican sus propias formas de esquina.