Favicon-Generator – Erstellen Sie eine „favicon.ico“-Datei und PNG-Symbole aus Text, einem Emoji oder einem Bild.

Geben Sie einen oder zwei Buchstaben oder ein Emoji ein oder laden Sie Ihr Logo hoch, und Sie erhalten einen fertigen Satz an Favicon-Dateien: favicon.ico, 16×16, 32×32, 48×48, das 180×180 Apple-Touch-Icon sowie die App-Icons in den Größen 192×192 und 512×512. Kopiere den HTML-Code, und schon bist du fertig. Die Bilder werden in deinem Browser verarbeitet.

Mein Favicon erstellen Das Bild bleibt in Ihrem Browser gespeichert
Favicon-Generator, der eine Vorschau des Website-Symbols in verschiedenen Größen neben einem Download-Button anzeigt

Gestalte dein Symbol

Vorschau und Download

Der Leitfaden

Anleitung zum Favicon-Generator: Größen, Dateien und der benötigte HTML-Code

Welche Favicon-Dateien eine Website benötigt und wie man sie hinzufügt.

Eine einfache Erklärung

Was ist der Favicon-Generator?

Ein Favicon ist das kleine Symbol, das in Browser-Registerkarten, Lesezeichen und Suchergebnissen neben dem Namen Ihrer Website angezeigt wird. Ein gutes Favicon sorgt dafür, dass Ihre Registerkarte unter vielen anderen leicht zu finden ist.

Dieser Generator zeichnet Ihr Symbol in jeder gewünschten Größe auf eine Leinwand und ermöglicht es Ihnen, jede Datei herunterzuladen, einschließlich einer „favicon.ico“-Datei mit verschiedenen Größen sowie der Link-Tags, die Sie auf Ihrer Seite einfügen können.

Häufige Gründe für den Einsatz

Warum nutzen Menschen einen Favicon-Generator?

Neue Websites

Erstellen Sie in nur einer Minute ein einfaches Buchstaben- oder Emoji-Symbol, während das eigentliche Logo noch entworfen wird.

Bestehende Logos

Schneiden Sie ein Logo auf ein Quadrat zu und exportieren Sie alle Größen, die von Browsern und Smartphones benötigt werden.

Web-Apps und PWAs

Laden Sie die PNG-Symbole mit einer Größe von 192 und 512 Pixeln herunter, die im Manifest einer Web-App verlangt werden, sowie das Apple-Touch-Symbol.

Welche Dateien Sie benötigen

Erläuterungen zu den Favicon-Größen

favicon.ico is the classic file at the root of your site. This tool packs 16, 32 and 48 pixel versions into one ICO file. The 16×16 and 32×32 PNG files suit modern browsers, and 32×32 looks sharper on high-density screens. The 180×180 apple-touch-icon.png is used when someone adds your site to an iPhone or iPad home screen.

Die PNG-Dateien mit den Abmessungen 192×192 und 512×512 werden von Android und installierbaren Web-Apps verwendet; fügen Sie diese in das Manifest Ihrer Web-App ein. Suchmaschinen können in ihren Ergebnissen ebenfalls ein Favicon anzeigen, und Google verlangt ein quadratisches Symbol, dessen Größe ein Vielfaches von 48 Pixeln beträgt – was durch die Dateien mit 48 und 192 abgedeckt ist.

In wenigen Schritten erledigt

So verwenden Sie den Favicon-Generator

  1. Wählen Sie „Text“ oder „Bild“. Bei „Text“ geben Sie ein oder zwei Zeichen oder ein Emoji ein und wählen Sie die Farben aus. Bei „Bild“ wählen Sie eine Datei aus.
  2. Wähle eine Form aus: Quadrat, abgerundet oder Kreis.
  3. Sehen Sie sich die Vorschaubilder in den jeweiligen Größen an. Kleine Bilder werden in ihrer tatsächlichen Pixelgröße angezeigt.
  4. Laden Sie die benötigten Dateien herunter oder klicken Sie auf „Alle herunterladen“ und fügen Sie anschließend den HTML-Code in den Head-Bereich Ihrer Seite ein.
Bessere Ergebnisse

Einfache Tipps

  • Ein oder zwei Zeichen lassen sich am besten bei einer Größe von 16 Pixeln lesen. Lange Wörter verschwimmen.
  • Achten Sie auf einen starken Kontrast zwischen dem Symbol und seinem Hintergrund, damit es sowohl auf hellen als auch auf dunklen Registerkarten gut lesbar bleibt.
  • Bei Logos mit vielen Details sollten Sie eine vereinfachte Version oder nur den Anfangsbuchstaben verwenden.
  • Legen Sie die Dateien im Stammverzeichnis Ihrer Website ab, damit die Links im Codeausschnitt funktionieren, oder passen Sie die Pfade an Ihre Ordner an.
Wissenswertes

Einschränkungen und Datenschutz

Datenschutz

Ihr Bild wird in Ihrem Browser gezeichnet und in der Größe angepasst. Es wird nichts hochgeladen, und die Dateien werden auf Ihrem Gerät erstellt, wenn Sie sie herunterladen.

Einschränkungen

Die ICO-Datei enthält ausschließlich Bilder mit einer Größe von 16, 32 und 48 Pixeln. Die Bilder werden auf ein zentriertes Quadrat zugeschnitten. Schneiden Sie Ihr Logo daher zunächst zu, falls Sie einen anderen Ausschnitt benötigen. Browser speichern alte Favicons manchmal lange im Cache, sodass es eine Weile dauern kann, bis ein neues Icon angezeigt wird.

Häufig gestellte Fragen

Häufig gestellte Fragen zum Favicon-Generator

Was ist ein Favicon?

Ein Favicon ist das kleine Symbol, das in Browser-Registerkarten, Lesezeichen und manchmal auch in Suchergebnissen neben dem Namen Ihrer Website angezeigt wird.

Welche Favicon-Größen benötige ich?

Eine „favicon.ico“-Datei (16, 32 und 48 Pixel), eine 32×32-PNG-Datei, ein 180×180-Apple-Touch-Icon sowie 192×192- und 512×512-PNG-Dateien, falls Ihre Website als App installiert werden kann. Dieses Tool erstellt alle diese Dateien.

Wie füge ich das Favicon zu meiner Website hinzu?

Laden Sie die Dateien auf Ihre Website hoch – in der Regel in den Stammordner – und fügen Sie die generierten Link-Tags in den Head-Bereich Ihres HTML-Codes ein. Passen Sie die Pfade an, falls sich Ihre Dateien an einem anderen Ort befinden.

Kann ich aus einem Emoji ein Favicon erstellen?

Ja. Wähle „Text“ aus und gib ein Emoji oder ein oder zwei beliebige Zeichen ein. Wähle eine Hintergrundfarbe und eine Form aus, und das Symbol wird automatisch für dich gezeichnet.

Welches Bild soll ich hochladen?

Am besten eignet sich ein quadratisches Bild mit mindestens 512 × 512 Pixeln im PNG-, JPG- oder WebP-Format. Andere Bildformen werden auf ein zentriertes Quadrat zugeschnitten.

Unterstützt es transparente Hintergründe?

Ja. Wenn man das Häkchen bei „Hintergrund füllen“ entfernt, bleibt die Transparenz bei einer PNG-Datei erhalten. Bei Text werden die Buchstaben auf ein transparentes Symbol gezeichnet.

Warum wird mein neues Favicon nicht angezeigt?

Browser speichern Favicons sehr intensiv im Cache. Versuchen Sie es mit einem „Hard Refresh“, leeren Sie den Cache oder öffnen Sie die Website in einem inkognito-Fenster, um das neue Symbol zu sehen.

Wird mein Bild auf einen Server hochgeladen?

Nein. Das Symbol wird in Ihrem Browser erstellt und die Dateien werden auf Ihrem Gerät generiert.

Von Nutzern dieses Tools

Rezensionen

Bewertungen werden geladen…
Mach weiter so

Weitere Werkzeuge im Kasten

Auf der Startseite finden Sie Dutzende weiterer kostenloser Tools, für die kein API-Schlüssel erforderlich ist.

Ein Tool vorschlagen