Maintenant qu’iOS 16.4 est sorti, j’ai utilisé « Ajouter à l’écran d’accueil » (A2HS) pour ajouter un certain nombre de forums Discourse à l’écran d’accueil de mon iPhone, y compris ce forum, Meta.
Lorsque j’ajoute Meta à mon écran d’accueil sur iOS, cela ressemble à ceci :
Si vous regardez attentivement, vous verrez qu’il s’agit en fait d’une image transparente avec une bordure presque noire, entourée d’un fond noir. Une fois que vous l’avez vu, vous ne pouvez plus l’ignorer.
Apple ajoute automatiquement un fond noir à cette icône, créant deux nuances de noir différentes sur l’icône.
Pire encore, lorsque vous appuyez sur l’icône, puis revenez à l’écran d’accueil, iOS affiche brièvement l’icône transparente, puis dessine le fond noir une seconde plus tard.
(C’est dommage qu’Apple ne la laisse pas simplement transparente ! Cette icône est assez belle… pendant une seconde.)
Je pense que la meilleure chose à faire est de remplacer l’« icône tactile Apple » de Meta par une icône sans transparence. J’ai utilisé l’outil pipette de Photoshop pour remplir le carré avec un fond noir presque identique, comme ceci :
Je suggère en outre que Discourse affiche l’« icône tactile Apple » dans les paramètres avec un fond noir, afin de montrer plus clairement aux administrateurs du site ce qui se passera s’ils essaient d’utiliser une icône transparente comme « icône tactile Apple ».
EDIT : Il serait encore mieux que les paramètres d’administration affichent l’« icône tactile Apple » avec des coins arrondis et un fond noir, afin que les administrateurs du site puissent voir que l’image aura un rayon de coin fourni par Apple. Un autre forum sur lequel je suis avait une « icône tactile Apple » avec une bordure colorée, et bien sûr, elle était terrible lorsque Apple a ajouté des coins arrondis…
Cette région autour de la couleur fait partie du logo. Je ne suis pas sûr que le noir sur noir ait l’air correct. Le gris foncé sur noir rend mieux que l’alternative. Cette région forme le D de Discourse, sans elle, nous ne voyons que des bulles de dialogue qui se chevauchent.
Le logo a été modifié car le png transparent utilisé précédemment, lorsqu’il était épinglé sur l’écran d’accueil, voyait sa transparence remplacée par du noir, ce qui masquait en fait une partie du logo.
Il a été remplacé par une icône utilisant un fond blanc explicite afin que le logo s’affiche correctement lorsqu’il est épinglé sur l’écran d’accueil.
En effet, je pensais que c’était pourquoi Discourse avait deux paramètres distincts, « icône de manifeste » et « icône tactile Apple », car Apple ignore la transparence et applique un masquage avec des coins arrondis, tandis que les autres navigateurs sont censés suivre la norme Web Manifest, autorisant la transparence.
Les deux, Chrome (icônes d’onglets Android) et Firefox (page de démarrage des onglets), utilisent l’apple-touch-icon comme version haute résolution du favicon, et ont tous deux été affectés par ce changement.
Pour autant que je sache, cela n’est utilisé que pour les fonctionnalités PWA, comme l’icône lorsque vous l’ajoutez à l’écran d’accueil.
J’ai juste remarqué que l’icône PWA Android de ce forum est aussi un peu cassée.
J’ai lancé Android Studio et démarré un émulateur Pixel 4 exécutant Android API 31, installé la dernière version de Google Chrome et installé Meta sur l’écran d’accueil. L’icône ressemble à ceci :
Si je comprends bien, le problème est que dans le https://meta.discourse.org/manifest.webmanifest, il y a un espace proposant deux icônes, une pour le but “any” et une autre avec le but “maskable”. L’icône “maskable” affirme qu’il est acceptable d’en découper un cercle de rayon 40%.
Heureusement, il existe une “zone de sécurité minimale” bien définie et standardisée que toutes les plateformes respectent. Les parties importantes de votre icône, comme votre logo, doivent se trouver dans une zone circulaire au centre de l’icône avec un rayon égal à 40% de la largeur de l’icône. Le bord extérieur de 10% peut être rogné.
Vous pouvez vérifier quelles parties de vos icônes se trouvent dans la zone de sécurité avec Chrome DevTools. Avec votre Progressive Web App ouverte, lancez DevTools et accédez au panneau Application. Dans la section Icônes, vous pouvez choisir d’Afficher uniquement la zone de sécurité minimale pour les icônes masquables. Vos icônes seront rognées de manière à ce que seule la zone de sécurité soit visible. Si votre logo est visible dans cette zone de sécurité, vous êtes prêt.
Voici à quoi ressemble le panneau Manifest de Meta dans Chrome Dev Tools lorsque je coche “Afficher uniquement la zone de sécurité minimale pour les icônes masquables”
Puisque l’icône est censée être masquable, Android/Chrome en découpe une partie circulaire au milieu, avec de mauvais résultats.
J’ai testé en utilisant l’icône Apple Touch, que @Stephen a décrite comme “submergée par une mer de blanc”, comme icône de manifeste masquable dans Chrome Dev Tools. Mais même cette icône est juste trop grande par rapport à la taille masquable standard… le coin inférieur gauche est coupé.
Êtes-vous en mesure de trouver une documentation sur l’icône que Firefox utilise pour la page de démarrage des onglets ?
Si Firefox n’utilise pas l’icône du Manifeste pour la page de démarrage des onglets, alors je m’attendrais à ce qu’il utilise au moins l’une des icônes <link rel=icon>.
Peut-être que Firefox se rabat sur l’icône tactile Apple parce que le <link rel=icon> est si petit ?
Vous savez, vous êtes autorisé à avoir plusieurs éléments <link rel=icon>, avec plusieurs attributs sizes. Je pense qu’il serait probablement judicieux d’avoir deux éléments <link rel=icon>, le premier pointant vers le favicon, et le second pointant vers l’icône du Manifeste avec une sizes plus grande. Je parie que cela ferait en sorte que Firefox utilise la meilleure icône, plus grande.
Plus largement, je pense que la morale de cette histoire est :
C’est en fait un projet, comprendre quelles icônes sont utilisées où et pourquoi
Le site d’administration Discourse ne donne pas du tout assez de conseils aux administrateurs pour bien faire les choses
Le site d’administration devrait :
Bannir la transparence dans les icônes de manifeste et les icônes tactiles Apple
Afficher l’icône du manifeste avec un cercle de rayon de 40 %, comme le fait Chrome Dev Tools
Afficher l’icône tactile Apple avec des bords arrondis, comme le fait Apple
Avec ces installations en place, je pense qu’un designer pourrait commencer à tenter de résoudre le problème du téléchargement d’icônes qui ont fière allure dans tous les contextes suivants :
iOS A2HS
Android A2HS
Pages de démarrage d’onglets pour Firefox, Chrome et Safari
