Créer un favicon adaptatif

Présentation de base sur la création d'une favicon adaptative.

Dans cet article, je vais vous expliquer comment créer une favicon adaptative avec SVG. Essayez la démo.

Les onglets du navigateur s'adaptent aux changements de thème clair et sombre du système macOS. Essayer la démonstration

Si vous préférez regarder une vidéo, voici une version YouTube de cet article:

Présentation

Une favicon personnalisée est un excellent moyen de peaufiner un projet Web. Il s'affiche dans les onglets du navigateur sur ordinateur, ainsi que dans les lecteurs "Enregistrer pour plus tard", d'autres articles de blog contenant un lien vers votre site, etc. Traditionnellement, cela se faisait avec le type de fichier .ico, mais les navigateurs ont récemment autorisé l'utilisation du format vectoriel SVG. Grâce à l'amélioration progressive, vous pouvez diffuser des favicons .ico bien compatibles et passer à un .svg si disponible.

Le format SVG peut être mis à l'échelle à la hausse et à la baisse sans perte de qualité. Il peut également être très petit. Il peut également comporter du CSS intégré, voire des requêtes multimédias intégrées. Cela signifie que si une favicon SVG est utilisée dans une application de lecteur ou dans des barres de favoris, l'utilisateur peut obtenir une icône adaptée au thème (clair ou sombre) en raison des styles de préférences sombres fournis dans le SVG. Le SVG s'adapte ensuite à l'aide de son style intégré en fonction des préférences d'affichage claires et sombres des utilisateurs.

Exemples de favicons claires et sombres, de grande taille et faciles à distinguer.

Onglets clairs et sombres dans chaque navigateur, offrant une vue d'ensemble de l'icône adaptative de haut en bas : Safari, Firefox et Chrome.
Onglets clairs et sombres dans chaque navigateur offrant une vue d'ensemble de l'icône adaptative de haut en bas : Safari, Firefox, Chrome.

Annoter

Le balisage SVG est un XML utilisant une extension de type de fichier .svg, ce qui lui permet de contenir des types de code plus dynamiques.

Commencez par créer favicon.svg

Créez un fichier nommé favicon.svg et ajoutez les éléments suivants:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>

Voici mon fichier SVG. J'ai dimensionné l'viewBox en fonction de mon illustration:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">

</svg>

Ajouter des formes et des tracés

Ajoutez ensuite le code de tracé SVG. Cela implique souvent d'ouvrir le fichier SVG dans un éditeur de code, mais ce code n'est généralement pas lisible par l'humain. Voici un excellent guide qui vous explique comment exporter et optimiser des fichiers SVG à partir d'outils de conception.

Les illustrations de ce défi d'IUG ont été créées par un concepteur dans Adobe Illustrator. Je l'ai fortement optimisé. Je l'ai exécuté avec SVGOMG, puis j'ai supprimé manuellement les éléments inutiles.

Voici un exemple du groupe de chemins d'illustration skull de mon fichier, après l'avoir nettoyé:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <g id="skull">
    <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
    <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
    <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
  </g>
</svg>

Notez les sélecteurs d'ID lisibles par l'humain, comme #eyes-and-nose, et les classes, comme .favicon-stroke. Il s'agit de mes modifications manuelles, en préparation du CSS. Il n'est pas nécessaire d'ajouter des classes et des ID pour que votre SVG soit une favicon adaptative.

Dans la balise <head> de votre code HTML, après la favicon .ico, ajoutez ce qui suit:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Comme la nouvelle icône peut être identique à la version .ico, vérifiez qu'elle est utilisée. Ouvrez le panneau "Network" (Réseau) des outils pour les développeurs. Filtrez par images et recherchez une icône:

Capture d&#39;écran du panneau &quot;Network&quot; (Réseau) de DevTools avec un filtre de recherche de favicon et la ressource favicon.svg mise en surbrillance.

Styles

Comme pour le HTML, vous pouvez ajouter une balise <style> au balisage pour l'utiliser dans la portée du document:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

La version du thème clair sera la couleur par défaut de ma favicon SVG. Les styles que j'ai écrits à cette fin concernaient principalement les couleurs de trait et de remplissage:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    .favicon-stroke {
      stroke-width: 8px;
      stroke: #8929ff;
    }
    #skull-outline { fill: white }
    #eyes-and-nose, #hat-outline { fill: #8929ff }
    #hat-fill, #hat-bill { fill: #e662e6 }
  </style>
  
</svg>

Exemple d&#39;aperçu de la favicon du thème clair.

Passons maintenant à la partie la plus amusante : styliser la version sombre de votre favicon. Les styles correspondants seront inclus dans une requête multimédia dans la balise de style:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  
</svg>

Capture d&#39;écran des outils de développement montrant la requête multimédia du thème sombre écrasant la couleur de remplissage des yeux et du nez du SVG.

Le mien s'est présenté comme suit:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
    @media (prefers-color-scheme: dark) {
      .favicon-stroke { stroke: #343a40 }
      #skull-outline { fill: #adb5bd }
      #hat-outline { fill: #343a40 }
      #eyes-and-nose { fill: #343a40 }
    }
  </style>
  
</svg>

Exemple d&#39;aperçu de la favicon avec le thème sombre.

J'ai choisi de remplacer les bordures violettes vives par un gris foncé agréable et frais (#343a40), j'ai remplacé la couleur des os du crâne du blanc par un gris clair et frais (#adb5bd), mais j'ai conservé le chapeau rose.

Aperçu côte à côte des favicons claires et sombres.

Conclusion

Maintenant que vous savez comment j'ai fait, comment procéderiez-vous ? 🙂

Diversifions nos approches et découvrons toutes les façons de créer sur le Web. Créez une démo, tweetez-moi des liens et je les ajouterai à la section "Remix de la communauté" ci-dessous.

Remix de la communauté