Générateur de favicon

Un seul fichier d'icône devrait servir un onglet de navigateur à 16 pixels, un écran d'accueil mobile à 180 pixels, un tiroir d'applications Android jusqu'à 512 pixels, et une miniature de barre des tâches Windows — des surfaces avec des règles de résolution, de gestion des proportions et de composition d'arrière-plan radicalement différentes, dont aucune ne partage une unique résolution source idéale. C'est historiquement pourquoi les sites soit n'envoyaient qu'un `favicon.ico` basse résolution qui paraissait flou partout, soit sautaient carrément les icônes mobiles et PWA. Générer chaque taille depuis une source et les empaqueter ensemble est ce qui fait qu'une icône paraît nette et correcte partout à la fois, plutôt qu'acceptable à un endroit et incorrecte ailleurs.

Le manifeste web existe pour une raison liée mais distincte : c'est ce qui permet aux navigateurs Android et Chromium de bureau de proposer « Installer l'application » et d'afficher le site avec sa propre icône et son nom une fois installé, plutôt que comme un signet avec une icône de globe générique. Un favicon et une icône PWA sont gérés par des parties différentes de la plateforme, c'est pourquoi un ensemble d'icônes simple et un manifeste sont générés ensemble ici.

L'onglet de navigateur est le rendu le plus petit et le plus fréquemment vu d'un favicon, et il est impitoyable : à 16×16 pixels, il y a de la place pour une forme marquante, deux au maximum, et pratiquement aucune place pour du texte au-delà d'une seule lettre ou d'un chiffre. Un logo complet à plusieurs éléments qui paraît soigné à taille normale devient généralement une tache indistincte à la taille d'un onglet, car le détail qui le rend reconnaissable n'a tout simplement plus de pixels où se rendre.

Les images source les plus fiables sont un seul glyphe, monogramme, ou icône simple sur un fond uni ou transparent, idéalement fourni en 512×512 ou plus grand pour que chaque taille générée soit une réduction propre plutôt qu'un agrandissement. Si le logo existant est complexe, il est généralement préférable d'extraire ou de simplifier un seul élément reconnaissable — un monogramme, un symbole, une forme distinctive — plutôt que de réduire tout l'ensemble et espérer que cela reste cohérent.

Un favicon à fond transparent s'adapte proprement aux thèmes clairs comme sombres des onglets de navigateur, ce qui est le bon choix tant que le design lui-même n'en a pas besoin. Cependant, certaines destinations ne peuvent pas du tout utiliser la transparence — l'icône tactile Apple en particulier est composée par iOS sur un fond uni avant que son propre masque de coins arrondis ne soit appliqué, donc une source transparente produit un logo flottant sur du noir plutôt que l'icône propre qu'ont toutes les autres applications iOS. Choisir une couleur de fond unie à l'avance, ajustée à une couleur de marque plutôt que laissée par défaut au blanc ou au noir, est ce qui garde l'icône délibérée sur chaque surface plutôt que simplement correcte sur certaines d'entre elles.