Grundlegende Informationen zum Erstellen eines adaptiven Favicons
In diesem Beitrag möchte ich darüber sprechen, wie ein adaptives Favicon mit SVG erstellt wird. Demo ansehen
Falls du lieber ein Video hast, findest du hier eine YouTube-Version dieses Beitrags:
Überblick
Ein benutzerdefiniertes Favicon ist eine tolle Möglichkeit, ein Webprojekt zu optimieren. Sie wird unter anderem auf Desktop-Browsertabs sowie in „Für später speichern“-Lesegeräten und anderen Blogposts angezeigt, die auf deine Website verlinken. Traditionell wurde dies mit dem Dateityp .ico verwendet, aber seit Kurzem können Browser das Vektorformat SVG verwenden. Mit der progressiven Optimierung können Sie gut unterstützte .ico-Favicons bereitstellen und auf .svg upgraden, sofern verfügbar.
SVG kann ohne Qualitätsverlust hoch- und herunterskaliert werden und möglicherweise sehr klein sein. Außerdem können sie eingebettetes CSS enthalten, sogar eingebettete Medienabfragen. Wenn also ein SVG-Favicon in einer Lese-App oder in Lesezeichenleisten verwendet wird, ist es möglich, dass der Nutzer aufgrund der dunklen Voreinstellungen im SVG ein für das Thema relevantes Symbol (hell oder dunkel) sieht. Das SVG passt sich dann mithilfe des eingebetteten Stils an helle und dunkle Nutzerpräferenzen an.
Markup
SVG-Markup ist XML mit der Dateiendung .svg. Dadurch können dynamischere Arten von Code aufgenommen werden.
Zuerst favicon.svg verdienen
Erstellen Sie eine neue Datei mit dem Namen favicon.svg und fügen Sie Folgendes hinzu:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Hier ist meine SVG-Datei mit dem für mein Artwork relevanten viewBox:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Formen und Pfade hinzufügen
Als Nächstes fügen Sie den SVG-Pfadcode hinzu. Dies bedeutet häufig, dass das SVG in einem Code-Editor geöffnet wird, aber dieser Code ist im Allgemeinen nicht menschenfreundlich. Hier finden Sie eine hilfreiche Anleitung zum Exportieren und Optimieren von SVG-Dateien aus Designtools.
Das Artwork für diese GUI Challenge stammt von einem Designer, der es in Adobe Illustrator erstellt hat. habe ich sie stark optimiert. Ich lief mit SVGOMG und habe den überflüssigen Inhalt dann von Hand bearbeitet.
Hier ist ein Beispiel für die Artwork-Pfadgruppe skull nach der Bereinigung:
<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>
Beachten Sie die menschenlesbaren ID-Selektoren wie #eyes-and-nose und Klassen wie .favicon-stroke. Ich habe sie als Vorbereitung für CSS von Hand bearbeitet.
Das Hinzufügen von Klassen und IDs ist nicht erforderlich, damit Ihr SVG ein adaptives Favicon wird.
Favicon-SVG in HTML verknüpfen
Fügen Sie im <head>-Tag Ihres HTML-Codes nach dem Favicon .ico Folgendes ein:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Da das neue Symbol möglicherweise mit der .ico-Version identisch ist, prüfen Sie, ob es verwendet wird. Öffne in den Entwicklertools den Bereich „Netzwerk“. Filtern Sie nach Bildern und suchen Sie
nach Favicon:
Stile
Wie bei HTML können Sie dem Markup ein <style>-Tag hinzufügen, um es für diesen Dokumentbereich zu verwenden:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
Das helle Design wird die Standardfarbe meines Favicon-SVG-Bilds sein. Die Stile, die ich dafür geschrieben habe, waren hauptsächlich Strich- und Füllfarben:
<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>
Jetzt kommt der lustigste Teil, der Stil des dunklen Designs Ihres Favicons. Die entsprechenden Stile werden in eine Medienabfrage innerhalb des Stil-Tags übertragen:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
Mein Ergebnis kam so aus:
<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>
Ich habe mich dafür entschieden, die leuchtend lila Rahmen durch ein schönes kühles Dunkelgrau (#343a40) zu ersetzen, die Farbe des Schädelknochens von Weiß in ein helles kühles Grau (#adb5bd) geändert, aber den rosa Akzenthut gelassen.
Fazit
Jetzt weißt du, wie ich es gemacht habe. Wie würdest du es erreichen? 🙂
Diversifizieren wir unsere Ansätze und lernen Sie alle Möglichkeiten kennen, wie wir das Web nutzen können. Erstelle eine Demo und twittere mich über Links, und ich füge sie unten zum Abschnitt über Community-Remixe hinzu.