Adaptives Favicon erstellen

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

Die Browser-Tabs passen sich an die Änderungen des hellen und dunklen macOS-Systemthemas an. Demo testen

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.

Große und leicht zu unterscheidende helle und dunkle favicon-Beispiele.

Helle und dunkle Tabs in jedem Browser, die einen Überblick über das adaptive Symbol von oben nach unten bieten: Safari, Firefox, Chrome.
Helle und dunkle Tabs in jedem Browser, die einen Überblick über das adaptive Symbol von oben nach unten bieten: Safari, Firefox, Chrome.

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.

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:

Screenshot des Bereichs „Netzwerk“ in den DevTools mit einem Filter, nach dem nach „favicon“ gesucht wurde, und der hervorgehobenen Ressource „favicon.svg“.

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>

Beispiel für eine Vorschau des Favicons im hellen Design

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>

Screenshot der DevTools, in dem die Mediaabfrage für das dunkle Design zu sehen ist, die die Füllfarbe der Augen und der Nase des SVG überschreibt.

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>

Beispiel für eine Vorschau des Favicons im dunklen Design.

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.

Vorschau von hellen und dunklen Favicons nebeneinander

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.

Remixe der Community