.ICO-Favicons aus SVG- oder PNG-Vorlagen erstellen
Mehrere Auflösungen für klassische Browser und Windows-Verknüpfungen bündeln — ohne Kampf mit alten ImageMagick-Rezepten.
Weitere Utilities, die gut zu dieser Anleitung passen:
Warum das wichtig ist
Browser fragen weiterhin /favicon.ico an, auch wenn das Web-App-Manifest moderne PNG-/WebP-Kacheln deklariert. Windows heftet Seiten mit .ico-Ressourcen an, die mehrere Größen enthalten, damit Verknüpfungen auf HiDPI-Taskleisten scharf bleiben. Indie-Hacker mit statischen Sites brauchen einen schnellen Schritt zwischen Figma-Export und public/ — ideal ohne IP-sensible Grafiken hochzuladen.
Drei echte Szenarien
Kombiniertes ICO mit 16–256-px-Einträgen aus einem scharfen SVG-Glyph erzeugen.
Weniger 404 bei Legacy-Bots
ICO neben PNG bereitstellen für IE-kompatible Portale, die die IT noch vorschreibt.
Einheitliche Desktop-Verknüpfungen
Mehrdatei-PNG-Sets durch eine ICO ersetzen, eingecheckt ins Docs-Hosting (GitHub Pages).
Ein Artefakt im Commit
Schritt für Schritt
Öffnen Sie SVG zu ICO.
Quadratischen Master vorbereiten
Icons wirken am besten 1:1 — bei Bedarf erst mit Bild zuschneiden Padding trimmen.
SVG (oder kompatibles Raster) hochladen
Vektor skaliert sauber auf ICO-Dichten — Striche in Pfade wandeln, wenn Haarlinien verschwinden.
Eingebettete Größen wählen
Typische Bundles: 16, 32, 48 und 256 px — 24/64 ergänzen, wenn Windows-Kachel-Richtlinien es verlangen.
Jede Ebene in der Vorschau prüfen
Monochrome Glyphen bei 16 px squint-testen — Geometrie vereinfachen, wenn Details zusammenlaufen.
`favicon.ico` laden
Im Site-Root ablegen und mit
<link rel="icon" href="/favicon.ico" sizes="any">für breite Kompatibilität verlinken.
Profi-Tipps
- Mit PNG/WebP koppeln über
<link rel="icon" type="image/png">für moderne Browser, ICO als Auffangnetz. - PNG-Fallback-Größen über SVG zu PNG für
icons-Arrays im Manifest erzeugen. - Cache busten nach Redesigns (
favicon.ico?v=20260502), wenn CDN-TTL hartnäckig sind.
Typische Stolpersteine
Stolperstein
Zu detailreiche Grafik
ICO-Einträge unter 32 px bestrafen filigrane Verläufe — klare Silhouetten bevorzugen.
Stolperstein
Transparenz-Besonderheiten
Manche Windows-Kontexte flatten transparente ICO-Hintergründe zu Schwarz — angeheftete Verknüpfungen auf dunklen Themes testen.
Stolperstein
Falscher MIME-Typ auf dem CDN
Hosting sollte image/x-icon oder image/vnd.microsoft.icon ausliefern — falsch gelabelte Antworten verwirren Crawler.
Wann dieses Tool nicht passt
- Volle PWA-Asset-Pipelines:
@vite-pwaoderreal-faviconfür maskierbare Android-Icons orchestrieren. - Animierte Favicons: ICO-Animation ist Legacy — moderne Tricks sparsam einsetzen und CPU-Last testen.
- macOS
.icns: braucht separate Export-Workflows außerhalb von ICO.
FAQ
Werden Marken-Assets hochgeladen?
Kein Server-Roundtrip — Erzeugung bleibt in der Browser-Sitzung wie andere MoreKits-Bildtools.
Empfohlene maximale Größenanzahl?
Extrem viele Einträge erhöhen die Dateigröße — schlanke Sets für Desktop und Startmenü-Szenarien bevorzugen.
Kann ich von PNG statt SVG starten?
Ja, wenn PNG-Master schon existieren — SVG bleibt ideal für unbegrenzte Skalierung vor Rasterisierung jeder ICO-Schicht.
Nächste Schritte
- Marketing-PNGs nach Export mit dem Bildkompressor komprimieren.
- Farben mit dem Farbpipette/Farb-Editor prüfen.
- Favicon-Ausrollung in der Static-Hosting-Checkliste neben
robots.txtdokumentieren.