Tada File

Favicon-Generator

Erstelle aus einem Bild favicon.ico, ein Apple Touch Icon, Android-Icons und ein Web-Manifest, alles in einer ZIP-Datei.

Der Favicon-Generator macht aus einem Logo oder Bild alle Icon-Dateien, die eine Website braucht. Er schneidet das Bild auf ein mittiges Quadrat zu und erstellt favicon.ico (mit 16, 32 und 48 Pixeln), PNG-Icons von 16 bis 512 Pixeln, eine apple-touch-icon.png mit 180 × 180 Pixeln und eine site.webmanifest-Datei, alles in einer ZIP-Datei. Die Seite zeigt dir außerdem die HTML-Link-Tags, die du in den Head-Bereich deiner Website einfügst.

Favicons einbinden

Entpacke das Paket in den Hauptordner deiner Website und füge dann diese Tags in den <head> deiner Seite ein:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Anleitung: Favicon-Generator

  1. 1

    Logo hochladen

    Zieh ein PNG-, JPG-, SVG- oder HEIC-Bild hierher oder wähle es aus. Ein quadratisches Bild mit mindestens 512 × 512 Pixeln liefert das beste Ergebnis.

  2. 2

    Auf Zentrierung achten

    Die Icons werden aus der Bildmitte geschnitten. Sitzt dein Logo nicht mittig oder ist das Bild nicht quadratisch, schneide es zuerst mit „Bild zuschneiden“ auf 1:1 zu.

  3. 3

    Favicon-Paket herunterladen

    Klicke auf „Favicon-Paket herunterladen (ZIP)“, um alle Icon-Dateien und das Manifest zu erhalten.

  4. 4

    Zur Website hinzufügen

    Lade die Dateien in den Hauptordner deiner Website hoch, klicke dann auf „Code kopieren“ und füge die HTML-Tags in den Head-Bereich deiner Seiten ein.

Funktionen

favicon.ico in mehreren Größen
Eine ICO-Datei mit Icons in 16 × 16, 32 × 32 und 48 × 48 für Browser-Tabs und Lesezeichen.
PNG-Icons für jedes Gerät
PNG-Dateien mit 16, 32, 48, 64, 128, 192 und 512 Pixeln, dazu eine apple-touch-icon.png mit 180 × 180.
Web-App-Manifest
Eine site.webmanifest-Datei, die für Android und installierbare Web-Apps auf die Icons mit 192 und 512 Pixeln verweist.
Klare kleine Größen
Die Icons werden in mehreren Schritten aus dem vollen Bild verkleinert, so bleiben die Versionen mit 16 und 32 Pixeln sauberer.
HTML zum Einfügen
Kopiere die Link-Tags für die Icons und das Manifest mit einem Klick.

Fragen

Wie groß sollte mein Favicon-Bild sein?

Nutze ein quadratisches Bild mit mindestens 512 × 512 Pixeln, damit das größte Icon scharf bleibt. Einfache Formen und kräftige Farben bleiben auch bei 16 × 16 erkennbar.

Welche Dateien enthält die ZIP-Datei?

favicon.ico, favicon-16x16.png bis favicon-512x512.png (16, 32, 48, 64, 128, 192 und 512), apple-touch-icon.png mit 180 × 180 und site.webmanifest.

Wohin kommen die Favicon-Dateien?

Lade sie in den Hauptordner deiner Website hoch, also dorthin, wo auch deine Startseite liegt. Füge dann die HTML-Tags von dieser Seite in den Head-Bereich jeder Seite ein.

Warum wird ein Teil meines Logos abgeschnitten?

Das Tool nimmt das größte mittige Quadrat aus deinem Bild. Ist das Logo breit oder nicht zentriert, schneide es vor dem Erstellen der Icons auf ein Quadrat mit etwas Platz drumherum zu.

Kann ich ein SVG-Logo verwenden?

Ja. Das SVG wird als Bild gezeichnet und als PNG- und ICO-Dateien gespeichert. Die ZIP-Datei enthält kein SVG-Favicon.

Muss ich die Manifest-Datei bearbeiten?

Ja. site.webmanifest nutzt den Platzhalternamen App und dunkle Theme-Farben. Öffne die Datei in einem Texteditor und passe name, short_name und die Farben an deine Website an.