Ein grundlegender Überblick über die Erstellung eines adaptiven Favicon.
In diesem Beitrag möchte ich erklären, wie ich ein adaptives Favicon mit SVG. Demo ansehen
<ph type="x-smartling-placeholder">Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:
Übersicht
Ein benutzerdefiniertes Favicon ist
ist eine tolle Möglichkeit, ein Webprojekt zu perfektionieren. Es wird auf den Browsertabs auf dem Desktop angezeigt.
auch in „Für später speichern“ Lesern, anderen Blogposts, die auf eure Website verlinken,
mehr. Bisher wurde dies beim Dateityp .ico verwendet, seit Kurzem
die Verwendung von
SVG, ein Vektorformat. Mit
Progressive
Optimierung
können Sie gut unterstützte .ico-Favicons ausliefern und ein Upgrade auf .svg ausführen, wenn
verfügbar.
SVG kann hoch- und herunterskaliert werden, Qualitätsverluste und sie können potenziell sehr klein sein, von eingebetteten CSS, auch von eingebetteten Medienabfragen. Wenn also ein SVG-Favicon verwendet wird, oder Lesezeichenleisten öffnen, besteht die Möglichkeit, dass ein Design relevantes (helles oder dunkles) Symbol aufgrund der dunkle Einstellungsstile im SVG. Die SVG-Datei passt sich dann mithilfe des eingebetteten Stils an den hellen und dunklen Nutzer an. Einstellungen.
<ph type="x-smartling-placeholder">Markup
SVG-Markup ist
XML mit
die Dateiendung .svg, mit der dynamischere
Code.
Nimm als Erstes 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 Größe von viewBox für mein Artwork 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 den SVG-Pfadcode hinzu. Oft bedeutet dies, die SVG-Datei in einem Code-Editor zu öffnen, dass der Code in der Regel nicht für Menschen geeignet ist. Hier finden Sie einen hilfreichen Leitfaden, durch Exportieren und Optimieren von SVG Designtools.
Das Artwork für die GUI Challenge kam von einem Designer, der in Adobe Illustrator: Ich bin sehr optimiert haben. Ich habe sie durch SVGOMG angesehen. und dann von Hand bearbeitet.
Hier ist ein Beispiel für die Artwork-Pfadgruppe „skull“ von mir nach der Bereinigung.
es:
<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 lesbare ID.
Selektoren wie
#eyes-and-nose und
Kurse wie
.favicon-stroke Sie wurden von mir in Vorbereitung auf CSS bearbeitet.
Das Hinzufügen von Klassen und IDs ist nicht erforderlich, damit Ihr SVG ein adaptives Favicon wird.
Favicon-SVG über HTML verknüpfen
Fügen Sie im <head>-Tag Ihres HTML-Codes nach dem Favicon .ico 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. Öffne in den Entwicklertools den Bereich „Netzwerk“. Nach Bildern filtern und suchen nach
Favicon:
Stile
Wie bei HTML kannst du dem Markup ein <style>-Tag hinzufügen, um es für diese
Dokumentumfang:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
Das helle Design ist die Standardfarbe meines Favicon-SVG. Die Stile, die ich 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 schönste Teil: Stile für das dunkle Design deines Favicons. Die Stile dafür werden in eine Medienabfrage innerhalb des Stil-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 lila Rahmenlinien durch ein kühles Dunkelgrau (#343a40) ersetzt.
die Farbe des Schädelknochens von Weiß in ein helles kühles Grau (#adb5bd) geändert, aber
den pinkfarbenen Akzenthut.
Fazit
Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du... ‽ 🙂
Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstelle eine Demo, twittere mir Links und ich füge sie hinzu im Abschnitt „Community-Remixe“ weiter unten.