Zum Hauptinhalt springen

Favicon-Generator

Vollständiges Favicon-Paket aus SVG, PNG oder JPG erstellen

Wandeln Sie ein SVG-, PNG- oder JPG-Logo in favicon.ico, Browser-PNGs, ein Apple-Touch-Icon, Android-Chrome-Icons, site.webmanifest und fertige HTML-Tags um. Laden Sie das vollständig im Browser erzeugte Paket als ZIP herunter.

Dateien hier ablegen

Standardwerte für neue Dateien werden bearbeitet

Hintergrund
Eckenradius
Artwork
Horizontale Ausrichtung
Vertikale Ausrichtung

Padding rückt das Artwork nach innen, die Skalierung vergrößert es, und die Ausrichtung bestimmt, wo es sitzt, wenn es die Fläche nicht ausfüllt. Hintergrund und Eckenform füllen immer das ganze Icon.

Web-Manifest

Wird auf dem Startbildschirm oder im Launcher unter dem Icon angezeigt, wenn der vollständige Name nicht passt. Rund 12 Zeichen.

Optimierung

Wendet die sichere Optimierungsvorgabe an, bevor die Ausgabe erzeugt wird.

Logo hinzufügen, um es in jeder Favicon-Größe zu sehen.

Ausgabe

head-tags.html

<link rel="icon" href="/favicon.ico">
<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">

Lege alle Dateien außer index.html in den Ordner, aus dem deine Website ausgeliefert wird, und füge diese Tags in den head jeder Seite ein.

Noch keine Dateien. Dateien oben ablegen oder DATEIEN AUSWÄHLEN klicken.

Was ist ein Favicon?

Ein Favicon ist das kleine Icon, das ein Browser neben dem Seitentitel anzeigt: im Tab, in den Lesezeichen, im Verlauf und in den Ergebnissen mancher Suchmaschinen. Es begann als eine einzige favicon.ico mit 16 × 16 Pixeln im Wurzelverzeichnis der Website. Heute übernimmt ein Satz von Dateien in verschiedenen Größen diese Aufgabe, denn ein Browser-Tab, eine Verknüpfung auf dem Startbildschirm und ein Installationsdialog stellen das Icon in sehr unterschiedlichem Maßstab dar.

Warum ein Favicon-Paket statt einer einzelnen Datei

Eine einzelne favicon.ico funktioniert weiterhin, für sich genommen reicht sie aber nicht mehr. Browser-Tabs lesen den Eintrag mit 16 oder 32 px aus der .ico-Datei, Safari verlangt ein apple-touch-icon mit 180 px, sobald eine Seite zum Home Screen hinzugefügt wird, und Android Chrome liest für Installationsdialog und Splash Screen die PNGs mit 192 und 512 px aus einem Web-Manifest. Diese Größen einzeln zu exportieren bedeutet sechs Exporte, sechs Gelegenheiten, etwas anders zuzuschneiden, und ein von Hand geschriebenes Manifest. Werden sie aus einer einzigen Quelle erzeugt, bleibt jede Größe identisch, und es genügt ein einziges Ablegen.

So erzeugen Sie ein Favicon-Paket

  1. 1

    Logo ablegen oder DATEIEN AUSWÄHLEN klicken, um es hinzuzufügen. SVG, PNG, JPG, WebP, GIF, BMP, AVIF und TIFF funktionieren alle, bis zu 40 auf einmal.

  2. 2

    Hintergrund, Eckenradius, Padding, Scale und Ausrichtung einstellen, dann App-Name und Kurznamen eintragen, die ins Manifest wandern. Jede Größe wird bei jeder Änderung neu gezeichnet.

  3. 3

    Auf ALLE SPEICHERN klicken, um favicon-package.zip herunterzuladen, dann die vier link-Tags aus dem Tab HTML-Tags in den head jeder Seite einfügen.

Datenschutz: Ihre Dateien verlassen den Browser nicht

Die Konvertierung erfolgt lokal in Ihrem Browser mit JavaScript und WebAssembly. Es erfolgt kein Datei-Upload oder eine serverseitige Konvertierung, sodass die von Ihnen hinzugefügten Dateien auf Ihrem Gerät verbleiben.

Die lokale Verarbeitung trägt zum Schutz vertraulicher Logos, interner Dokumente und unveröffentlichter Kundengrafiken bei. Seiten und Konvertierungscode werden zwischengespeichert, während Sie sie verwenden, sodass bereits geöffnete Tools ohne Netzwerkverbindung weiterarbeiten können.

Häufige Fragen

Welche Dateien bekomme ich, und wohin gehören sie?

favicon.ico (mit 16, 32 und 48 px in einer einzigen Datei), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest und eine index.html mit den Tags. Kopieren Sie alles außer index.html in den Ordner, aus dem Ihre Website ausgeliefert wird, und fügen Sie dann die vier link-Tags in den head jeder Seite ein.

Kann ich statt einer SVG ein PNG- oder JPG-Logo verwenden?

Ja. SVG, PNG, JPG, WebP, GIF, BMP, AVIF und TIFF funktionieren alle. Eine SVG ist trotzdem die bessere Quelle, weil jede Größe aus den Vektoren gezeichnet und nicht neu abgetastet wird. Ein Rasterlogo, das kleiner als 512 px ist, wird für die größten Icons hochskaliert und wirkt dann unscharf; die Dateizeile weist Sie darauf hin, wenn das passiert.

Brauche ich favicon.ico noch, wenn ich PNG-Icons ausliefere?

Behalten Sie sie. Genau diese Datei fragen Browser und Crawler im Wurzelverzeichnis der Website an, wenn kein Tag sie woandershin verweist, und nur sie trägt mehrere Größen in einer einzigen Datei. Die PNG-Einträge decken die Browser ab, die sie bevorzugen, und das Manifest deckt den Installationsdialog unter Android ab.