Eine grundlegende Übersicht zum Erstellen eines adaptiven Favicons.
In diesem Beitrag möchte ich meine Gedanken dazu teilen, wie man ein adaptives Favicon mit SVG erstellt. Demo ansehen
Wenn du lieber ein Video ansiehst, findest du hier eine YouTube-Version dieses Beitrags:
Übersicht
Ein benutzerdefiniertes Favicon ist eine gute Möglichkeit, ein Webprojekt zu optimieren. Sie wird auf Browser-Tabs auf Computern sowie in Lesezeichen, anderen Blogbeiträgen mit Links zu deiner Website und mehr angezeigt. Traditionell wurde dies mit dem Dateityp .ico
durchgeführt, aber in letzter Zeit erlauben Browser auch die Verwendung von SVG, einem Vektorformat. 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 skaliert werden und kann potenziell sehr klein sein. Außerdem können eingebettete CSS- und Media-Abfragen enthalten sein. 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-Herausforderung stammt von einem Designer, der es in Adobe Illustrator erstellt hat. Ich habe sie 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 aus meinem Projekt 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 visuell 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>
Meins sah 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 die leuchtend violetten Rahmen durch ein schönes, kühles Dunkelgrau (#343a40
) ersetzt und die Farbe des Schädelknochens von Weiß zu einem hellen, kühlen Grau (#adb5bd
) geändert, aber den rosa Akzenthut beibehalten.
Fazit
Wie würden Sie das 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.