SVG, favicons et toutes les choses amusantes que nous pouvons faire avec eux


Les favicons sont les petites icônes que vous voyez dans l’onglet de votre navigateur. Ils vous aident à comprendre de quel site il s’agit lorsque vous parcourez les signets et les onglets ouverts de votre navigateur. Ils font partie intégrante de l’histoire d’Internet et sont capables d’effectuer quelques trucs sympas.

Une toute nouvelle astuce est la possibilité d’utiliser SVG comme favicon. C’est quelque chose qui la plupart des navigateurs modernes prennent en charge, avec plus de soutien en cours de route.

Voici le code pour ajouter des favicons à votre site:



Si un navigateur ne prend pas en charge un favicon SVG, il ignorera la première déclaration d’élément de lien et passera à la seconde. Cela garantit que tous les navigateurs qui prennent en charge les favicons peuvent profiter de l’expérience.

Vous pouvez également remarquer la valeur d’attribut alternative pour notre rel déclaration dans la deuxième ligne. Cela communique par programme au navigateur que le favicon avec un format de fichier qui utilise .ico est spécifiquement utilisé comme une présentation alternative.

Après les favicons se trouve une ligne de code qui charge une autre image SVG, une appelée safari-pinned-tab.svg. C’est pour soutenir Fonctionnalité d’onglet épinglé de Safari, qui existait avant que les autres navigateurs ne prennent en charge les favicon SVG. Il y a des fichiers supplémentaires que vous pouvez ajouter ici pour améliorer votre site pour différentes applications et services, mais plus à ce sujet dans un instant.

Voici plus de détails sur le niveau actuel de prise en charge des favicon SVG:

Bureau

ChromeFirefoxC’EST À DIREBordSafari
8041Non80TP

Mobile / Tablette

Android ChromeAndroid FirefoxAndroidiOS Safari
80NonNon13,4

Pourquoi SVG?

Vous vous demandez peut-être pourquoi cela est nécessaire. le .ico Le format de fichier existe depuis toujours et peut prendre en charge des images jusqu’à 256 × 256 pixels. Voici trois réponses pour vous.

Facilité de création

C’est pénible à faire .ico des dossiers. Le fichier est un format propriétaire utilisé par Microsoft, ce qui signifie que vous aurez besoin outils spécialisés pour les faire. SVG est un standard ouvert, ce qui signifie que vous pouvez les utiliser sans aucun autre outil ni verrouillage de la plate-forme.

La pérennité

Rétine? 5k? 6k? Lorsque nous utilisons un fichier SVG indépendant de la résolution pour un favicon, nous garantissons que nos favicons sont nets sur les futurs appareils, indépendamment de la taille de leurs écrans.

Performance

Les SVG sont généralement de très petits fichiers, en particulier par rapport à leurs homologues d’images raster – encore plus si vous les optimisez au préalable. En utilisant uniquement un favicon 16 × 16 pixels comme solution de rechange pour les navigateurs qui ne prennent pas en charge SVG, nous fournissons une combinaison qui bénéficie d’un haut niveau de prise en charge avec une taille de fichier plus petite pour démarrer.

Cela peut sembler un peu extrême, mais en ce qui concerne les performances Web, chaque octet compte!

Des trucs

Une autre chose intéressante à propos de SVG est que nous pouvons y intégrer directement du CSS. Cela signifie que nous pouvons faire des choses amusantes comme les ajuster dynamiquement avec JavaScript, à condition que le SVG soit déclaré en ligne et non intégré à l’aide d’un img élément.


 %MINIFYHTML2f9eafed61d4ca9ef78a98058bc58baa16%  

Étant donné que les favicons SVG sont intégrés à l’aide du link élément, ils ne peuvent pas vraiment être modifiés à l’aide de JavaScript. Nous pouvons cependant utiliser des choses comme les emoji et les requêtes multimédias.

Emoji

Léa Verou eu une idée géniale sur l’utilisation d’emoji à l’intérieur de SVG text élément pour faire un favicon rapide avec un fond transparent qui résiste aux petites tailles.

En réponse, Chris Coyier a concocté une petite démo soignée qui vous permet de jouer avec le concept.

Prise en charge du mode sombre

Tous les deux Thomas Steiner et Mathias Bynens indépendamment tombé sur l’idée que vous pouvez utiliser le prefers-color-scheme requête multimédia pour fournir un support pour le mode sombre. Ce travail est construit à partir de Exploration par Jake Archibald des SVG et des requêtes médiatiques.


 %MINIFYHTML2f9eafed61d4ca9ef78a98058bc58baa17%  

Pour les navigateurs compatibles, ce code signifie que notre favicon SVG en forme d’étoile changera sa couleur de remplissage du noir au blanc lorsque mode sombre est activé. Génial!

Autres requêtes médiatiques

La prise en charge du mode sombre m’a fait réfléchir: si les SVG peuvent prendre en charge prefers-color-scheme, que pouvons-nous faire d’autre avec eux? Bien que le soutien à Requêtes médias de niveau 5 peut-être pas encore là, voici quelques idées à considérer:

Maquette de quatre traitements de favicon SVG. Le premier traitement est une étoile rose avec un titre d'onglet «SVG Favicon». Le deuxième traitement est une étoile rose vif avec un titre d'onglet,
Une maquette de la façon dont ces ajustements basés sur les requêtes multimédias pourraient fonctionner.

Gardez-le net

Un autre aspect important d’une bonne conception de favicon est de s’assurer qu’ils sont beaux dans la petite zone d’onglet du navigateur. Le secret est de créer les chemins de l’image vectorielle aligner sur la grille de pixels, le guide utilisé par un ordinateur pour transformer les mathématiques SVG en bitmap que nous voyons sur un écran.

Voici un exemple simplifié utilisant une forme carrée:

Un carré orange vif sur fond blanc. Il existe également une faible grille de lignes grises horizontales et verticales qui représentent la grille de pixels. Capture d'écran de Figma.

Lorsque les points vectoriels du carré s’alignent sur la grille de pixels du plan de travail, l’effet d’anticrénelage qu’un ordinateur utilise pour lisser les formes n’est pas nécessaire. Lorsque les points vectoriels ne sont pas alignés, nous obtenons un effet de “maculage”:

Un carré orange flou sur fond blanc. Il existe également une faible grille de lignes grises horizontales et verticales qui représentent la grille de pixels. Capture d'écran de Figma.

La position d’un point vectoriel peut être ajustée sur la grille de pixels à l’aide d’un programme d’édition vectorielle tel que Figma, Esquisser, Inkscape, ou Illustrateur. Ces programmes exportent également des SVG. Pour ajuster l’emplacement d’un point vectoriel, sélectionnez chaque nœud avec un outil de sélection de précision et faites-le glisser en position.

Certaines icônes plus compliquées devront peut-être être simplifiées, afin de bien paraître à une si petite taille. Si vous cherchez une bonne introduction à cela, Jeremy Frank a écrit un très bon article en deux parties sur Vidget.

Allez plus loin

En plus des favicons, il existe un tas de façons différentes (et malheureusement propriétaires) d’utiliser des icônes pour améliorer son expérience. Cela inclut des éléments tels que l’icône de l’onglet épinglé susmentionnée pour Safari¹, l’application de chat se déroule, une vignette du menu Démarrer de Windows épinglée, aperçus des médias sociaux et lanceurs d’écran d’accueil.

Si vous cherchez un bon endroit pour commencer avec ce genre d’améliorations, j’aime vraiment realfavicongenerator.net.

Sortie d'icône de realfavicongenerator.net disposée dans une grille en utilisant le logo CSS-Trick. Il y a deux rangées de cinq icônes: android-chrome-192x192.png, android-chrome-384x384.png, apple-touch-icon.png, favicon-16x16.png, favicon-32x32.png, mstile-150x150.png, safari-pinned-tab.svg, favicon.ico, Browserconfig.xml et site.webmanifest.
C’est beaucoup, mais cela garantit un support robuste.

Une chose amusante sur l’histoire du favicon: Internet Explorer a été le premier navigateur à les prendre en charge et ils se sont faufilés à la 11e heure par un développeur nommé Bharat Shyam:

Comme le raconte l’histoire, tard un soir, Shyam travaillait sur sa nouvelle fonctionnalité de favicon. Il a appelé le chef de projet junior Ray Sun pour jeter un coup d’œil.

Shyam a commenté: «C’est bien, non? Check it in? », Demandant l’autorisation de vérifier le code dans la base de code d’Internet Explorer afin qu’il puisse être publié dans la prochaine version. Sun n’y a pas trop pensé, la fonctionnalité était cool et donnerait clairement un avantage à IE. Il a donc dit à Shyam d’aller de l’avant et de l’ajouter. Et juste comme ça, le favicon a fait son chemin dans Internet Explorer 5, qui allait devenir l’une des plus grandes versions de navigateur que le Web ait jamais vues.

Le lendemain, Sun a été réprimandé par son manager pour avoir laissé la fonctionnalité passer si vite. Il s’avère que Shyam avait spécifiquement attendu plus tard dans la journée, sachant qu’un gestionnaire de programme moins expérimenté lui donnerait un laissez-passer. Mais à ce moment-là, le code avait été fusionné. Soit dit en passant, vous seriez surpris du nombre de fonctionnalités de navigateur relativement importantes qui se sont glissées dans des versions comme celle-ci.

De Comment nous avons obtenu le Favicon par Jay Hoffmann

Je suis heureux de voir la plate-forme jeter un peu d’amour aux favicons. Ils sont depuis longtemps l’un de mes petits détails de conception préférés, et je suis ravi qu’ils deviennent plus réactifs aux besoins des utilisateurs. Si vous avez un moment, pourquoi ne pas insérer un favicon SVG dans votre projet de la même manière que Bharat Shyam l’a fait en 1999.




Close Menu