Favicon-Generator
Läuft komplett in deinem Browser. Deine Dateien und Daten verlassen dein Gerät nie.
16×16favicon-16x16.png
32×32favicon-32x32.png
48×48favicon-48x48.png
180×180apple-touch-icon.png
192×192icon-192.png
512×512icon-512.png
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Über dieses Tool
Logo oder ein anderes eher quadratisches Bild reinziehen, und die Seite zeichnet daraus die sechs Größen, die eine Website braucht: 16, 32 und 48 Pixel für Browser-Tabs, 180 für das Icon, das iOS auf dem Homescreen speichert, sowie 192 und 512 für Android. Zum Download gibt es ein einzelnes ZIP mit diesen PNGs, einer favicon.ico, einem site.webmanifest und dem HTML-Code für den <head>.
Was steckt im ZIP?
Sechs PNGs (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png und icon-512.png), dazu favicon.ico mit den Varianten in 16, 32 und 48 Pixeln in einer Datei. Das ICO-Format erlaubt seit Windows Vista PNG-komprimierte Bilder, dadurch bleibt die Datei klein, und alte Browser, die nur nach /favicon.ico suchen, finden trotzdem etwas.
site.webmanifest listet die 192- und 512-Pixel-Icons auf und trägt den App-Namen, den man im Einstellungsmenü eingibt, dazu einen short_name, der auf 12 Zeichen gekürzt wird, ungefähr das, was Android unter einem Homescreen-Icon anzeigt. Bleibt das Feld leer, steht dort “My site”. Die letzte Datei, favicon.html, enthält dieselben fünf <link>-Tags, die auch der Kopieren-Button auf die Zwischenablage legt.
Werden meine Bilder irgendwohin hochgeladen?
Nein. Das Bild wird auf ein Canvas-Element in der Seite gezeichnet und vom Browser selbst zu PNG kodiert, dann im selben Tab gezippt. Es geht nichts an einen Server, ein unveröffentlichtes Logo oder die Bildmarke eines Kunden verlässt also nie das eigene Gerät. Seite öffnen, Netzwerkkabel ziehen, funktioniert trotzdem alles.
Was kann ich hochladen?
PNG, JPEG, WebP und SVG werden akzeptiert. Ein quadratisches Ausgangsbild funktioniert am besten, weil das Bild eingepasst und zentriert wird, ein breites Banner bekommt also oben und unten transparente Streifen. SVG ist die beste Wahl für ein Logo, weil dann jede Größe aus dem Vektor gezeichnet wird statt aus einer skalierten Bitmap. Egal was man hochlädt: 16 Pixel sind winzig, ein ganzer Schriftzug verschwimmt bei dieser Größe zu einem Klecks, ein einzelner Buchstabe oder ein Symbol wirkt deutlich besser.
Sobald die Dateien liegen, cachen Browser Favicons oft sehr lange, ein harter Reload kann also nötig sein, bevor das neue Icon auftaucht. Die MDN-Seite zu den Link-Typen erklärt, wofür jedes Tag im Snippet steht.