Ora che iOS 16.4 è disponibile, ho usato “Aggiungi a Schermo Home” (A2HS) per aggiungere un certo numero di forum Discourse alla schermata home del mio iPhone, incluso questo forum, Meta.
Quando aggiungo Meta alla mia schermata home su iOS, appare così:
Se guardi attentamente, vedrai che questa è in realtà un’immagine trasparente con un bordo quasi nero, circondata da uno sfondo nero. Una volta che lo vedi, non puoi più non notarlo.
Apple aggiunge automaticamente uno sfondo nero a questa icona, creando due diverse tonalità di nero sull’icona.
Peggio ancora, quando tocchi l’icona e poi torni alla schermata home, iOS mostra brevemente l’icona trasparente, e poi disegna lo sfondo nero un secondo dopo.
(È un peccato che Apple non la lasci semplicemente trasparente! Questa icona sembra piuttosto bella… per un secondo.)
Penso che la cosa migliore da fare sia sostituire la “apple touch icon” di Meta con un’icona senza trasparenza. Ho usato lo strumento contagocce di Photoshop per riempire il quadrato con uno sfondo nero quasi identico, come questo:
Suggerisco inoltre che Discourse visualizzi l’“icona touch di Apple” nelle Impostazioni con uno sfondo nero, per rendere più evidente agli amministratori del sito cosa accadrà se tenteranno di utilizzare un’icona trasparente come “icona touch di Apple”.
MODIFICA: Sarebbe ancora meglio se le Impostazioni dell’amministratore visualizzassero l’“icona touch di Apple” con angoli arrotondati e uno sfondo nero, in modo che gli amministratori del sito possano vedere che l’immagine avrà un raggio di bordo fornito da Apple. Un altro forum a cui partecipo aveva un’“icona touch di Apple” con un bordo colorato e, naturalmente, sembrava terribile quando Apple ha aggiunto gli angoli arrotondati…
Tuttavia, la regione attorno al colore fa parte del logo. Non sono sicuro che il nero su nero sia corretto. Il grigio scuro su nero sembra migliore dell’alternativa. Quella regione forma la D di Discourse, senza di essa vediamo solo bolle di dialogo sovrapposte.
Il logo è stato modificato perché il png trasparente utilizzato in precedenza, quando aggiunto alla schermata Home, sostituiva la trasparenza con il nero, oscurando di fatto parte del logo.
È stato sostituito con un’icona che utilizza uno sfondo bianco esplicito, in modo che il logo venga visualizzato correttamente quando aggiunto alla schermata Home.
Infatti, pensavo che fosse il motivo per cui Discourse ha due impostazioni separate, “icona manifest” e “icona touch di Apple”, perché Apple ignora la trasparenza e applica maschere con angoli arrotondati, mentre altri browser dovrebbero seguire lo standard Web Manifest, consentendo la trasparenza.
Sia Chrome (icone delle schede Android) che Firefox (pagina iniziale delle schede) utilizzano apple-touch-icon come versione ad alta densità di favicon, ed entrambi sono stati interessati da questa modifica.
Per quanto ne so, questo viene utilizzato solo per le funzionalità PWA, come l’icona quando la si aggiunge alla schermata principale.
Ho appena notato che anche l’icona PWA Android di questo forum è un po’ rovinata.
Ho appena avviato Android Studio e lanciato un emulatore Pixel 4 con Android API 31, installato l’ultima versione di Google Chrome e aggiunto Meta alla schermata principale. L’icona appare così:
Per come la interpreto, il problema è che in https://meta.discourse.org/manifest.webmanifest c’è uno spazio che offre due icone, una per lo scopo “any” e un’altra con scopo “maskable”. L’icona “maskable” afferma che va bene ritagliare un cerchio con un raggio del 40% da essa.
Fortunatamente, esiste una “zona di sicurezza minima” ben definita e standardizzata che tutte le piattaforme rispettano. Le parti importanti della tua icona, come il tuo logo, dovrebbero trovarsi all’interno di un’area circolare al centro dell’icona con un raggio pari al 40% della larghezza dell’icona. Il bordo esterno del 10% può essere ritagliato.
Puoi verificare quali parti delle tue icone rientrano nella zona di sicurezza con Chrome DevTools. Con la tua Progressive Web App aperta, avvia DevTools e vai al pannello Application. Nella sezione Icons, puoi scegliere di Show only the minimum safe area for maskable icons. Le tue icone verranno ritagliate in modo che sia visibile solo l’area sicura. Se il tuo logo è visibile all’interno di quest’area sicura, sei a posto.
Ecco come appare il pannello Manifest di Meta in Chrome Dev Tools quando seleziono “Show only the minimum safe area for maskable icons”
Poiché l’icona dovrebbe essere mascherabile, Android/Chrome sta ritagliando una porzione circolare dal centro, con scarsi risultati.
Ho testato usando l’Apple Touch Icon, che @Stephen ha descritto come “sopraffatto da un mare di bianco”, come icona manifest mascherabile in Chrome Dev Tools. Ma anche quell’icona è appena troppo grande rispetto alla dimensione standard mascherabile… l’angolo in basso a sinistra viene tagliato.
Riesci a trovare documentazione su quale icona utilizza Firefox per la pagina iniziale delle schede?
Se Firefox non utilizza l’icona del manifest per la pagina iniziale delle schede, allora mi sarei aspettato che utilizzasse almeno una delle icone <link rel=icon>.
Forse Firefox sta tornando all’icona touch di Apple perché <link rel=icon> è così piccola?
Sai, puoi avere più elementi <link rel=icon>, con più attributi sizes. Penso che avrebbe senso avere due elementi <link rel=icon>, il primo che punta al favicon e il secondo che punta all’icona del manifest con una sizes più grande. Scommetto che questo farebbe sì che Firefox utilizzi l’icona migliore e più grande.
Più in generale, penso che la morale di questa storia sia:
Questo è in realtà un progetto, capire quali icone vengono utilizzate dove e perché
Il sito di amministrazione di Discourse non fornisce agli amministratori quasi nessuna guida per fare le cose per bene
Il sito di amministrazione dovrebbe:
Vietare la trasparenza nelle icone del manifest e nelle icone touch di Apple
Renderizzare l’icona del manifest con un cerchio di raggio del 40%, come fa Chrome Dev Tools
Renderizzare l’icona touch di Apple con bordi arrotondati, come fa Apple
Con queste funzionalità in atto, penso che un designer potrebbe iniziare a tentare di affrontare il problema del caricamento di icone che abbiano un bell’aspetto in tutti i seguenti contesti:
iOS A2HS
Android A2HS
Pagine iniziali delle schede per Firefox, Chrome e Safari
