Un favicon doit-il avoir un fond transparent ?
Un fond transparent convient au favicon d'onglet du navigateur, laissant la marque reposer proprement sur une interface claire ou sombre. Mais iOS ignore la transparence sur l'apple-touch-icon et le compose sur du noir, donc une icône d'écran d'accueil transparente peut devenir une forme flottant sur un carré noir. Utilisez la transparence pour le favicon d'onglet, et un fond plein pour l'apple-touch-icon et les autres tailles d'écran d'accueil.
Transparent là où ça aide, plein là où ça n'aide pas
Pour le favicon d'onglet, la transparence est un avantage : la marque s'adapte à la couleur de l'interface du navigateur, claire ou sombre. C'est la seule surface où un fond transparent aide vraiment.
Les icônes d'écran d'accueil, c'est l'inverse. iOS abandonne le canal alpha et compose l'apple-touch-icon sur du noir, et les icônes maskable d'Android veulent un fond à fond perdu à rogner en une forme. Sur les deux, une source transparente a l'air fausse.
FAQ sur la transparence du favicon
Mon favicon doit-il avoir un fond transparent ?
Pour l'onglet du navigateur, oui. Il s'adapte aux interfaces claire et sombre. Pour l'apple-touch-icon et les autres tailles d'écran d'accueil, non. Utilisez un fond plein.
Pourquoi mon icône d'écran d'accueil iOS est-elle sur un carré noir ?
Parce qu'iOS ignore la transparence et compose l'apple-touch-icon sur du noir. Réexportez cette icône avec un fond plein.
Les icônes maskable ont-elles besoin d'un fond ?
Oui. Les icônes maskable sont rognées en une forme par le lanceur, donc elles ont besoin d'un fond à fond perdu avec la marque maintenue dans la zone de sécurité.