Favicon-GeneratorJede Größe, und der head-Block dazu.
Logo ablegen und ein echtes favicon.ico mit mehreren Auflösungen bekommen, dazu die PNG-Größen, die Browser verlangen, ein Apple Touch Icon, das maskable Icon für Android und ein ausgefülltes site.webmanifest. Alles entsteht in diesem Tab, dein Bild wird nie hochgeladen.
Logo hier ablegen
Oder tippen, um eine Datei zu wählen. Ein quadratisches Bild mit 512 px oder mehr funktioniert am besten.
PNG, JPG, WebP, SVG, ICO oder GIF
Dein Bild wird in diesem Tab gelesen, skaliert und verpackt. Es wird nie hochgeladen, und zu keinem Zeitpunkt ist ein Server beteiligt.
Welche Favicon-Größen brauchst du 2026 wirklich?
Deutlich weniger als die Zwanzig-Dateien-Pakete, die die meisten Generatoren noch ausgeben. Fünf Oberflächen decken jeden Browser und jedes Betriebssystem ab, das zählt, alles darüber hinaus ist Ballast in deinem <head>.
favicon.ico, 16 und 32 und 48
Immer noch die Datei, die ein Browser im Wurzelverzeichnis deiner Domain sucht, bevor er eine einzige Zeile HTML gelesen hat. Ein Container hält alle drei Größen, und genau deshalb baut dieser Favicon-Konverter ein echtes .ico statt ein PNG umzubenennen. 16 px ist der Tab, 32 px der Retina-Tab und die Lesezeichenleiste, 48 px sind Windows-Verknüpfungen.
favicon.svg, wenn du eine Vektordatei hast
Ein Vektor-Favicon ist in jeder Größe scharf und kann per Media Query in der Datei sogar auf den Dark Mode des Systems reagieren. Browser, die es verstehen, ziehen es dem .ico vor. Wenn du hier ein SVG hochlädst, bleibt es Vektor, es wird nie gerastert und als Fälschung zurückgegeben.
apple-touch-icon.png, 180×180
Das Icon, das iOS nutzt, wenn jemand deine Website auf den Startbildschirm legt. Eine Datei reicht: iOS skaliert seit iOS 8 ein einziges 180-px-Icon herunter, der alte Stapel von apple-touch-icon-57x57 bis 152x152 ist also überflüssig. Dieser Apple-Touch-Icon-Generator schreibt genau eines, und macht es deckend.
android-chrome 192 und 512, plus maskable
Wird aus dem site.webmanifest referenziert statt aus einem link-Tag. 192 px ist der Startbildschirm, 512 px der Splash Screen und der Installationsdialog. Die maskable Variante beschneidet Android auf die Form, die der Launcher gerade nutzt, ihr Motiv braucht deshalb echten Rand.
mstile-150x150.png, billig zu behalten
Angepinnte Websites unter Windows lesen sie noch. Sie kostet ein kleines PNG und zwei Meta-Tags, deshalb ist sie dabei, aber nichts geht kaputt, wenn du sie löschst. Das ist die ehrliche Antwort, und deshalb steht sie hier am Ende statt als Pflicht verkauft zu werden.
Warum enthält eine .ico-Datei mehrere Bilder?
Weil .ico ein Containerformat ist und kein Bildformat. Das zu verstehen ist der Unterschied zwischen einem Favicon, das überall erscheint, und einem, das unter Windows und in Feedreadern still versagt.
Erst ein Verzeichnis, dann die Bilder
Die Datei beginnt mit einem sechs Byte langen Header, der sagt, wie viele Bilder folgen, dann kommt pro Bild ein sechzehn Byte langer Eintrag mit Breite, Höhe, Länge in Bytes und Position in der Datei, und erst danach die Bilddaten. Alles ist Little Endian. Wegen dieser Struktur ist ein in .ico umbenanntes PNG kein .ico.
Der Abnehmer wählt die Größe
Ein Browser, der einen 16-px-Tab zeichnet, liest das Verzeichnis, findet den 16-px-Eintrag und dekodiert nur diesen. Gib ihm ein einziges 512-px-Bild, und er skaliert beim Zeichnen herunter, mit billigem Sampling und unscharfem Ergebnis. Gib ihm ein eigens gebautes 16-px-Bild, und er nimmt es.
Die Bilddaten dürfen PNG sein
Das ursprüngliche Format bettete BMP mit umgekehrter Pixelreihenfolge und einer separaten Ein-Bit-Transparenzmaske ein. Jeder Browser und jedes Windows seit Vista akzeptiert auch PNG im Container, und genau das schreibt dieser ICO-Konverter: kleinere Dateien, echtes Alpha, kein alter Encoder.
Bei 16 px zeigt sich die Qualität
Ein 1024-px-Logo direkt auf 16 px herunterzurechnen tastet zu wenige Quellpixel ab und liefert einen grauen Fleck. Dieses Tool halbiert das Bild über Zwischen-Canvases, 1024 auf 512 auf 256 und so weiter, damit jedes Pixel beiträgt. Das ist der einzige Grund, warum ein kleines Favicon lesbar bleibt.
Brauche ich noch ein apple-touch-icon?
Ja, und es ist die eine Datei, für die andere Regeln gelten als für jedes andere Icon im Paket. Zwei Dinge solltest du wissen, beide oben schon für dich erledigt.
iOS wirft deine Transparenz weg
Safari legt das Startbildschirm-Icon auf Schwarz statt auf das Hintergrundbild, ein sorgfältig mit transparentem Hintergrund exportiertes Logo landet also als Form auf einer schwarzen Kachel. Deshalb schreibt dieses Tool das apple-touch-icon immer mit deckendem Hintergrund, standardmäßig weiß, auch wenn du für alles andere transparent gewählt hast. Seinen eigenen Glanzeffekt legt iOS seit iOS 7 ebenfalls nicht mehr darüber, was du lieferst, sehen die Leute also auch.
Android beschneidet, es füllt nicht auf
Ein Android-Launcher nimmt ein maskable Icon und schneidet es auf seine eigene Form zu, Kreis, Squircle oder abgerundetes Quadrat, je nach Telefon. Garantiert erhalten bleiben nur die mittleren 80 %, ein Logo, das seine Fläche bis zum Rand füllt, verliert also seine Ausläufer. Die maskable Datei behält hier 20 % Rand, egal wie du den Regler stellst, und die runde Vorschau zeigt genau, was der Launcher übrig lässt.
Wie füge ich ein Favicon in meine Website ein?
Zwei Schritte, und im zweiten passieren die meisten Fehler. Kopiere den Block, den das Tool erzeugt, statt ihn aus dem Kopf zu schreiben.
Die Dateien ins Wurzelverzeichnis
Lege favicon.ico und den Rest neben deine index.html, damit sie unter deineseite.de/favicon.ico antworten. Browser fragen genau diesen Pfad von selbst an, ohne dass man es ihnen sagt, und deshalb zählt der Ablageort mehr als das link-Tag.
Den head-Block auf jede Seite
Nicht nur auf die Startseite. Wer auf einer tiefen Seite landet und sie als Lesezeichen speichert, soll das richtige Icon bekommen. Wenn deine Website ein Template oder ein Framework nutzt, gehört der Block in das gemeinsame Layout.
Das .ico ohne Größe deklarieren
Nutze rel="icon" href="/favicon.ico" sizes="any". Die Größen stecken schon im Container, und eine davon fest ins Markup zu schreiben hindert den Browser daran, nach den anderen zu greifen. Die SVG-Zeile steht zuerst, damit Browser mit Vektorunterstützung sie nehmen.
Dann zweimal hart neu laden
Favicons werden aggressiv und getrennt von der Seite zwischengespeichert, dein altes Icon kann ein normales Neuladen also tagelang überleben. Öffne die Datei direkt unter deineseite.de/favicon.ico, um zu bestätigen, dass wirklich die neue ausgeliefert wird, bevor du irgendetwas anderes vermutest.
Willst du prüfen, wohin ein bestehender QR-Code oder Kurzlink wirklich führt? Mit dem QR-Code-Resolver entschlüsseln
Brauchst du einen Kurzlink zur neuen Website? Einen mit dem kostenlosen Link-Shortener erstellen
Das Icon ist die kleinere Hälfte des ersten Eindrucks.
Ein Favicon sehen Leute erst, wenn sie schon auf deiner Website sind. Die härtere Arbeit macht der Link, der sie hergebracht hat, und genau den misst meistens niemand. Wenn dich das interessiert, LinkScale ist das, was wir bauen.
Sieh, woher der Besuch kam
Klicks, Länder, Geräte und was danach passiert ist, für jeden Link, den du herausgibst, statt einer Zahl im Dashboard von jemand anderem.
Ändere das Ziel später
Leite einen gedruckten oder geposteten Link im Nachhinein woanders hin, ohne jemanden zu bitten, das Gespeicherte zu aktualisieren.
Eine Seite für alles
Eine Link-in-Bio-Seite mit Shop, Buchungsformular und Social-Profilen, damit der eine erlaubte Link weiter trägt.
Fragen zum Favicon-Generator
Noch Fragen?
OnlineEchte Menschen, meist Antwort in wenigen Minuten.
Er ist kostenlos, ohne Konto, ohne Wasserzeichen und ohne Limit, wie viele Dateien du erzeugst. Dein Bild wird nie hochgeladen: es wird mit dem FileReader des Browsers gelesen, auf ein Canvas gezeichnet und in Blobs verpackt, alles innerhalb der Seite. Hinter diesem Tool gibt es keinen Endpoint, also auch nichts, wohin man es senden könnte. Prüfen kannst du das im Netzwerk-Tab deines Browsers, oder indem du die Internetverbindung trennst, nachdem die Seite geladen ist.
Mehr mit LinkScale erreichen
Favicon erledigt. Der Link, der Leute herbringt, ist die andere Hälfte.
LinkScale ist eine Plattform für Linkverwaltung, für alle, die wissen wollen, was nach dem Klick passiert, und das Ziel ändern wollen, ohne etwas neu zu drucken.
Free 14-day trial on every plan