Favicon-Generator
Ein Bild rein, das komplette Favicon-Paket raus: jede PNG-Größe, eine echte .ico und das HTML zum Einbinden.
🔒 Deine Dateien verlassen nie dein Gerät
Erzeuge mit diesem Favicon-Generator jedes Favicon, das deine Website braucht – aus einem einzigen Bild. Moderne Websites nutzen nicht eine Icon-Datei, sie brauchen einen ganzen Stapel: 16 und 32 px für Browser-Tabs, 48 px für Alt-Kontexte, 180 px für iPhone-Homescreens und 192 plus 512 px für Android- und PWA-Installationen. Dieses Tool erzeugt sie alle in einem Durchgang – plus eine echte .ico-Datei mit mehreren Auflösungen und den HTML-Schnipsel, der das ganze Set zusammenhält.
Alles wird lokal in deinem Browser generiert. Dein Logo wird nie hochgeladen – und das zählt, wenn die Website, die du baust, noch gar nicht öffentlich ist.
Starte mit einem quadratischen Bild, idealerweise 512 px oder größer – jede Größe wird sauber daraus herunterskaliert. Einfache, kräftige Zeichen überleben das Schrumpfen auf 16 px; feine Details und dünner Text werden bei Tab-Größe zu Brei. Favicons aus einem vereinfachten Logo sehen deshalb immer am schärfsten aus.
So erzeugst du ein Favicon
- Zieh ein quadratisches Bild hinein – 512×512 oder größer für beste Ergebnisse.
- Sieh dir in der Vorschau an, wie das Icon in kleinen Tab-Größen wirkt.
- Klicke auf „Generieren“, um alle PNG-Größen und die .ico-Datei zu bauen.
- Lade das Favicon-Paket herunter.
- Kopiere den mitgelieferten HTML-Schnipsel in den Head-Bereich deiner Website und lade die Dateien hoch.
Was im Paket steckt und wo welche Datei landet
Du bekommst PNGs in 16, 32, 48, 180, 192 und 512 Pixeln plus favicon.ico. Die Dateien mit 16 und 32 px decken Browser-Tabs und Lesezeichen ab; 180 px ist das apple-touch-icon, das erscheint, wenn jemand deine Website zum iPhone-Homescreen hinzufügt; 192 und 512 px bedienen Android und das PWA-Manifest. Die .ico bündelt mehrere Auflösungen in einer Datei und bleibt das Format, das manche Browser und alte Systeme standardmäßig unter /favicon.ico anfragen.
Der generierte HTML-Schnipsel deklariert jedes Icon mit den korrekten rel- und sizes-Attributen. Füge ihn in dein head-Element ein, lege die Dateien an den referenzierten Pfaden ab – und jede Plattform greift sich automatisch die Größe, die sie will.
Warum eine einzige Favicon-Datei nicht mehr reicht
Die alte Welt war eine favicon.ico im Root deiner Website. Heute will ein Browser-Tab ein 16- oder 32-px-Icon, eine iPhone-Homescreen-Verknüpfung will ein 180-px-apple-touch-icon, und eine installierbare Web-App (PWA) auf Android will 192- und 512-px-PNGs, im Manifest deklariert. Lieferst du nur eine Größe aus, fallen manche davon auf eine leere oder unscharfe Standardanzeige zurück.
Deshalb gibt dieses Tool ein komplettes Set aus statt einer einzigen Datei. Jede Plattform greift sich die Größe, die sie braucht – dein Zeichen sieht im Tab scharf aus, gestochen auf einem Homescreen und korrekt, wenn jemand die Website als App installiert, statt dass ein Bild für Aufgaben gedehnt wird, für die es nie dimensioniert war.
Wie das ganze Set auf deinem Gerät gebaut wird
Ausgehend von deinem Ausgangsbild zeichnet das Tool es in jeder benötigten Dimension auf ein Canvas und exportiert über die Canvas-API für jede Größe ein PNG. Für die .ico packt es mehrere dieser Auflösungen in einen einzigen, echten ICO-Container – das reale Mehrbild-Format, kein PNG mit ausgetauschter Endung.
Diese .ico-Unterscheidung zählt, weil manche Browser und ältere Systeme /favicon.ico per Konvention anfragen und das tatsächliche Format der Datei prüfen; eine gefälschte wird abgelehnt. Das gesamte Skalieren und ICO-Kodieren läuft lokal in deinem Browser, das komplette Paket wird also zusammengestellt, ohne dass irgendetwas hochgeladen wird.
Dein Branding wird nie hochgeladen
Favicons erzeugst du oft früh, während eine Website noch in Entwicklung ist und ihr Logo vertraulich oder unveröffentlicht sein kann. Dieses Zeichen zu einem Online-Favicon-Dienst hochzuladen heißt, dein Branding vor dem Start einem Dritten zu übergeben.
Hier wird das Bild in die Seite gelesen und jede Datei im Speicher deines Browsers erzeugt, das Logo bleibt also auf deinem Rechner. Lade das Paket herunter, leg es in dein Projekt – und keine Kopie hat je woanders existiert als auf deinem eigenen Computer.
Ein Zeichen gestalten, das 16 Pixel übersteht
Ein Favicon wird oft mit 16 px angezeigt – kaum größer als ein einzelnes Zeichen. Detailreiche Logos, dünne Striche und volle Wortmarken werden bei dieser Größe zu Brei, weshalb die meisten Marken fürs Favicon ein vereinfachtes Symbol, ein Monogramm oder einen einzelnen fetten Buchstaben nutzen statt ihr ganzes Logo.
Starte mit einem quadratischen Bild von mindestens 512 px, damit jede Größe aus einer sauberen Quelle herunterskaliert, bevorzuge hohen Kontrast und kräftige Formen und nutze die Kleingrößen-Vorschau, um das 16-px-Ergebnis zu beurteilen, bevor du live gehst. Ein transparenter Hintergrund sieht in einem Browser-Tab meist am besten aus und lässt das Zeichen sauber gegen helle oder dunkle Themes sitzen.
Es korrekt in deine Website einbinden
Die Dateien zu erzeugen ist nur die halbe Arbeit – sie müssen auch deklariert werden. Das Tool gibt dir einen HTML-Schnipsel mit den richtigen link-Tags: rel- und sizes-Attribute für die PNGs, den apple-touch-icon-Link für iOS und den Verweis auf favicon.ico. Füge ihn in den Head deiner Seiten ein und lege die Dateien an den referenzierten Pfaden ab.
Behalte favicon.ico im Root deiner Website, denn Browser fragen genau diesen Pfad per Konvention an, selbst ohne link-Tag. Ein häufiger Grund, warum ein neues Favicon „nicht auftaucht“, ist schlicht aggressives Browser-Caching – erzwinge einen Neuladen oder prüfe in einem privaten Fenster, bevor du von einem Fehler ausgehst, denn Tab-Icons können hartnäckig zwischengespeichert bleiben.
Wer zu einem Favicon-Generator greift
Jeder, der eine Website startet oder neu brandet – Entwickler, Designer, Kleinunternehmer, Leute, die ein Nebenprojekt oder eine Landingpage ausliefern. Sobald du dein eigenes Icon im Browser-Tab willst statt der Standard-Weltkugel, brauchst du mindestens die Tab-Größen; sobald es beim Speichern auf ein Handy richtig aussehen soll, brauchst du auch die größeren.
Nützlich ist es auch beim Prüfen einer bestehenden Website, die nur je ein einsames 16-px-Icon ausgeliefert hat oder der das apple-touch-icon fehlt und die auf mobilen Homescreens nun kaputt aussieht. Erzeuge das komplette Set aus dem aktuellen Logo neu, aktualisiere den Head-Schnipsel – und jede Plattform ist wieder abgedeckt.
Häufig gestellte Fragen
Ist dieser Favicon-Generator kostenlos?
Ja, kostenlos und ohne Anmeldung. Erzeuge Favicon-Sets für so viele Projekte, wie du willst.
Wird mein Logo irgendwohin hochgeladen?
Nein. Das gesamte Skalieren und .ico-Kodieren passiert in deinem Browser – unveröffentlichtes Branding bleibt auf deinem Rechner.
Bekomme ich wirklich eine richtige .ico-Datei?
Ja, eine echte .ico mit mehreren Auflösungen – kein PNG mit umbenannter Endung. Der Unterschied zählt, denn manche Software prüft das Dateiformat und lehnt falsche .ico-Dateien ab.
Mit welchem Bild sollte ich starten?
Ein quadratisches PNG mit mindestens 512×512 und einem einfachen, kontrastreichen Design. Transparente Hintergründe werden unterstützt und sehen in Browser-Tabs meist am besten aus.
Warum sieht mein Logo bei 16 Pixeln schlecht aus?
Sechzehn Pixel sind winzig – Wortmarken und detailreiche Logos überstehen das schlicht nicht. Die meisten Marken nutzen fürs Favicon ein vereinfachtes Symbol oder einen einzelnen Buchstaben. Beurteile das mit der Kleingrößen-Vorschau, bevor du live gehst.
Decken diese Größen iPhone-Homescreens und Android-PWAs ab?
Ja. Das 180-px-Icon ist genau das, was iOS für „Zum Home-Bildschirm“ nutzt, und die PNGs mit 192 und 512 px sind die beiden Größen, die Android und Web-App-Manifeste erwarten.