Kostenlos & ohne Anmeldung

Favicon aus SVG –
in jeder Größe gestochen scharf

Lädst du oben eine SVG hoch, bleibt sie als favicon.svg erhalten – sie skaliert verlustfrei, auf jedem Bildschirm. Die PNG-Größen und die favicon.ico entstehen trotzdem, für Browser, die noch keine SVG anzeigen. Gerechnet wird im Browser, hochgeladen wird nichts.

Verlustfrei skalierbar Oft unter 2 KB PNG-Rückfall inklusive
Bild hierher ziehen oder klicken · PNG, JPG, WebP – oder SVG
am besten quadratisch, mindestens 512 px
Noch nichts geladen.
Die Dateien kommen einzeln nacheinander – der Browser blockt sonst ab der zweiten.

Sobald du ein Bild lädst, erscheinen hier alle Größen.

Ein Favicon, das
nie unscharf wird

PNG-Symbole haben eine feste Pixelzahl. Eine SVG beschreibt Formen statt Pixel – daraus ergeben sich drei Vorteile, die man erst auf großen Bildschirmen sieht.

Scharf auf jedem Schirm

Ob 16 Pixel im Tab oder groß in der Lesezeichenleiste eines 5K-Monitors: Die SVG wird jedes Mal frisch gezeichnet, statt ein kleines Bild hochzurechnen.

Dunkelmodus möglich

In einer SVG darf ein @media (prefers-color-scheme: dark) stehen. Damit kann dein Symbol im dunklen Browser-Design andere Farben zeigen – mit PNG geht das nicht.

Meist kleiner

Ein einfaches Logo als SVG liegt oft unter 2 KB – weniger als das 512er-PNG allein. Bei sehr verschachtelten Illustrationen kann es allerdings kippen.

Vier Dinge, die eine
Favicon-SVG braucht

  • Eine viewBox. Ohne sie weiß der Browser nicht, welchen Ausschnitt er zeichnen soll – das Symbol bleibt leer oder landet auf 150 Pixel. Fehlen width und height, ergänzt das Werkzeug oben sie aus der viewBox.
  • Ein grob gebautes Motiv. Bei 16 Pixeln verschwinden dünne Linien und Schrift restlos. Nimm das Bildzeichen deines Logos, nicht den Schriftzug – und prüfe es in der Vorschau oben in Originalgröße.
  • Kein Skript darin. Eine SVG kann JavaScript enthalten. Weil sie von deiner eigenen Domain ausgeliefert wird, wäre das ein Einfallstor. Für ein Favicon braucht es nie Skript – lösche es vor dem Einbinden.
  • Die PNG-Varianten trotzdem. Safari nutzt für das Startbildschirm-Symbol weiter PNG, und ältere Browser kennen SVG-Favicons gar nicht. Deshalb gehört die SVG zusätzlich in den Seitenkopf, nicht anstelle der übrigen Größen.
Support

Häufig gestellte Fragen

Was zum SVG-Favicon am häufigsten gefragt wird.

Chrome, Edge, Firefox und Opera zeigen es. Safari nutzt es im Tab inzwischen ebenfalls, greift für das Startbildschirm-Symbol aber weiter auf das PNG zurück. Deshalb liefert man beides aus.
Mit <code>&lt;link rel="icon" type="image/svg+xml" href="/favicon.svg"&gt;</code> – und darunter weiter die Verweise auf favicon.ico und die PNG-Größen. Browser nehmen sich die Variante, die sie können. Den fertigen Schnipsel bekommst du oben mitgeliefert.
Nein. Viele Programme fragen stur <code>/favicon.ico</code> ab, und ältere Browser kennen SVG-Favicons nicht. Die .ico bleibt die Rückfallebene – der Generator oben erzeugt sie mit.
Meist fehlt die <code>viewBox</code>, oder das Motiv ist für 16 Pixel zu fein. Prüfe außerdem, ob der Server die Datei als <code>image/svg+xml</code> ausliefert – mit falschem MIME-Typ ignorieren Browser sie.
Ja. Ein <code>&lt;style&gt;</code>-Block mit <code>@media (prefers-color-scheme: dark)</code> in der SVG genügt – dann hat dein Symbol im dunklen Browser-Design eigene Farben. Mit PNG ist das nicht möglich.
Du brauchst den ganzen Satz? Der Favicon-Generator erzeugt alle Größen, die favicon.ico und das Apple-Touch-Icon.
Alle Größen