Du hast ein Logo, und deine Website braucht ein Favicon: das winzige Bild im Browser-Tab. Einfach, bis du merkst, dass Browser, iPhone, Android-Handys und Windows jeweils ihre eigene Größe und ihre eigene Datei wollen. Der GetPlugzz-Favicon-Generator erledigt das alles aus einem Bild. Zieh dein Logo hinein, drück einen Knopf, und du bekommst favicon.ico, ein Apple-Touch-Icon, Android-Icons, eine Windows-Kachel, eine Manifest-Datei und den Code zum Einfügen in deine Seite. Er läuft in deinem Browser, es gibt also kein Konto, kein Wasserzeichen, und nichts wird hochgeladen.
Wie erstellt man ein Favicon in allen Größen aus einem Bild?
Öffne den Favicon-Generator und mach Folgendes:
- Füge ein Bild hinzu. Zieh dein Logo in das Feld oder klick, um eins auszuwählen. Am besten ist ein quadratisches Bild mit mindestens 512 × 512 Pixeln. Alles andere wird von der Mitte aus zu einem Quadrat zugeschnitten.
- Prüf die Vorschau. Hat dein Bild einen durchsichtigen Hintergrund, bleibt er erhalten, was für Logos perfekt ist. Du siehst alle Größen, die erstellt werden.
- Lade herunter. Drück auf Alles herunterladen (ZIP), um alle Größen zu bekommen, und füge den angezeigten Code in den Head deiner Seite ein. Für den Code gibt es einen Kopieren-Knopf.
Nichts, was du von Hand skalieren müsstest, und nichts zu installieren. Falls dein Browser den Download blockiert, klick oben an der Adressleiste auf Zulassen, dann geht es durch.
Warum braucht ein Favicon so viele Größen?
Denk an einen Fotoautomaten, der dasselbe Bild als winzigen Aufkleber, als Passfoto und als Poster ausdruckt. Es ist dasselbe Gesicht, aber jeder Ort hat seinen eigenen Rahmen. Ein Favicon funktioniert genauso. Dein Logo taucht an verschiedenen Stellen auf, und jede verlangt eine andere Größe:
- 16 × 16 und 32 × 32: der Browser-Tab. Die 32er hält es auf hochauflösenden (Retina-)Bildschirmen scharf.
- 48 × 48: Windows-Verknüpfungen.
- 150 × 150: die Windows-Kachel.
- 180 × 180: das Apple-Touch-Icon, das iPhones und iPads nutzen, wenn jemand deine Seite zum Home-Bildschirm hinzufügt.
- 192 × 192 und 512 × 512: Android, für den Startbildschirm und den Splash-Screen (auch für Web-Apps genutzt).
Was steckt in der ZIP-Datei?
Das Tool erstellt all das für dich und packt es in eine Datei:
- favicon.ico: das klassische Icon in Browser-Tabs. Es ist eine echte Datei mit mehreren Größen, mit den Versionen 16, 32 und 48 darin.
- favicon-16x16.png, favicon-32x32.png und favicon-48x48.png: die kleinen Größen.
- apple-touch-icon.png: das Icon für iPhones und iPads.
- android-chrome-192x192.png und android-chrome-512x512.png: die Icons für Android.
- mstile-150x150.png: die Windows-Kachel.
- site.webmanifest: sagt den Browsern, welche Icons sie nutzen sollen.
- head-snippet.html: der Code zum Einfügen, als Datei gespeichert.
Wohin kommen die Dateien?
Lade die Dateien in den Hauptordner deiner Website hoch und füge den Code aus dem Tool in den Head deiner Seiten ein. Dieser Code sagt dem Browser, wo er jedes Icon findet. Zwei kleine Tipps: Öffne site.webmanifest und trag den Namen deiner Seite ein, denn er bleibt leer, und ändere die Themenfarbe, wenn du etwas anderes als Weiß willst.
Noch keine Website, auf die du sie hochladen kannst? Unsere Anleitung zum Starten deiner ersten Website behandelt Domain, Hosting und Seiten. Wenn du lieber nicht bei einer leeren Seite anfangen willst, enthält ein AI website builder (Werbelink) von Bluehost Hosting, sodass du einen Ort für die Dateien hättest.
Welches Bild funktioniert am besten?
- Quadratisch und groß. Fang mit mindestens 512 × 512 Pixeln an. Das Tool verkleinert es auf alle Größen, du musst also nie selbst etwas skalieren.
- Zentriert. Ein Bild, das nicht quadratisch ist, wird von der Mitte aus zu einem Quadrat zugeschnitten, halt das Wichtige also in der Mitte.
- Transparent ist in Ordnung. Hat dein Logo einen durchsichtigen Hintergrund, behalten ihn die Icons.
- Einfach gewinnt. Bei 16 Pixeln ist kaum Platz, deshalb liest sich eine klare Form oder ein einzelner Buchstabe besser als eine detaillierte Zeichnung.
Eins solltest du wissen: ein Bild auf einmal
Der Generator erstellt alle Größen aus einem Bild auf einmal. Er verarbeitet nicht viele verschiedene Logos in einem Rutsch. Hast du noch eine Seite, klick auf Ein anderes Bild wählen und starte neu, das dauert ein paar Sekunden.
Gut zu wissen, bevor du loslegst
- Ein nicht quadratisches Bild wird von der Mitte aus zugeschnitten. Nimm ein quadratisches Bild, damit nichts abgeschnitten wird.
- Gib dem Apple-Icon einen einfarbigen Hintergrund: iPhones füllen transparente Bereiche mit Schwarz.
- Bei 16×16 Pixeln verschwinden feine Details, darum funktioniert eine einfache Form am besten.
- Browser und Google behalten alte Favicons eine Weile; ein neues kann Tage brauchen, bis es erscheint.
- Trage den Namen deiner Website in site.webmanifest ein und lade alle Dateien in den Hauptordner deiner Website hoch.
Häufige Fragen
Ja. Es gibt kein Konto und kein Wasserzeichen.
Nein. Die Icons werden in deinem Browser erstellt, und dein Bild verlässt dein Gerät nie.
Fang mit einem quadratischen Bild von mindestens 512 × 512 Pixeln an. Das Tool verkleinert es auf alle nötigen Größen, du musst also nichts selbst skalieren.
Ja. Hat dein Logo einen durchsichtigen Hintergrund, bleibt er in den Icons durchsichtig.
Lade sie in den Hauptordner deiner Website hoch und füge den Code aus dem Tool in den Head deiner Seiten ein.
Kostenloser Favicon-Generator — alle Größen, ein Upload
Ein Bild rein, alle Icon-Größen raus: ico, Apple, Android, Windows und der Code zum Einfügen. Von GetPlugzz gebaut, komplett in deinem Browser erstellt.
