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.
Si vous préférez la vidéo, voici une version YouTube de cet article:
Présentation
Un favicon personnalisé est un excellent moyen d'améliorer 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 a été effectué avec le type de fichier .ico, mais récemment, les navigateurs ont autorisé l'utilisation de SVG, un format vectoriel. 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 un favicon SVG est utilisé dans une application de lecture ou dans des barres de favoris, il est possible que l'utilisateur obtienne une icône pertinente (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é pour répondre aux préférences utilisateur (clair et sombre).
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 GUI ont été réalisées par un graphiste qui l'a réalisé 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'accès à l'illustration skull que j'ai créé, 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.
Associer la favicon SVG à partir du code HTML
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">
La nouvelle icône pouvant ressembler à 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 :
Styles
Comme pour le HTML, vous pouvez ajouter une balise <style> au balisage à utiliser pour cette portée de 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>
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>
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>
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.
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.