FAQ sur les favicons
Un favicon doit-il être transparent ?
Donnez à l'onglet du navigateur favicons un fond transparent afin qu'ils reposent sur des bandes d'onglets claires et sombres. Gardez l'icône tactile Apple et les icônes masquables opaques, car ces plates-formes remplissent ou recadrent l'espace vide pour vous.
La transparence aide dans les onglets du navigateur
Les navigateurs peignent la bande d'onglets dans la couleur du thème de l'utilisateur, et cette couleur change entre les modes clair et sombre. Un arrière-plan transparent permet à votre marque de figurer sur tout ce que le navigateur dessine. Un carré blanc intégré à l’illustration apparaît sous la forme d’un bloc brillant sur un onglet sombre.
ICO, PNG et SVG comportent tous un canal alpha, ce qui leur permet de stocker la transparence par pixel. JPEG ne le peut pas, ce qui est l'une des raisons pour lesquelles il constitue une source favicon faible. Voir est un favicon un PNG ou un JPEG pour la comparaison des formats. Si votre art source a un fond transparent, le Générateur de favicon le conserve dans les fichiers PNG et ICO exportés.
Où chaque icône a besoin d'un arrière-plan
| Icône | Transparent ? | Raison |
|---|---|---|
favicon.ico et onglet PNG | Oui | S'adapte aux bandes à languettes claires et foncées |
| SVG favicon | Oui | Même emplacement d'onglet, dessiné à n'importe quelle taille |
apple-touch-icon | Non | iOS rend les pixels transparents en noir |
| Icône de manifeste masquable | Non | Les lanceurs le recadrent en forme de plate-forme |
Gardez l'icône tactile Apple opaque
L'icône de l'écran d'accueil d'Apple constitue l'exception la plus évidente. iOS compose des zones transparentes avec du noir, de sorte qu'un logo transparent puisse apparaître sur l'écran d'accueil sous la forme d'une vignette sombre. Exportez plutôt un PNG 180x180 avec un arrière-plan rempli.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Apple documente les règles des icônes dans Configuration des applications Web. Le Générateur d'icônes tactiles Apple vous permet de choisir cette couleur d'arrière-plan et de télécharger le fichier aplati.
Les icônes masquables nécessitent un arrière-plan à fond perdu
Les lanceurs Android recadrent les icônes masquables en cercles, écureuils et autres formes. Remplissez toute la toile avec une couleur de fond et gardez le logo à l'intérieur de la zone de sécurité, le cercle centré couvrant 80% de la largeur. Tout ce qui se trouve en dehors de ce cercle peut être coupé.
Vous pouvez toujours envoyer une icône de manifeste transparente avec purpose: "any" aux côtés du masqué. MDN couvre les deux valeurs dans le référence aux icônes du manifeste, et le générateur d'icônes masquables affiche la zone de sécurité pendant que vous positionnez l’œuvre d’art.
Vérifiez le contraste sur les deux thèmes
La transparence déplace le problème de contraste vers le navigateur. Une marque presque noire disparaît sur une bande d'onglet sombre et une marque pâle disparaît sur une bande claire. Choisissez des couleurs qui résistent aux deux ou placez une petite forme arrondie derrière le logo pour qu'il ait son propre contraste.
Certains navigateurs appliquent prefers-color-scheme règles à l'intérieur d'un SVG favicon, bien que la prise en charge varie, alors traitez un SVG prenant en charge le thème comme une mise à niveau plutôt que comme un correctif. Prévisualisez l'icône sur les onglets clairs et sombres avec le Aperçu de favicon, puis confirmez ce qu'un site actif sert avec le Vérificateur favicon.
Prêt à créer votre favicon ?
Générez les fichiers communs et un extrait HTML prêt à coller.