Wie man Favicons im Jahr 2021 erstellt

Ich schätze es immer, wenn jemand die Best Practices für etwas untersucht und neu bewertet, das buchstäblich jede Website benötigt und einen komplexen Satz von Anforderungen hat. Andrey Sitnik hat dies hier mit Favicons getan.

Der endgültige Vorschlag

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Es war ein guter Zeitpunkt, dies hier auf CSS-Tricks zu tun, also habe ich versucht, den Rat buchstabengetreu zu befolgen, und es funktioniert bisher großartig. Ich glaube, ich hatte irgendwann genug davon, wie komplex es war, dass ich ultra-minimalistisch wurde und *nur* eine `favicon.ico`-Datei hatte. Jetzt habe ich all das oben Genannte eingerichtet.

Wo ich mich unterschied…

• Ich habe GIMP oder Inkscape nicht installiert, die das `.ico`-Format exportieren können, also habe ich diesen Favicon-Generator (ich habe ihm mein "Haupt"-SVG gegeben) nur für dieses eine Symbol verwendet.
• Ich fand Figma hilfreich, um Frames neu zu dimensionieren und die richtigen Größen zu exportieren.
• Ich habe ImageOptim zur Optimierung aller Bilder verwendet.
• Ich war nervös, ein "Manifest" hinzuzufügen, weil ich keine anderen PWA-ähnlichen Schritte unternommen habe und es sich wie eine zusätzliche Webanfrage mit wenig Wert anfühlt. Aber ich habe es trotzdem getan.
• Ich habe eine Theme-Farbe (<meta name="theme-color" content="rgb(255, 122, 24)">), weil mir gesagt wurde, es sei eine nette Geste. Fühlt sich verwandt an.

Ich liebe das Dark-Mode-SVG-Konzept

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
      .a { fill: #f0f0f0 }
    }
  </style>
  <path class="a" fill="#0f0f0f" d="…" />
</svg>

Aber ich habe dort keine Tricks angewendet, da ich denke, dass mein Icon ohne Änderungen in beiden Fällen gut aussieht

Ich habe es auch noch nicht geschafft, wieder einen speziellen Entwicklungs-Favicon zu erstellen, aber das werde ich tun, weil ich es äußerst praktisch finde.

Direkter Link →