Agora que o iOS 16.4 foi lançado, usei “Adicionar à Tela de Início” (A2HS) para adicionar vários fóruns do Discourse à tela de início do meu iPhone, incluindo este fórum, o Meta.
Quando adiciono o Meta à minha tela de início no iOS, ele fica assim:
Se você olhar atentamente, verá que esta é na verdade uma imagem transparente com uma borda quase preta, cercada por um fundo preto. Uma vez que você vê, não consegue mais deixar de ver.
Acredito que este seja o “ícone de toque da Apple”:
A Apple adiciona automaticamente um fundo preto a este ícone, criando duas cores diferentes de preto no ícone.
Pior ainda, quando você toca no ícone e depois retorna à tela de início, o iOS exibe brevemente o ícone transparente e, em seguida, desenha o fundo preto um segundo depois.
(É uma pena que a Apple não o deixe transparente! Este ícone fica muito bom… por um segundo.)
Acho que a melhor coisa a fazer é substituir o “ícone de toque da Apple” do Meta por um ícone sem transparência. Usei a ferramenta conta-gotas do Photoshop para preencher o quadrado com um fundo preto quase idêntico, assim:
Sugiro ainda que o Discourse exiba o “ícone touch da Apple” nas Configurações com um fundo preto, para tornar mais óbvio aos administradores do site o que acontecerá se eles tentarem usar um ícone transparente como “ícone touch da Apple”.
EDIT: Seria ainda melhor se as Configurações do administrador exibissem o “ícone touch da Apple” com cantos arredondados e um fundo preto, para que os administradores do site pudessem ver que a imagem terá um raio de borda fornecido pela Apple. Outro fórum em que participo tinha um “ícone touch da Apple” com uma borda colorida e, claro, ficou terrível quando a Apple adicionou cantos arredondados…
Essa região ao redor da cor faz parte do logotipo. Não tenho certeza se preto sobre preto fica bom. O cinza escuro sobre preto fica melhor do que a alternativa. Essa região forma o D do Discourse, sem ela tudo o que vemos são balões de fala sobrepostos.
O logo foi alterado porque o png transparente usado anteriormente, ao ser fixado na tela inicial, substituía a transparência por preto, o que na verdade obscurecia parte do logo.
Ele foi substituído por um ícone que usa um fundo branco explícito para que o logo seja renderizado corretamente ao ser fixado na tela inicial.
De fato, pensei que era por isso que o Discourse tem duas configurações separadas, “ícone do manifesto” e “ícone de toque da Apple”, porque a Apple ignora a transparência e aplica mascaramento com cantos arredondados, enquanto outros navegadores devem seguir o padrão do Web Manifest, permitindo transparência.
Tanto o Chrome (ícones de aba do Android) quanto o Firefox (página inicial da aba) usam o apple-touch-icon como uma versão de alta DPI do favicon, e ambos foram afetados por essa mudança.
Pelo que sei, isso é usado apenas para recursos PWA, como o ícone quando você o adiciona à tela inicial.
Acabei de notar que o ícone PWA do Android deste fórum também está meio quebrado.
Acabei de iniciar o Android Studio e lancei um emulador Pixel 4 rodando Android API 31, instalei a versão mais recente do Google Chrome e instalei o Meta na tela inicial. O ícone fica assim:
Pelo que entendi, o problema é que em https://meta.discourse.org/manifest.webmanifest, há um espaço oferecendo dois ícones, um para o propósito “any” e outro com propósito “maskable”. O ícone “maskable” afirma que tudo bem cortar um círculo de raio de 40% dele.
Felizmente, existe uma “zona de segurança mínima” bem definida e padronizada que todas as plataformas respeitam. As partes importantes do seu ícone, como seu logotipo, devem estar dentro de uma área circular no centro do ícone com um raio igual a 40% da largura do ícone. A borda externa de 10% pode ser cortada.
Você pode verificar quais partes dos seus ícones ficam dentro da zona de segurança com o Chrome DevTools. Com seu Progressive Web App aberto, inicie o DevTools e navegue até o painel Application. Na seção Icons, você pode escolher Show only the minimum safe area for maskable icons (Mostrar apenas a área segura mínima para ícones mascaráveis). Seus ícones serão cortados para que apenas a área segura seja visível. Se o seu logotipo estiver visível dentro desta área segura, você está pronto.
Veja como o painel Manifest do Meta aparece no Chrome Dev Tools quando marco “Mostrar apenas a área segura mínima para ícones mascaráveis”:
Como o ícone deveria ser mascarável, o Android/Chrome está tirando um pedaço circular do meio, com resultados ruins.
Testei usando o Apple Touch Icon, que o @Stephen descreveu como “sufocado por um mar de branco”, como um ícone de manifesto mascarável no Chrome Dev Tools. Mas mesmo esse ícone é apenas muito grande em relação ao tamanho mascarável padrão… o canto inferior esquerdo é cortado.
Você consegue encontrar alguma documentação sobre qual ícone o Firefox usa para a página inicial da aba?
Se o Firefox não estiver usando o ícone do Manifest para a página inicial da aba, então eu esperaria que ele usasse pelo menos um dos ícones <link rel=icon>.
Talvez o Firefox esteja recorrendo ao ícone de toque da Apple porque o <link rel=icon> é muito pequeno?
Sabe, você pode ter vários elementos <link rel=icon>, com vários atributos sizes. Acho que provavelmente faria sentido ter dois elementos <link rel=icon>, o primeiro apontando para o favicon e o segundo apontando para o ícone do Manifest com um sizes maior. Aposto que isso faria o Firefox usar o ícone melhor e maior.
De forma mais ampla, acho que a moral desta história é:
Este é, na verdade, um projeto, descobrindo quais ícones estão sendo usados onde e por quê.
O site de administração do Discourse não está dando aos administradores orientação suficiente para acertar isso.
O site de administração deveria:
Banir a transparência em ícones de Manifest e ícones de toque da Apple.
Renderizar o ícone do Manifest com um círculo de raio de 40%, como o Chrome Dev Tools faz.
Renderizar o ícone de toque da Apple com bordas arredondadas, da maneira que a Apple faz.
Com essas facilidades implementadas, acho que um designer poderia começar a tentar resolver o problema de fazer upload de ícones que fiquem bons em todos os seguintes:
iOS A2HS
Android A2HS
Páginas iniciais de abas para Firefox, Chrome e Safari
