Présentation générale 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.
<ph type="x-smartling-placeholder">Si vous préférez la 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 d’ordinateur de bureau et
également dans "Enregistrer pour plus tard" lecteurs, d'autres articles de blog redirigeant vers votre site et
plus encore. Habituellement, cela a été fait avec le type de fichier .ico, mais récemment
les navigateurs ont autorisé l'utilisation
SVG : format vectoriel. En utilisant
progressive
amélioration
vous pouvez diffuser des favicons .ico bien compatibles et passer à un .svg si
disponibles.
Le format SVG peut évoluer à la hausse ou à la baisse sans d'une perte de qualité et d'une très petite taille, ils peuvent également du code CSS intégré, et même des requêtes média intégrées. Autrement dit, 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é pour les utilisateurs clair et sombre. préférences.
<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 des favicon.svg
Créez un fichier nommé favicon.svg et ajoutez-y ce qui suit:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Voici mon fichier SVG, j'ai redimensionné l'élément viewBox correspondant à mon visuel:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Ajout de formes et de trajets
Ajoutez ensuite le code de chemin SVG. Cela revient souvent à ouvrir le fichier SVG dans un éditeur de code, ce code n'est généralement pas convivial. Ce guide pratique pour vous guider en exportant et en optimisant les images SVG, des outils de conception.
Les illustrations de ce défi GUI sont d'un graphiste qui a créé chez Adobe Illustrator. Je suis fortement optimisé. Je l'ai exécuté en utilisant SVGOMG puis j'ai remonté le texte à la main.
Voici un exemple du groupe de chemins d'accès à l'illustration skull provenant du mien, après nettoyage
comme suit:
<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 l'ID, lisible par l'humain,
des sélecteurs comme
#eyes-and-nose et
cours comme
.favicon-stroke Je les ai modifiées manuellement, 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) dans les outils de développement. Filtrer par images et rechercher
Favicon:
Styles
Comme pour le code HTML, vous pouvez ajouter une balise <style> au balisage pour l'utiliser
étendue 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. La seront incluses dans une requête média au sein du 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 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 violet vif par un joli gris foncé (#343a40).
a changé la couleur de l'os du crâne, du blanc au gris froid clair (#adb5bd), mais
a quitté le chapeau rose.
Conclusion
Maintenant que vous savez comment j'ai fait, comment feriez-vous ? 😃
Diversifiez nos approches et découvrons toutes les manières de créer des applications 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.