Présentation des principes de base de la création d'un favicon adaptatif.
Dans ce post, je vais vous expliquer comment créer un favicon adaptatif avec SVG. Essayez la démonstration.
Si vous préférez regarder une vidéo, voici une version YouTube de cet article :
Présentation
Un favicon personnalisé est
est un excellent moyen
d'affiner 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 qui redirigent vers votre site, etc. Habituellement, cela a été fait avec le type de fichier .ico, mais récemment
les navigateurs ont autorisé l'utilisation
SVG : 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 les barres de favoris, il est possible que l'utilisateur obtienne un thème une icône pertinente (clair ou sombre), en raison des styles de préférence sombre fournis à l'intérieur de SVG. Le SVG s'adapte ensuite à l'aide de son style intégré en fonction des préférences d'affichage clair et sombre des utilisateurs.
<ph type="x-smartling-placeholder">Majoration
Le balisage SVG est
XML avec
une extension de type de fichier .svg qui lui permet de contenir des types plus dynamiques de
du code source.
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 chemin 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 suis fortement optimisé. Je l'ai exécuté en utilisant SVGOMG puis j'ai remonté le montage à la main.
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 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 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 bien
utilisé. Ouvrez le panneau "Network" (Réseau) des outils pour les développeurs. Filtrer par images et rechercher
Favicon:
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 du SVG de mon favicon. La styles pour lesquels j'ai écrit qui é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 à la version du thème 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>
La mienne s'est terminée 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 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 feriez-vous ? 😃
Diversifions nos approches et découvrons toutes les façons de créer sur le Web. Créer une démonstration, me envoyer des tweets et je l'ajouterai à la section des remix de la communauté ci-dessous.