Présentation des principes de base de la création d'un favicon adaptatif.
Dans cet article, je vais vous expliquer comment créer un favicon adaptatif avec le SVG. Essayez la démonstration.
Si vous préférez la vidéo, voici une version YouTube de ce post:
Présentation
Un favicon personnalisé est un excellent moyen de peaufiner un projet Web. Il s'affiche dans les onglets du navigateur pour ordinateur, dans les lecteurs de la page "Enregistrer pour plus tard", dans d'autres articles de blog redirigeant vers votre site, etc. Traditionnellement, cette opération s'effectuait avec le type de fichier .ico, mais les navigateurs ont récemment autorisé l'utilisation du format vectoriel SVG. L'amélioration progressive vous permet de diffuser des favicons .ico bien compatibles et de passer à .svg si disponible.
Les SVG peuvent évoluer à la hausse ou à la baisse sans perte de qualité, et peuvent être de très petite taille. Ils peuvent également inclure du code CSS intégré, même des requêtes média intégrées. Cela signifie que si un favicon SVG est utilisé dans une application de lecteur ou des barres de favoris, il est possible que l'utilisateur obtienne une icône pertinente (claire ou sombre) en raison des styles de préférences sombres fournis dans le fichier SVG. Le SVG s'adapte ensuite à l'aide de son style intégré pour tenir compte des préférences utilisateur claires et sombres.
Markup
Le balisage SVG est XML avec une extension de type de fichier .svg, qui lui permet d'accueillir des types de code plus dynamiques.
Commencez par créer favicon.svg
Créez un fichier nommé favicon.svg et ajoutez le code suivant:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Voici mon fichier SVG. J'ai dimensionné viewBox en fonction de mon visuel:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Ajouter des formes et des trajets
Ensuite, ajoutez le code du chemin SVG. Cela implique souvent d'ouvrir le SVG dans un éditeur de code, mais ce code n'est généralement pas convivial. Voici un excellent guide qui vous guidera dans l'exportation et l'optimisation des SVG à partir d'outils de conception.
Les visuels de ce défi IUG ont été créés par un concepteur qui l'a créé avec Adobe Illustrator. je l'ai fortement optimisé. Je l'ai passé en revue avec le SVGOMG, puis je l'ai modifié manuellement.
Voici un exemple du groupe de chemins d'accès artistiques skull, 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, dans un format lisible, comme #eyes-and-nose, et les classes comme .favicon-stroke. Je les modifie manuellement, en prévision du CSS.
Il n'est pas nécessaire d'ajouter des classes et des ID pour que votre SVG devienne un favicon adaptatif.
Associer le fichier SVG du favicon à partir du code HTML
Dans la balise <head> de votre code HTML, après le favicon .ico, ajoutez les éléments suivants:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Comme la nouvelle icône peut sembler identique à la version .ico, vérifiez qu'elle est utilisée. Ouvrez le panneau "Network" (Réseau) des outils de développement. Filtrez par images et recherchez favicon:
Styles
Comme pour le code HTML, vous pouvez ajouter une balise <style> au balisage à utiliser avec la portée du document:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
Le thème clair sera la couleur par défaut de mon SVG favicon. Les styles pour lesquels j'ai écrit étaient principalement des 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 à la partie la plus amusante : appliquer un style au thème sombre de votre favicon. Les styles correspondants seront intégrés à une requête média dans le tag 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>
La mienne a fini comme ceci:
<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 violet vif par un beau gris foncé (#343a40). J'ai changé la couleur de l'os du crâne du blanc au gris clair (#adb5bd), mais j'ai laissé le chapeau d'accentuation rose.
Conclusion
Maintenant que vous savez comment je l'ai fait, comment le feriez-vous‽ 😃 ?
Diversissons nos approches et apprenons toutes les façons de créer sur le Web. Créez une démo, cliquez sur les liens tweet me, et je l'ajouterai à la section "Remix" de la communauté ci-dessous.