# 122: Der Staat Favicons - CSS-Tricks

Anonim

Für immer haben wir alle 16 × 16 Grafiken gemacht und sie irgendwie in das .ico-Format gebracht. Ich habe dieses Konverter-Tool wahrscheinlich millionenfach verwendet. Irgendwann wurde es verwirrender. Browser können auch .png.webp-Favicons unterstützen. Und jetzt gibt es Retina-Displays, und nichts sieht auf der Retina schlechter aus als kleine winzige Grafiken, die vergrößert wurden. Browser unterstützen jetzt auch 32 × 32-Favoriten. Was sollen wir tun?

Wenn Sie beides angeben, ignorieren viele Browser die PNG-Datei und verwenden die ICO-Datei. Jonathan Neal hat die ganze Geschichte. Verwenden wir also einfach diese .ico für beide. Es ist ein einzigartiges Format, das sowieso dafür entwickelt wurde.

  • Erstellen Sie sowohl die 16 × 16- als auch die 32 × 32-Version, und verbessern Sie beide mit Ihren besten Fähigkeiten im Pixel-Crafting
  • Speichern Sie sie als PNGs in voller Qualität
  • Erstelle ein neues Projekt in Icon Slate (via)
  • Ziehen Sie die Versionen in die entsprechenden "Wells".
  • "Erstellen", um die .ico zu erstellen
  • Verknüpfen Sie diese .ico wie gewohnt: