Ahora que iOS 16.4 está disponible, he usado “Añadir a pantalla de inicio” (A2HS) para añadir varios foros de Discourse a la pantalla de inicio de mi iPhone, incluido este foro, Meta.
Cuando añado Meta a mi pantalla de inicio en iOS, se ve así:
Si miras de cerca, verás que en realidad es una imagen transparente con un borde casi negro, rodeada de un fondo negro. Una vez que lo ves, no puedes dejar de verlo.
Apple añade automáticamente un fondo negro a este icono, creando dos tonos de negro diferentes en el icono.
Peor aún, cuando tocas el icono y luego vuelves a la pantalla de inicio, iOS muestra brevemente el icono transparente y luego dibuja el fondo negro un segundo después.
(Es una lástima que Apple no lo deje transparente. Este icono se ve bastante bien… por un segundo.)
Creo que lo mejor es reemplazar el “icono táctil de Apple” de Meta con un icono sin transparencia. Usé la herramienta cuentagotas de Photoshop para rellenar el cuadrado con un fondo negro similar, casi negro, así:
Sugiero además que Discourse muestre el “icono táctil de Apple” en Configuración con un fondo negro, para que sea más obvio para los administradores del sitio qué sucederá si intentan usar un icono transparente como “icono táctil de Apple”.
EDITAR: Sería aún mejor si la configuración del administrador mostrara el “icono táctil de Apple” con esquinas redondeadas y un fondo negro, para que los administradores del sitio pudieran ver que la imagen tendrá un radio de borde proporcionado por Apple. Otro foro en el que estoy tiene un “icono táctil de Apple” con un borde de color, y por supuesto se veía terrible cuando Apple agregó esquinas redondeadas…
Sin embargo, esa región alrededor del color forma parte del logotipo. No estoy seguro de que el negro sobre negro se vea bien. El gris oscuro sobre negro se ve mejor que la alternativa. Esa región forma la D de Discourse, sin ella, todo lo que vemos son burbujas de diálogo superpuestas.
El logo se cambió porque el png transparente que se usó anteriormente, al fijarse en la pantalla de inicio, reemplazaba la transparencia con negro, lo que en realidad oscurecía parte del logo.
Se reemplazó con un icono que usa un fondo blanco explícito para que el logo se represente correctamente al fijarse en la pantalla de inicio.
De hecho, pensé que esa era la razón por la que Discourse tiene dos configuraciones separadas, “icono del manifiesto” e “icono táctil de Apple”, porque Apple ignora la transparencia y aplica el enmascaramiento con esquinas redondeadas, mientras que se supone que otros navegadores siguen el estándar del Manifiesto Web, permitiendo la transparencia.
Tanto Chrome (iconos de pestañas de Android) como Firefox (página de inicio de pestañas) usan el apple-touch-icon como una versión de alta DPI del favicon, y ambos se vieron afectados por este cambio.
Hasta donde sé, eso solo se usa para funciones PWA, como el icono cuando lo agregas a la pantalla de inicio.
Acabo de notar que el ícono PWA de Android de este foro también está un poco roto.
Acabo de iniciar Android Studio y lanzar un emulador de Pixel 4 con Android API 31, instalar la última versión de Google Chrome e instalar Meta en la pantalla de inicio. El ícono se ve así:
Según lo que leo, el problema es que en el https://meta.discourse.org/manifest.webmanifest, hay un espacio que ofrece dos íconos, uno para el propósito “any” y otro con propósito “maskable”. El ícono “maskable” afirma que está bien recortar un círculo de radio del 40% de él.
Afortunadamente, existe una “zona segura mínima” bien definida y estandarizada que todas las plataformas respetan. Las partes importantes de su ícono, como su logotipo, deben estar dentro de un área circular en el centro del ícono con un radio igual al 40% del ancho del ícono. El borde exterior del 10% puede ser recortado.
Puede verificar qué partes de sus íconos caen dentro de la zona segura con Chrome DevTools. Con su Progressive Web App abierta, inicie DevTools y navegue hasta el panel Application. En la sección Icons, puede elegir Show only the minimum safe area for maskable icons. Sus íconos se recortarán para que solo se vea el área segura. Si su logotipo es visible dentro de esta área segura, está listo.
Así es como se ve el panel Manifest de Meta en Chrome Dev Tools cuando marco “Show only the minimum safe area for maskable icons”
Dado que se supone que el ícono es enmascarable, Android/Chrome está sacando un trozo circular del medio, con malos resultados.
Probé usando el Apple Touch Icon, que @Stephen describió como “abrumado por un mar de blanco”, como un ícono de manifiesto enmascarable en Chrome Dev Tools. Pero incluso ese ícono es apenas demasiado grande en comparación con el tamaño enmascarable estándar… la esquina inferior izquierda se recorta.
¿Puedes encontrar alguna documentación sobre qué icono utiliza Firefox para la página de inicio de pestañas?
Si Firefox no está utilizando el icono del manifiesto para la página de inicio de pestañas, entonces esperaría que utilizara al menos uno de los iconos de <link rel=icon>.
Quizás Firefox recurre al icono táctil de Apple porque el <link rel=icon> es muy pequeño.
Sabes, puedes tener varios elementos <link rel=icon>, con varios atributos sizes. Creo que probablemente tendría sentido tener dos elementos <link rel=icon>, el primero apuntando al favicon y el segundo apuntando al icono del manifiesto con un sizes más grande. Apuesto a que eso haría que Firefox usara el icono mejor y más grande.
En términos más generales, creo que la moraleja de esta historia es:
Esto es en realidad un proyecto, averiguar qué iconos se utilizan dónde y por qué.
El sitio de administración de Discourse no está dando a los administradores ni de lejos la orientación suficiente para hacerlo bien.
El sitio de administración debería:
Prohibir la transparencia en los iconos del manifiesto y los iconos táctiles de Apple.
Renderizar el icono del manifiesto con un círculo de radio del 40%, como lo hace Chrome Dev Tools.
Renderizar el icono táctil de Apple con bordes redondeados, como lo hace Apple.
Con esas instalaciones implementadas, creo que un diseñador podría comenzar a intentar abordar el problema de cargar iconos que se vean bien en todos los siguientes:
iOS A2HS
Android A2HS
Páginas de inicio de pestañas para Firefox, Chrome y Safari
