Ein grundlegender Überblick über die Erstellung eines adaptiven Favicon.
In diesem Beitrag möchte ich meine Gedanken dazu teilen, wie man ein adaptives Favicon mit SVG erstellt. Demo ansehen
Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:
Übersicht
Mit einem benutzerdefinierten Favicon lässt sich ein Webprojekt hervorragend optimieren. Sie wird auf Browser-Tabs auf dem Computer sowie in Lesern von „Später lesen“ und in anderen Blogbeiträgen angezeigt, die auf Ihre Website verlinken. Traditionell wurde dies mit dem Dateityp .ico gemacht, aber in letzter Zeit haben Browser die Verwendung des Vektorformats SVG erlaubt. Mithilfe der progressiven Verbesserung können Sie gut unterstützte .ico-Favicons bereitstellen und bei Verfügbarkeit auf .svg umstellen.
SVG kann ohne Qualitätsverlust vergrößert und verkleinert werden. Außerdem können sie sehr klein sein und eingebettetes CSS und sogar eingebettete Mediaabfragen enthalten. Wenn also ein SVG-Favicon in einer Lese-App oder in Lesezeichenleisten verwendet wird, kann es sein, dass der Nutzer aufgrund der im SVG enthaltenen Stilvorlagen für dunkle Designs ein zum Thema passendes Symbol (hell oder dunkel) sieht. Das SVG wird dann mithilfe des eingebetteten Stylings an die hellen und dunklen Nutzereinstellungen angepasst.
Markieren & Zeichnen
SVG-Markup ist XML mit der Dateiendung .svg, die dynamischere Codetypen ermöglicht.
Erstellen Sie zuerst favicon.svg
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. Ich habe die viewBox für mein Artwork entsprechend angepasst:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Formen und Pfade hinzufügen
Fügen Sie als Nächstes SVG-Pfadcode hinzu. Häufig bedeutet das, die SVG-Datei in einem Code-Editor zu öffnen. Dieser Code ist jedoch in der Regel nicht für Menschen geeignet. In dieser Anleitung wird beschrieben, wie Sie SVG-Dateien aus Designtools exportieren und optimieren.
Das Artwork für diese GUI-Challenge stammt von einem Designer, der es in Adobe Illustrator erstellt hat. Ich habe es stark optimiert. Ich habe es mit SVGOMG bearbeitet und dann per Hand die unnötigen Elemente entfernt.
Hier ist ein Beispiel für die skull-Artwork-Pfadgruppe von mir 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 für Menschen lesbaren ID-Auswahlen wie #eyes-and-nose und Klassen wie .favicon-stroke. Diese stammen aus meiner manuellen Bearbeitung zur Vorbereitung auf CSS.
Das Hinzufügen von Klassen und IDs ist nicht erforderlich, damit Ihr SVG ein adaptives Favicon ist.
Favicon-SVG über HTML verknüpfen
Fügen Sie im <head>-Tag Ihrer HTML-Datei nach dem .ico-Favicon Folgendes hinzu:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Da das neue Symbol möglicherweise identisch mit der .ico-Version aussieht, prüfen Sie, ob es verwendet wird. Öffnen Sie den Bereich „Netzwerk“ in den Entwicklertools. Filtern Sie nach Bildern und suchen Sie nach einem Favicon:
Stile
Wie bei HTML können Sie dem Markup ein <style>-Tag hinzufügen, das für diesen Dokumentumfang verwendet werden soll:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
Die Version für das helle Design ist die Standardfarbe meines favicon-SVG. Die Stile, die ich dafür geschrieben habe, waren hauptsächlich Strich- und Füllungsfarben:
<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>
Als Nächstes kommt der spaßigste Teil: das Design der Version Ihres Favicons im dunklen Design. Die entsprechenden Stile werden in eine Medienabfrage innerhalb des Style-Tags eingefügt:
<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 endete so:
<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 die leuchtend lilafarbenen Rahmen durch ein schönes, kühles Dunkelgrau (#343a40) ersetzt, die Farbe des Schädelknochens von Weiß in ein helles, kühles Grau (#adb5bd) geändert, aber den rosa Akzenthut beibehalten.
Fazit
Wie würden Sie es machen?
Lassen Sie uns unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, wie Sie im Web entwickeln können. Erstelle eine Demo, tweete mir Links und ich füge sie unten in den Abschnitt „Community-Remixe“ hinzu.