Kostenloser Favicon-Generator

Laden Sie Ihr Logo als PNG, SVG oder JPG: Das Tool erstellt favicon.ico (16, 32 und 48 px), PNG-Icons in 180, 192 und 512 px, site.webmanifest und die HTML-Tags zum Kopieren, gebündelt in einer ZIP-Datei. Alles läuft in Ihrem Browser: Das Bild wird an keinen Server gesendet, ohne Konto und ohne Nutzungslimit.

  • ✓ 100 % im Browser
  • ✓ Kein Upload
  • ✓ Ohne Konto und Limit

Ein Favicon in 4 Schritten erstellen

  1. 1

    Bild laden

    Legen Sie Ihr Logo oder Symbol als PNG, SVG oder JPG ab. Eine quadratische Datei ab 512 px oder ein SVG ergibt die schärfsten Icons.

  2. 2

    Darstellung anpassen

    Wählen Sie einen transparenten oder farbigen Hintergrund, passen Sie den Innenabstand an und prüfen Sie die Vorschau bei 16 und 32 px, den Größen eines Browser-Tabs.

  3. 3

    Erstellen und herunterladen

    Klicken Sie auf „Favicon erstellen“ und laden Sie die ZIP-Datei herunter: favicon.ico, die drei PNG, site.webmanifest und den HTML-Code.

  4. 4

    Auf der Website einbinden

    Kopieren Sie die Dateien ins Stammverzeichnis und fügen Sie die Tags in den <head> ein, oder laden Sie das Icon in Ihr CMS hoch (siehe unten).

Das Favicon auf Ihrer Website einbinden

Das Vorgehen hängt von Ihrem System ab. Leeren Sie in jedem Fall den Cache oder öffnen Sie ein privates Fenster: Browser speichern das Favicon lange.

HTML-Website oder Framework

  1. Kopieren Sie favicon.ico, apple-touch-icon.png, beide android-chrome-Dateien und site.webmanifest ins Stammverzeichnis (neben index.html oder in den Ordner public/ eines Frameworks).
  2. Fügen Sie den HTML-Code in den <head> jeder Seite oder der gemeinsamen Vorlage ein.
  3. Öffnen Sie https://ihreseite/favicon.ico: Die Datei sollte ohne Fehler angezeigt werden.

WordPress

  1. Klassisches Theme: Design → Customizer → Website-Informationen → Website-Icon.
  2. Block-Theme: Im Website-Editor bietet der Block „Website-Logo“ an, das Bild als Website-Icon zu verwenden.
  3. Laden Sie android-chrome-512x512.png hoch: WordPress verlangt ein quadratisches Bild ab 512 px und erstellt die übrigen Größen selbst.

Shopify

  1. Onlineshop → Themes → Anpassen.
  2. Öffnen Sie die Theme-Einstellungen: Das Favicon liegt je nach Theme im Bereich Logo oder Favicon.
  3. Laden Sie android-chrome-192x192.png oder das PNG mit 512 px hoch und speichern Sie.

Wix

  1. Öffnen Sie in der Verwaltung die Einstellungen und dann Favicon.
  2. Laden Sie android-chrome-512x512.png hoch und veröffentlichen Sie die Website.
  3. Ein eigenes Favicon ist bei Wix nur mit Premium-Paket und verbundener Domain möglich.

Favicon-Größen und -Formate

Eine einzelne Datei reicht nicht mehr: Jede Oberfläche liest eine andere Größe. Das erstellte Paket deckt die üblichen Fälle ab.

DateiGrößeVerwendung
favicon.ico16, 32 und 48 pxTabs, Lesezeichen, Windows-Taskleiste, Suchergebnisse
apple-touch-icon.png180 × 180 pxStartbildschirm von iPhone und iPad
android-chrome-192x192.png192 × 192 pxAndroid-Startbildschirm, Manifest
android-chrome-512x512.png512 × 512 pxStartbildschirm beim Öffnen, Installation als App
site.webmanifestJSONName, Farben und Icons der Web-App

Google empfiehlt ein quadratisches Icon, größer als 48 × 48 px und für Crawler zugänglich: Der Code deklariert daher auch das PNG mit 192 px.

Häufige Fehler

  • Das ganze Logo mit Schriftzug verwenden: Bei 16 px wird die Schrift zum Fleck. Nutzen Sie das Symbol oder einen Anfangsbuchstaben.
  • Von einem kleinen Bild ausgehen: Ein PNG mit 64 px, auf 512 px vergrößert, wird unscharf. Besser ein SVG oder ein PNG ab 512 px.
  • Den Kontrast vergessen: Ein dunkles Icon verschwindet im dunklen Modus. Testen Sie beide Modi oder fügen Sie einen Hintergrund hinzu.
  • Dateien in einen Unterordner legen, ohne die Pfade anzupassen: Die Tags verweisen auf das Stammverzeichnis.
  • Das Favicon für Crawler sperren: Eine robots.txt, die /favicon.ico ausschließt, verhindert die Anzeige in den Google-Ergebnissen.
  • Zu früh aufgeben: Browser- und Google-Cache brauchen Zeit, um sich zu aktualisieren.

Häufige Fragen

Ist der Favicon-Generator wirklich kostenlos?
Ja. Es gibt kein Konto, kein Limit und kein Wasserzeichen: Die Umwandlung läuft in Ihrem Browser, mit dessen eigenen Ressourcen.
Wird mein Bild auf einen Server hochgeladen?
Nein. Die Datei wird lokal von Ihrem Browser gelesen und umgewandelt, und die ZIP-Datei entsteht auf Ihrem Gerät. Kein Bild verlässt Ihren Computer.
Wie groß sollte das Ausgangsbild sein?
Idealerweise ein Quadrat ab 512 × 512 px oder ein SVG. Ein rechteckiges Bild wird mit dem gewählten Abstand im Quadrat zentriert.
Braucht man noch eine favicon.ico?
Ja, es ist das am breitesten unterstützte Format: Browser, Lesezeichen, Windows und viele Tools suchen es im Stammverzeichnis. Die PNG ergänzen es für Mobilgeräte.
Warum erscheint mein Favicon nicht bei Google?
Google muss Seite und Icon zuerst crawlen. Prüfen Sie, ob die Datei erreichbar, quadratisch und größer als 48 px ist, und haben Sie Geduld: Die Aktualisierung kann Tage oder Wochen dauern.
Ich habe noch kein Logo. Was tun?
Erstellen Sie zuerst das Logo und kommen Sie dann mit seinem Symbol hierher zurück. Mit BrandMotion Lab erzeugen und vergleichen Sie Logo-Vorschläge, kostenlos für den Einstieg.

Noch kein Logo?

Erstellen Sie es mit BrandMotion Lab: Beschreiben Sie Ihr Geschäft, vergleichen Sie Vorschläge und machen Sie hier anschließend ein Favicon daraus.

Mein Logo erstellen

Mehr über Formate und Gestaltung eines guten Favicons erfahren Sie in unserem Ratgeber: Favicon: das Icon Ihrer Website erstellen

Quellen