A la base, je voulais faire un tuto sur la meilleure façon de fabriquer une icône pour la Touch Bar (et pour épingler un onglet dans Safari). Mais c’est un peu la galère et (surtout) un site Internet peut le faire pour vous facilement.
En théorie, les onglets épinglés et la Touch Bar partagent la même icône, et Apple explique comment la faire. Il faut donc un fichier SVG avec une seule couche, une seule couleur (du noir) et une viewbox fixée à 0 0 16 16. Sans Photoshop sous la main, j’ai donc essayé différents outils pour créer le fichier.
Une fois le fichier au bon endroit, le code suivant permet aux navigateurs d’Apple de le charger.
<link rel="mask-icon" href="icon.svg" color="red">
La couleur, qui peut aussi être une valeur hexadécimale, a de l’importance. Dans un onglet épinglé, elle remplacera la couleur noire du fichier SVG, alors que sur la Touch Bar, elle sera utilisée pour le fond (du vert sur le blog).
Pour rappel, l’icône apparaît dans le Touch Bar à un moment précis : si le site est en favoris, quand vous pressez l’icône de recherche sur la barre. J’ai fait une capture sur un MacBook Pro dans un Apple Store pour montrer un exemple.
Sur une vraie Touch Bar
Une capture
Mon problème vient du fait que je n’ai pas réussi à faire un fichier valable, mais j’ai finalement trouvé une solution : ce site. A partir d’une image de bonne qualité (idéalement un PNG carré ou un SVG de bonne taille avec les contraintes de base sur la couleur), il génère les fichiers nécessaires et le code. En bonus, il va aussi créer les favicon pour d’autres navigateurs et d’autres usages (dans les signets, etc.). C’est rapide et plutôt efficace.
Attention à un truc quand même : Safari est (très) capricieux avec les icônes, donc même avec des fichiers parfaitement valables, ça ne fonctionne pas directement. Vider le cache et redémarrer peut aider pour que le navigateur décide de charger les images, mais je n’ai pas trouvé de méthode miracle (en théorie, il suffit d’effacer manuellement les fichiers en cache dans ~/Library/Safari/Template Icons, mais ça ne fonctionne pas toujours).
