Bilder, SVG & Icons
Logo oder vorhandene .ico ablegen, die 16-px-Tab-Vorschau prüfen und das ganze Paket herunterladen.
PNG-, JPG-, WebP-, GIF-, SVG- oder ICO-Datei hier ablegen oder ein Bild aus der Zwischenablage einfügen.
Bilder werden in diesem Browser-Tab gelesen und skaliert; nichts wird hochgeladen.
Bild wählen, ablegen oder einfügen, um zu beginnen.
Bild wählen, ablegen oder einfügen, um zu beginnen.
Neue Website, neues Logo oder eine Lighthouse-Warnung – am Ende steht dieselbe Aufgabe: Es gibt ein Logo, gebraucht werden aber ein halbes Dutzend Icon-Dateien und die passenden link-Tags. Hier können Sie das komplette Favicon erstellen, ohne dasselbe Bild sechsmal in einer Bildbearbeitung zu verkleinern.
Es funktioniert auch in die andere Richtung: Ziehen Sie eine geerbte favicon.ico hinein, sehen Sie jede darin gespeicherte Größe, können jede einzeln als PNG sichern und aus der größten die fehlenden Apple- und Android-Icons erzeugen.
Es entstehen genau die Dateien, die Browser und Smartphones heute abfragen – keine, die sie nicht mehr brauchen.
Eine favicon.ico mit mehreren Größen, PNGs in 16 und 32 px, das 180-px-Apple-Touch-Icon, Android-Icons in 192 und 512 px sowie site.webmanifest entstehen aus einem einzigen Bild. Die HTML-Tags nutzen Ihren echten Pfad – eine Website unter /static/ braucht keine sechs Handkorrekturen.
Ziehen Sie eine vorhandene favicon.ico hinein: Jedes eingebettete Bild wird mit echten Maßen, Farbtiefe, PNG- oder BMP-Kodierung und Bytegröße aufgelistet. Speichern Sie einzelne Bilder als PNG oder alle in einem ZIP – ganz ohne zweite Website.
iOS legt transparente Touch-Icons auf Schwarz. Deshalb wird das apple-touch-icon immer mit Ihrer Hintergrundfarbe gefüllt und bleibt eckig, weil iOS selbst die Rundung maskiert. Die Browser-Icons behalten ihre Transparenz.
Eine SVG oder ein quadratisches PNG ab 512 px liefert die schärfsten Ergebnisse. Nicht quadratische Bilder werden zentriert statt beschnitten, und Rastergrafiken unter 512 px erhalten eine Warnung mit der echten Größe, weil das 512-px-Android-Icon sonst hochskaliert wäre.
Rund 300 ms nach jeder Änderung wird neu erzeugt. Achten Sie auf die hellen und dunklen Tab-Attrappen und die 4-fache Vergrößerung: Dünne Linien und kleine Schrift verschwinden bei 16 px. Breiten Logos hilft etwas Innenabstand; der Eckenradius gilt nur für Browser- und Android-Icons.
Der Pfad landet in jedem link-Tag und jedem Icon-src des Manifests. Liegen die Dateien unter /assets/icons/, tragen Sie das zuerst ein, laden dann das ZIP und kopieren das HTML in den head Ihrer Seiten.
favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png und site.webmanifest, dazu favicon.svg bei einer SVG-Vorlage. Alles liegt in der ZIP-Wurzel und kann direkt neben die Startseite.
Die ICO kann 16, 24, 32, 48, 64, 128 und 256 px beliebig kombinieren und speichert PNG-Daten, die jeder aktuelle Browser und Windows lesen. Damit lässt sich auch einfach PNG in ICO umwandeln – nicht nur als Favicon-Generator.
Das Format wird am Dateiinhalt erkannt, nicht an der Endung, und Warnungen nennen Breite und Höhe. SVG-Vorlagen gelten nie als zu klein, da sie verlustfrei skalieren.
link-Tags, theme-color-Meta und die Icon-Liste im Manifest entstehen aus demselben Pfad und denselben Farben. So verweist das HTML nie auf eine Datei, die im ZIP fehlt – das Favicon einbinden klappt beim ersten Mal.
Für aktuelle Browser und Smartphones: eine favicon.ico mit 16, 32 und 48 px, PNGs in 16 und 32 px, ein apple-touch-icon mit 180 px sowie 192 und 512 px im site.webmanifest. Genau das liegt im ZIP, wenn Sie hier Ihr Favicon erstellen.
Laden Sie die Dateien aus dem ZIP in den eingetragenen Pfad hoch und fügen Sie das kopierte HTML in den head jeder Seite ein. Manifest-Link und theme-color-Meta sind bereits enthalten.
Beides. Die ICO bedient ältere Browser und Programme, die direkt /favicon.ico abrufen; PNG und SVG nutzen moderne Browser. Beide Formate entstehen hier aus derselben Vorlage.
Ja. Es gibt weder Konto noch Wasserzeichen, und die Bilder verlassen den Browser nie – auch unveröffentlichte Logos und DSGVO-Bedenken sind damit kein Thema.
Browser cachen Favicons hartnäckig; laden Sie die Seite hart neu oder öffnen Sie ein privates Fenster. Prüfen Sie dann, ob das href jedes link-Tags zum tatsächlichen Speicherort passt. Wer den Pfad vor dem Kopieren setzt, vermeidet diesen Fehler.
Sieben Dateien genügen heute: die ICO mit drei Größen, zwei kleine PNGs, das Apple-Icon und zwei Android-Icons. Ältere Apple- oder Windows-Kachelgrößen werden nicht mehr benötigt.
Fehlt eine Größe oder Plattform?
Logo ablegen, Favicon erstellen, den 16-px-Tab auf hellem und dunklem Hintergrund prüfen – dann ZIP und head-Tags auf die Website bringen.
Bewahren Sie die Original-Logodatei für spätere Änderungen auf.