Pack d’icônes : réglages et meilleurs résultats

À quoi sert Pack d’icônes ?

Pack d’icônes transforme un logo en jeu complet d’icônes pour un site web, sur votre propre ordinateur : un favicon.ico pour l’onglet du navigateur, des icônes PNG pour les téléphones et les écrans d’accueil et, si vous le souhaitez, des icônes Android et Windows. Dans l’application, l’outil s’appelle Icon Pack. Par défaut, il écrit aussi deux petits fichiers texte qui indiquent aux navigateurs où trouver les icônes.

Il accepte les logos en PNG, JPG, WebP et SVG. Pendant que vous choisissez les réglages, un aperçu en direct montre l’onglet du navigateur, un écran d’accueil d’iPhone et une icône Android.

02Étape 2 : Choisissez le préréglage, le fond et la marge

• Sous Preset, choisissez Web, Extended ou All. La ligne sous les boutons indique ce que chacun ajoute.
• Sous Background, choisissez None pour un fond transparent, White, ou Color, puis cliquez sur la pastille pour choisir la couleur de votre marque.
• Sous Padding, faites glisser Inset pour régler l’espace autour du logo. 10 % conviennent à la plupart des logos. Augmentez la valeur si le logo touche les bords dans les aperçus.
• Laissez Emit manifest + <head> snippet coché pour obtenir les deux fichiers texte destinés à votre site. Décochez-le si vous n’avez besoin que des images.

Les aperçus se mettent à jour au fur et à mesure. Browser tab montre le minuscule favicon, iOS home screen l’icône Apple touch, Android maskable l’icône telle qu’Android la découpe, et Size ladder toutes les tailles côte à côte. Vérifiez que le logo reste lisible en 16 et en 32.

1234567

1. 1Preset
2. 2Background
3. 3Inset
4. 4Emit manifest + <head> snippet
5. 5Android maskable
6. 6Size ladder
7. 7Export

03Étape 3 : Exportez, puis vérifiez les fichiers

Cliquez sur Export 1 en haut à droite. Le chiffre correspond au nombre de logos dans la file. À la fin, Icon Pack affiche une vignette pour chaque fichier créé. Cliquez sur Open folder pour les ouvrir, ou sur Make another pour revenir modifier les réglages.

Les fichiers sont enregistrés dans le dossier de sortie de votre espace de travail, dans un dossier icon_pack avec un sous-dossier à la date du jour, comme 10-15. Ils sont placés directement dans ce dossier. Déplacez-les dans le projet de votre site juste après chaque export : un deuxième export le même jour ajoute (2) aux nouveaux noms, qui ne correspondent alors plus aux liens du snippet. Voir Où Hangar enregistre vos fichiers.

12345

1. 1Icônes PNG
2. 2head-snippet.txt
3. 3Dossier de sortie
4. 4Make another
5. 5Open folder

Quels fichiers obtient-on ?

Chaque préréglage contient tout ce que contiennent les précédents.

• Web : favicon.ico (avec des versions de 16, 32 et 48 pixels à l’intérieur), icon-192.png, icon-512.png et apple-touch-icon.png (180 pixels).
• Extended ajoute maskable-192.png et maskable-512.png, avec plus d’espace autour du logo pour qu’Android puisse les découper en cercles ou en carrés arrondis, ainsi que pinned-tab.png (512 pixels).
• All ajoute les tuiles Windows mstile-150.png et mstile-310.png.
• Avec Emit manifest + <head> snippet coché, chaque préréglage fournit aussi site.webmanifest, qui liste les icônes pour les téléphones qui installent votre site, et head-snippet.txt, les lignes à coller dans votre page.

Cela fait 6 fichiers pour Web, 9 pour Extended et 11 pour All.

Tous les réglages, et quand les changer

Preset

Les fichiers d’icônes à créer. Web couvre la plupart des sites ; Extended ajoute les icônes maskable pour Android et une image d’onglet épinglé ; All ajoute les tuiles Windows.

• PlageWeb, Extended, All
• Par défautWeb

Background

Ce qui se trouve derrière le logo. None le garde transparent quand c’est possible ; les icônes Apple touch, maskable et les tuiles Windows reçoivent toujours un fond plein, blanc quand None est choisi.

• PlageNone, White, Color
• Par défautWhite

Inset

L’espace entre le logo et le bord de chaque icône. Les icônes maskable reçoivent 10 % de plus, jusqu’à 40 %, pour que le découpage d’Android ne coupe pas le logo.

• Plage0 % à 30 %
• Par défaut10 %

Emit manifest + <head> snippet

Ajoute site.webmanifest et head-snippet.txt à côté des icônes.

• Par défautActivé

Comment obtenir des icônes nettes ?

• Partez d’un SVG si vous en avez un. Il est redessiné à chaque taille : même le favicon de 16 pixels reste net.
• Utilisez un symbole carré, pas un logo texte en longueur. Un logo allongé est réduit pour tenir dans le carré et devient un trait fin aux petites tailles. Si votre logo est large, utilisez son symbole ou sa première lettre.
• Utilisez un fond transparent dans le fichier source : c’est alors le réglage Background qui décide de la couleur, et non un reste de blanc autour du logo.
• Choisissez Color pour un rendu à vos couleurs. Un fond coloré fait ressortir l’icône sur l’écran d’accueil des téléphones, et remplace aussi le fond blanc des icônes Apple touch et maskable.
• Vérifiez Size ladder en 16 et en 32. Les traits fins et le petit texte y disparaissent. Augmentez un peu Inset si le logo semble à l’étroit.

Pourquoi mes icônes ne vont-elles pas ?

• Le logo paraît minuscule, entouré de vide. Votre fichier de logo contient déjà de l’espace vide autour. Recadrez-le au plus près avec Recadrer une image, ou baissez Inset.
• Le favicon est flou. Le fichier source est trop petit, ou c’est un logo texte en longueur. Utilisez un SVG ou un symbole carré plus grand.
• Certaines icônes ont un fond blanc derrière le logo alors que j’ai choisi None. Ces icônes exigent toujours un fond plein. Choisissez Color pour le choisir vous-même.
• Un nom de fichier se termine par (2). Un jeu portant les mêmes noms se trouvait déjà dans le dossier, issu d’un export précédent du jour ou d’un autre logo du même export. Déplacez les anciens fichiers et exportez de nouveau, un logo à la fois.
• L’export a échoué avec un message indiquant que la source fait moins de 256 px. Utilisez une image plus grande ou un SVG. Hangar n’agrandit pas les petits logos.
• L’export a échoué parce que Hangar n’a pas pu lire l’image ou le SVG. Ouvrez le fichier dans une autre application et enregistrez-le de nouveau en PNG ou en SVG.

Pour les autres erreurs, voir Un fichier a échoué : que vérifier.

Limites

• Les logos en image matricielle doivent faire au moins 256 pixels sur leur plus grand côté. Le SVG n’a pas de minimum.
• Les logos en GIF ou WebP animés n’utilisent qu’une seule image fixe.
• Un même jeu de réglages s’applique à tous les logos de la file.
• Tous les fichiers d’un export vont dans le même dossier daté, sans dossier séparé par logo.
• Le manifeste ne liste que les icônes, sans nom d’application ni couleurs.
• Tout se passe sur votre ordinateur. Rien n’est envoyé en ligne.