Favicon-Generator
Mach aus einem Bild die Favicon-Größen, die eine moderne Website wirklich nutzt: 16, 32, 48, 180, 192 und 512 px, samt passender Link-Tags. Läuft im Browser, nichts wird hochgeladen.
Leg ein Logo ab, und dieses Tool zeichnet es in die sechs Icon-Größen, die eine aktuelle Website tatsächlich referenziert — 16, 32 und 48 für den Browser-Tab und das Google-Ergebnis, 180 für Apples Touch-Icon sowie 192 und 512 für das Web-App-Manifest — und liefert dir dazu das <head>-Markup und die Manifest-Einträge. Alles wird auf einem Canvas in deinem eigenen Browser gezeichnet, das Bild wird also nie hochgeladen, und du kannst Transparenz auf einen Hintergrund legen oder der Marke vor dem Export etwas Luft geben.
Wozu ein Favicon-Set gut ist
Ein Favicon ist das kleine Bild, das der Browser im Tab, in den Lesezeichen und im Verlauf zeigt; Google blendet es außerdem neben deinem Treffer in der mobilen Suche ein. Eine einzelne Datei genügt nicht mehr, denn dieselbe Marke erscheint heute mit 16 px in einem Tab und mit 512 px auf einem Android-Startbildschirm — ein einziges, vom Browser skaliertes Bild wirkt am einen Ende matschig und am anderen verschwendet. Dieses Tool zeichnet jede Größe separat aus deiner Vorlage, sodass jedes Icon seine eigene saubere Verkleinerung bekommt, und gibt durchgängig PNG aus: das Format, das jeder aktuelle Browser akzeptiert.
So funktioniert der Favicon-Generator
Dein Bild wird einmal dekodiert und dann für jede Zielgröße separat auf ein Canvas gezeichnet — 16, 32, 48, 180, 192 und 512 Pixel. Jedes Icon ist damit eine Verkleinerung des Originals und nicht die Neuabtastung einer bereits geschrumpften Kopie; genau das bewahrt kleine Größen vor Matsch. Der Zeichenvorgang hält das Seitenverhältnis und zentriert das Ergebnis, sodass eine breite Wortmarke Balken bekommt statt gestaucht zu werden, und ein optionaler Einzug gibt randfüllenden Marken Luft. Jedes Canvas wird als PNG kodiert: verlustfrei, mit Alphakanal, von jedem aktuellen Browser lesbar. Googles Leitfaden verlangt ein quadratisches Icon als Vielfaches von 48 — deshalb sind 48 und 192 im Set.
Funktionen
So erzeugst du deine Icons
Wähle ein Ausgangsbild — quadratisch und mindestens 512 × 512 liefert das schärfste Ergebnis.
Entscheide, ob die Transparenz bleibt oder auf Weiß bzw. Schwarz gelegt wird.
Füge Innenabstand hinzu, wenn deine Marke bis an den Rand läuft und Luft braucht.
Führe das Tool aus, lade jede Größe herunter und füge das Markup in dein <head> ein.
Häufige Fehler
Beispiele
Siehe auch
- Bildgrößen-Änderer — Deine Vorlage ist nicht quadratisch? Skaliere oder beschneide sie vorher zum Quadrat.
- Bildformat-Konverter — Du startest mit einem JPEG-Logo? Wandle es zuerst in PNG, damit die Icons saubere Kanten behalten.
FAQ
Brauche ich noch eine favicon.ico-Datei?
Nur wenn du noch den Internet Explorer unterstützt. Jeder Browser des letzten Jahrzehnts liest PNG-Favicons, die per Link-Tag deklariert sind — deshalb gibt dieses Tool PNG aus. Eine favicon.ico im Wurzelverzeichnis zu behalten schadet nicht, falls du bereits eine hast, denn Browser fragen diesen Pfad standardmäßig ab, wenn kein Link-Tag vorhanden ist.
Warum sechs Größen statt einer?
Weil dieselbe Marke in sehr unterschiedlichen Maßstäben erscheint. 16 und 32 px landen im Browser-Tab, 48 px ist die Größe, die Googles Indexer für das Icon neben deinem mobilen Treffer bevorzugt, 180 px verwendet iOS, wenn jemand deine Seite zum Startbildschirm hinzufügt, und auf 192 und 512 px zeigt ein Web-App-Manifest. Jede Größe aus der Quelle zu zeichnen hält sie alle scharf.
Wird mein Logo auf einen Server hochgeladen?
Nein. Das Bild wird von deinem Browser gelesen, auf ein Canvas gezeichnet und in der Seite selbst exportiert. Nichts geht über das Netz — ein noch unveröffentlichtes Logo bleibt auf deinem Rechner.
Wie groß sollte mein Ausgangsbild sein?
Quadratisch und mindestens 512 × 512. Dann ist das größte Icon eine direkte Kopie und alle kleineren sind Verkleinerungen — die Richtung, die Details bewahrt. Ist deine Vorlage kleiner, funktioniert das Tool trotzdem, sagt dir aber, welche Größen hochskaliert werden mussten.