Tools · Bild · Favicon-Generator
Favicon-Generator
Verwandle ein Bild in ein komplettes Favicon-Set - eine mehrgrößige .ico-Datei, einzelne PNGs und ein Web-Manifest - plus den HTML-Code zum Einfügen, alles direkt in deinem Browser.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Wähle eine Datei, passe die Einstellungen an und starte das Tool.
Läuft komplett im Browser. Es wird nichts hochgeladen.
So funktioniert es
Lege dein Ausgangsbild ab oder wähle es aus (JPG, PNG, WebP, GIF oder BMP, bis zu 25 MB).
Wähle eine Hintergrundfarbe für die Icons, die nicht transparent bleiben können, wie das Apple-Touch-Icon.
Lade das Zip herunter und füge den HTML-Ausschnitt in das <head> deiner Seite ein.
Häufige Fragen
Sieben Dateien: eine mehrgrößige favicon.ico (16, 32 und 48px in einem Container), fünf eigenständige PNGs in 16, 32, 180, 192 und 512px, und eine site.webmanifest, die auf die zwei größten PNGs verweist.
Es deckt dieselbe Kernauswahl ab - .ico, PNG-Größen, Apple-Touch-Icon und Web-Manifest - ohne dein Bild irgendwohin hochzuladen. Windows-Kachel- und Safari-Pinned-Tab-Formate lässt es bewusst weg, die kaum eine aktuelle Seite noch braucht.
Jede Größe wird quadratisch zugeschnitten, mittig zum Bild, nie gestreckt oder verzerrt.
Nein. Jede Größenänderung und das Zip selbst entstehen in deinem Browser. Das Bild verlässt dein Gerät nie.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why Your Favicon Looks Blank or Cropped on Some Devices
A missing favicon doesn't throw an error - it just shows up blank on a phone home screen or in a browser tab, in exactly the places you're least likely to check yourself.
Anleitung lesenHow to Generate a Complete Favicon Set From One Logo
Drop one image in and get seven files back: a multi-size .ico, five PNGs, and a manifest, plus the HTML to paste. Here is the whole process, step by step.
Anleitung lesenFavicons for a PWA: Do You Actually Need the Manifest Too
A favicon and an installable-app icon are read from two different places. Here is what the generated site.webmanifest actually does, and when you can skip it.
Anleitung lesen
Kommentare