Favicon-Generator
Erstelle aus einem einzigen Bild alle Favicons, die deine Website braucht.
Problem mit diesem Tool melden
So verwendest du Favicon-Generator
Logo oder Bild hinzufügen
Zieh ein PNG, JPG, WebP, GIF oder SVG auf die Seite. Ein quadratisches Bild mit einfacher Form funktioniert am besten.
Aussehen anpassen
Schneide quadratisch zu oder passe das ganze Bild ein, wähle einen transparenten oder farbigen Hintergrund, füge Innenabstand hinzu und runde die Ecken ab. Die Vorschau zeigt jede Größe und einen Browser-Tab.
Herunterladen und Code einfügen
Lade das ZIP herunter, lade die Dateien in das Stammverzeichnis deiner Website hoch und füge die HTML-Zeilen in den head-Bereich deiner Seiten ein.
Warum Utils365?
Das komplette Set
favicon.ico mit 16, 32 und 48 px, PNG-Favicons, das Apple Touch Icon, Android-Icons und site.webmanifest, alle so benannt, wie Browser es erwarten.
Vor dem Download ansehen
Prüfe, wie das Icon in seinen echten Größen und in hellen und dunklen Browser-Tabs aussieht, damit winzige Details nicht verloren gehen.
Privat durch Design
Alles passiert in deinem Browser, dein Logo wird also nie auf einen Server hochgeladen.
Häufig gestellte Fragen
Welche Favicon-Größen brauche ich?
Eine favicon.ico (16, 32 und 48 px) deckt Browser-Tabs und Lesezeichen ab, ein Apple Touch Icon mit 180 px die Startbildschirme von iPhone und iPad, und PNGs mit 192 und 512 px decken Android und installierte Web-Apps ab. Dieses Tool erstellt alle aus einem Bild.
ICO, PNG oder SVG: Welches Favicon-Format soll ich verwenden?
Alle drei. favicon.ico funktioniert überall, auch in alten Browsern und Tools, die automatisch danach suchen. PNG-Favicons liefern scharfe Ergebnisse in festen Größen. Ein SVG-Favicon bleibt in jeder Größe scharf; du erhältst eines, wenn du mit einem SVG beginnst.
Was ist ein apple-touch-icon?
Das Icon, das iPhones und iPads verwenden, wenn jemand deine Website zum Startbildschirm hinzufügt. Es ist 180 × 180 px groß und darf nicht transparent sein, daher wird es mit vollem Hintergrund gespeichert (Weiß, wenn du transparent gewählt hast). iOS rundet die Ecken selbst ab.
Wohin kommen die Favicon-Dateien?
Entpacke sie in das Stammverzeichnis deiner Website, neben deine Startseite, sodass favicon.ico unter deineseite.de/favicon.ico liegt. Füge dann die auf dieser Seite gezeigten HTML-Zeilen in den head-Bereich jeder Seite oder in deine Seitenvorlage ein.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons sehr lange. Öffne die Adresse des Favicons direkt, lade die Seite hart neu oder probiere ein privates Fenster, um das neue zu sehen.