SVG-Favicon-Generator - mit der SVG als Hauptsymbol
Die meisten Favicon-Generatoren geben dir einen Ordner voller PNGs und ein Dutzend Link-Tags für iOS-Versionen, die seit Jahren nicht mehr ausgeliefert werden - und lassen ausgerechnet die Datei weg, auf die es auf einer heutigen Seite am meisten ankommt. Das Ergebnis ist gleichzeitig aufgebläht und unvollständig. Deine SVG ist das beste Favicon, das du hast: Eine Vektordatei deckt jede Bildschirmdichte ab, die es je geben wird, und ist meist kleiner als die 32-Pixel-PNG, durch die man sie ersetzt. Deshalb liefert dieses Paket sie als favicon.svg aus und richtet die Auszeichnung zuerst auf sie, mit der ICO als Rückfallebene darunter. Die PNGs sind alle weiterhin dabei, für die Stellen, die sie brauchen, jede einzeln aus deinem Vektor in ihrer eigenen Größe gezeichnet statt aus einem großen Rendering verkleinert. Alles entsteht in deinem Browser, nichts wird hochgeladen.
So verwendest du dieses Tool
SVG hineinziehen
Ziehe dein Logo oder deine Marke auf das Feld oben, bis 5 MB. Quadratische Grafik funktioniert am besten - alles andere wird in einen quadratischen Rahmen eingepasst, und der leere Raum bleibt transparent.
Die kleinen Größen prüfen
Die Vorschau zeigt 16, 32 und 48 Pixel in Originalgröße, aus deinem Vektor über denselben Weg gerendert, den das Paket nutzt. Ist die Marke hier bei 16 Pixeln unleserlich, ist es genau das, was deine Besucher im Tab sehen werden.
Deine Seite benennen
Was du eingibst, landet in site.webmanifest als Name und Kurzname - das zeigen Android und Desktop-Chrome an, wenn jemand deine Seite auf den Startbildschirm legt. Lässt du es leer, liefert das Manifest einen neutralen Platzhalter zum späteren Bearbeiten.
Paket erstellen und herunterladen
Klicke auf „Favicon-Paket erstellen“. Deine Zeichnung wird mit 16, 32, 48, 180, 192 und 512 Pixeln gerendert, drei davon wandern in favicon.ico, und alles wird mit Manifest und README gezippt.
Die vier Tags kopieren
Entpacke alles ins Wurzelverzeichnis deiner Seite und kopiere dann die vier Link-Tags neben dem Download-Knopf in dein <head>. Das ist die ganze Installation - kein Build-Schritt, keine weitere Konfiguration.
Häufig gestellte Fragen
Was genau steckt im ZIP?
Sieben Dateien: favicon.svg - deine Originalgrafik - dazu favicon.ico mit 16, 32 und 48 Pixeln, apple-touch-icon.png mit 180, icon-192.png und icon-512.png für Android und installierbare Apps, site.webmanifest und eine README, die die Tags wiederholt. Jede Datei, auf die der Ausschnitt verweist, liegt im Archiv.
Warum steht die SVG vor der ICO?
Weil sie das bessere Symbol ist und Browser das letzte Format nehmen, das sie verstehen. Eine Vektordatei bleibt auf jeder existierenden Bildschirmdichte scharf, braucht keine Größenvarianten und ist oft kleiner als eine 32-Pixel-PNG. Browser, die sie nicht nutzen können, fallen einfach auf die ICO in der nächsten Zeile zurück.
Reichen wirklich vier Tags?
Ja, auf jeder heute gebauten Seite. Die langen Listen von apple-touch-icon-precomposed-Varianten, die Generatoren weiterhin ausspucken, zielen auf iOS 6 und früher. Aktuelles iOS liest ein einzelnes apple-touch-icon, Android liest das Manifest, alles andere liest die Icon-Links. Vier Tags decken das ab.
Kann mein Favicon auf den Dunkelmodus reagieren?
Nur die SVG kann das, ein weiterer Grund für ihre erste Position. Setze eine Media Query in die SVG selbst - eine prefers-color-scheme-Regel auf einer Füllung - und der Browser wendet sie live im Tab an. Die ICO und die PNGs sind feste Bilder und behalten die Farben, mit denen sie gerendert wurden.
Warum werden die kleinen Größen einzeln gerendert?
Weil das Verkleinern eines großen Renderings genau das Detail wegwirft, von dem kleine Symbole leben. Gemessen an einer Pixelart-Marke bei 16 × 16: aus dem Vektor gezeichnet 141 deckende Pixel und keine halbtransparenten, dieselbe Grafik aus 512 verkleinert 98 deckende und 64 verwaschene. 40 Prozent wurden zu Brei.
Wohin gehören die Dateien auf meinem Server?
Alle ins Wurzelverzeichnis, neben index.html, damit sie unter /favicon.svg, /favicon.ico und so weiter erreichbar sind. Genau deshalb beginnen die Pfade im Ausschnitt mit einem Schrägstrich. Liefert dein Framework statische Dateien aus einem public- oder static-Ordner, lege sie dorthin, die URLs bleiben gleich.
Mein Favicon hat sich nach dem Hochladen nicht geändert.
Browser cachen Favicons härter als fast alles andere und ignorieren dabei oft ein normales Neuladen. Öffne die Symbol-URL direkt und lade sie neu, oder prüfe es in einem privaten Fenster. Fast immer ist es der Cache und keine kaputte Datei, stelle also erst sicher, dass die URL lädt.
Welche Größe sollte meine Quell-SVG haben?
Die Größe der viewBox spielt kaum eine Rolle, da alles aus der Geometrie neu gezeichnet wird - die quadratischen Proportionen dagegen schon. Entwirf die Marke zuerst so, dass sie bei 16 Pixeln funktioniert, und skaliere von dort nach oben. Ein Logo, das auf einer Visitenkarte funktioniert, hat für einen Browser-Tab meist viel zu viel Detail.
Brauche ich die ICO überhaupt noch?
Behalte sie. Sie ist ein paar Kilobyte groß und deckt die Stellen ab, die niemand testet: Windows-Desktop-Verknüpfungen, RSS- und Podcast-Reader, Linkvorschauen in älteren Chat-Programmen und eingebettete Browser in Desktop-Anwendungen. Die meisten davon fragen per Konvention nach /favicon.ico und ignorieren, was deine Auszeichnung angibt.
Wird für den Bau des Pakets etwas hochgeladen?
Nein. Jedes Rendering, das ICO-Packen und das ZIP entstehen alle in deinem Browser. Dein Logo erreicht nie einen Server, was auch bedeutet, dass das Paket sofort beim Klick fertig ist statt nach einer Warteschlange, und dass nirgendwo eine Kopie deiner Grafik zurückbleibt.
Das könnte dich auch interessieren
Funktioniert etwas nicht? Fehler melden