Générateur de favicon et d'icônes d'application

À propos de cet outil

Quel fichier pour quelle plateforme

Un navigateur de bureau prend l'icône de ses onglets et de ses favoris dans <link rel="icon"> : en général le PNG de 16 pixels sur un écran standard et celui de 32 pixels sur un écran haute densité. Quand une page ne déclare aucune icône, le navigateur demande /favicon.ico à la place.

L'iPhone et l'iPad utilisent apple-touch-icon.png, de 180 pixels, quand on ajoute le site à l'écran d'accueil. Android et les applications web installées lisent la liste icons du manifeste web : 192 pixels pour l'écran d'accueil, 512 pixels pour l'écran de démarrage, et l'icône maskable lorsque le lanceur donne lui-même leur forme aux icônes. mstile-150x150.png sert aux vignettes des anciennes versions de Windows et n'est inclus que par souci d'exhaustivité.

Pourquoi favicon.ico compte encore

Les navigateurs demandent d'eux-mêmes /favicon.ico pour tout ce qui n'a pas d'en-tête HTML où déclarer une icône : un PDF, une image ou une réponse JSON ouverts dans un onglet. Les lecteurs de flux, les robots d'indexation et d'autres outils le cherchent souvent au même endroit. Le format ICO peut contenir plusieurs tailles dans un seul fichier ; celui-ci contient 16, 32 et 48 pixels, chacune stockée sous forme de données PNG, que Windows lit depuis Vista et que tous les navigateurs actuels savent lire.

Icônes maskable et zone de sécurité

Les lanceurs Android découpent les icônes d'application en cercle, en carré arrondi ou selon une autre forme. Pour résister à cette découpe, une icône normale est généralement réduite et posée sur un fond blanc. Une icône maskable, au contraire, couvre tout le carré d'un fond opaque et garde tout ce qui compte dans la zone de sécurité : un cercle centré dont le diamètre vaut 80 % de la largeur de l'icône. Tout ce qui dépasse ce cercle peut être coupé.

Cet outil remplit l'icône maskable avec la couleur de fond de l'application et laisse une marge d'au moins 14 % de chaque côté autour de votre visuel. Vérifiez l'aperçu rond et ajoutez de la marge si un coin du visuel est coupé.

Apple ignore la transparence

iOS ne conserve pas les pixels transparents d'une icône d'écran d'accueil : il les peint en noir, et il arrondit lui-même les angles. L'icône Apple Touch générée ici est donc toujours opaque et carrée, remplie avec la couleur de fond de l'application, avec une marge d'au moins 8 % et sans votre arrondi des angles.

Fonctionnement

Les icônes sont dessinées par les packages d'image de Go compilés en WebAssembly, dans un thread d'arrière-plan de votre navigateur, avec un rééchantillonnage Catmull-Rom. Une source très grande est d'abord réduite dans la page, pour que chaque modification se redessine rapidement. Votre image n'est pas envoyée.