Seit 2010 · Über 2 Mio. Tool-Aufrufe pro Monat
Seit 2010
Zu Chrome hinzufügen

Mein Werkzeugkasten

Automatischer Modus

Noch keine Werkzeuge gespeichert.

Auf Premium-Version upgraden
Ähnliche Tools
Lorem Picsum / Platzhalterbild-GeneratorHEIC zu JPG KonverterBild zu SVG TracerbildrotatorVideo-zu-Bild-Extraktor
Startseite > Webmaster-Tools
 

Favicon Generator

Wandelt jedes PNG-, JPG- oder WebP-Bild in eine Standard-.ico-Datei und jede Icon-Größe um, die moderne Browser, Apple-Geräte und Android brauchen – 16×16 bis 512×512, inklusive 180×180 Apple-Touch-Icon – mit Live-Vorschau.

Kostenlos nutzbarOhne RegistrierungAktualisiert Feb. 2026
Favicon GeneratorJetzt testen — gratis ▼

Ausgabe: ICO und PNG, einschließlich Apple-Touch- und Android-Chrome/PWA-Icons; ZIP-Download verfügbar.

📤

Bild hierher ziehen

oder klicken, um Dateien zu durchsuchen

PNG JPG WebP GIF
Vorschau
Originalbild
Dimensionen -
Dateigröße -
Format -
⚙️

Icon-Größen auswählen

📄

ICO-Datei (favicon.ico)

🌐

Moderne Browser- & Mobil-Icons

Deaktiviert lassen oder transparentes PNG verwenden, um Transparenz zu erhalten

Embed Favicon Generator Widget

Favicon Generator

Willkommen beim Favicon Generator, einem umfassenden Tool zur Erstellung professioneller Favicons und App-Icons aus jedem beliebigen Bild. Egal, ob Sie eine einfache .ico-Datei für Browser-Tabs oder einen kompletten Satz Icons für PWA (Progressive Web App) Unterstützung benötigen, dieses Tool generiert alle benötigten Größen mit nur einem Klick.

Was ist ein Favicon?

Ein Favicon (kurz für "Favorite Icon") ist ein kleines Symbol, das mit Ihrer Website verknüpft ist. Es erscheint an verschiedenen Stellen:

  • Browser-Tabs: Das kleine Symbol neben Ihrem Seitentitel
  • Lesezeichenleiste: Wenn Benutzer Ihre Seite als Lesezeichen speichern
  • Browser-Verlauf: Im Dropdown-Menü des Verlaufs
  • Adressleiste: In einigen Browsern neben der URL
  • Startbildschirm: Wenn Benutzer Ihre Seite zum Startbildschirm ihres Mobilgeräts hinzufügen
  • Suchergebnisse: Einige Suchmaschinen zeigen Favicons in den Ergebnissen an

Ein gut gestaltetes Favicon verbessert den Markenwiedererkennungswert, lässt Ihre Website professioneller wirken und hilft Benutzern, Ihre Website unter vielen geöffneten Tabs schnell zu identifizieren.

Icon-Größen erklärt

ICO-Dateigrößen (favicon.ico)

Das traditionelle .ico-Format kann mehrere Größen in einer einzigen Datei enthalten. Unser Tool generiert:

Größe Hauptverwendung Empfohlen
16x16 Browser-Tab-Icon, Adressleiste Ja (Essentiell)
32x32 Windows-Taskleiste, neuere Browser Ja (Essentiell)
48x48 Windows-Desktop Verknüpfungssymbol Ja (Essentiell)
64x64 High-DPI-Displays, Windows-Seitenicons Optional
128x128 Chrome Web Store, hochauflösende Displays Optional
256x256 Windows Vista+ Icons, sehr hohes DPI Optional

Apple Touch Icon (180x180)

Wenn iOS-Benutzer Ihre Website zu ihrem Startbildschirm hinzufügen, wird dieses Symbol verwendet. Apple empfiehlt 180x180 Pixel für eine optimale Darstellung auf Retina-Geräten. Dies ist separat von der .ico-Datei und sollte als apple-touch-icon.png gespeichert werden.

Android Chrome Icons (192x192 und 512x512)

Moderne Android-Geräte und Chrome unterstützen Progressive Web Apps (PWA). Das 192x192-Icon wird für Startbildschirm-Verknüpfungen verwendet, während 512x512 für Splash-Screens beim Start der App verwendet wird. Diese werden in der Datei site.webmanifest referenziert.

So verwenden Sie dieses Tool

  1. Bild hochladen: Ziehen Sie ein PNG-, JPG- oder WebP-Bild per Drag-and-Drop oder klicken Sie, um eines auszuwählen. Verwenden Sie für beste Ergebnisse ein quadratisches Bild mit mindestens 512x512 Pixeln. PNG mit transparentem Hintergrund ist ideal.
  2. Größen auswählen: Wählen Sie aus, welche Icon-Größen generiert werden sollen. Wir empfehlen mindestens 16x16, 32x32, 48x48 für die ICO-Datei plus 180x180 für Apple-Geräte.
  3. Hintergrundfarbe festlegen: Wenn Ihr Bild Transparenz aufweist und Sie einen soliden Hintergrund wünschen, wählen Sie eine Farbe. Andernfalls lassen Sie es transparent.
  4. Generieren: Klicken Sie auf die Schaltfläche, um alle Ihre Favicons zu erstellen. Prüfen Sie jede Größe in der Vorschau, um die Qualität sicherzustellen.
  5. Herunterladen: Laden Sie einzelne Dateien oder das komplette ZIP-Paket mit allen Icons und Code-Snippets herunter.

Best Practices für das Favicon-Design

  • Einfach halten: Favicons sind winzig – komplexe Logos mit feinen Details sind bei 16x16 Pixeln nicht lesbar. Verwenden Sie vereinfachte Versionen Ihres Logos oder ein markantes Symbol.
  • Kontrast nutzen: Stellen Sie sicher, dass sich Ihr Icon sowohl von hellen als auch von dunklen Hintergründen abhebt (Browser-Themes variieren).
  • Bei kleinen Größen testen: Prüfen Sie Ihr Favicon immer bei 16x16, um sicherzustellen, dass es erkennbar ist.
  • Transparenz berücksichtigen: PNG-Favicons können transparente Hintergründe haben, was in modernen Browsern sauberer aussieht.
  • Quadratisches Format: Beginnen Sie immer mit einem perfekt quadratischen Quellbild, um Verzerrungen zu vermeiden.

Implementierungsleitfaden

Grundlegende HTML-Implementierung

Nachdem Sie Ihre Favicons generiert haben, fügen Sie diesen Code in den <head>-Bereich Ihres HTML ein:

<!-- Favicon -->
<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">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

PWA Manifest-Datei

Für die Unterstützung von Progressive Web Apps fügen Sie eine site.webmanifest-Datei ein, die auf Ihre Android-Icons verweist.

Häufig gestellte Fragen

Was ist ein Favicon und warum brauche ich eines?

Ein Favicon (Favorite Icon) ist das kleine Symbol, das in Browser-Tabs, Lesezeichen und Adressleisten erscheint. Es hilft Benutzern, Ihre Website unter mehreren geöffneten Tabs schnell zu identifizieren. Ein professionelles Favicon verbessert den Markenwiedererkennungswert und die Benutzererfahrung. Moderne Websites benötigen mehrere Favicon-Größen für verschiedene Geräte und Browser.

Welche Bildformate kann ich verwenden, um ein Favicon zu erstellen?

Sie können PNG-, JPG-, JPEG-, GIF- oder WebP-Bilder hochladen. Für beste Ergebnisse verwenden Sie ein PNG-Bild mit transparentem Hintergrund und einer Größe von 512x512 Pixeln oder größer. Das Tool passt die Größe Ihres Bildes automatisch an alle ausgewählten Favicon-Größen an, wobei die Qualität erhalten bleibt.

Welche Favicon-Größen sollte ich generieren?

Für eine vollständige Browser-Abdeckung empfehlen wir: 16x16 (Browser-Tabs), 32x32 (Windows-Taskleiste), 48x48 (Windows-Desktop), 180x180 (Apple Touch Icon für iOS), 192x192 und 512x512 (Android Chrome). Die Größen 64x64, 128x128 und 256x256 sind optional, aber nützlich für High-DPI-Displays.

Wird mein hochgeladenes Bild auf Ihrem Server gespeichert?

Die gesamte Bildverarbeitung findet während der Favicon-Generierung sicher auf unserem Server statt, aber wir speichern Ihre Bilder nicht dauerhaft. Nach der Verarbeitung wird das Originalbild verworfen. Nur die generierten Favicon-Dateien werden Ihnen zum Download zurückgesendet.

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

Nachdem Sie Ihre Favicons generiert haben: 1) Laden Sie die ZIP-Datei mit allen Icon-Dateien herunter, 2) Laden Sie die Dateien in das Stammverzeichnis Ihrer Website hoch, 3) Kopieren Sie das bereitgestellte HTML-Code-Snippet in den -Bereich Ihrer Website. Für PWA-Unterstützung fügen Sie auch die Datei site.webmanifest hinzu.

Zusätzliche Ressourcen

Zitieren Sie diesen Inhalt, diese Seite oder dieses Tool als:

"Favicon Generator" unter https://MiniWebtool.com/de/favicon-generator/ von MiniWebtool, https://MiniWebtool.com/

vom miniwebtool-Team. Aktualisiert am: 05. Feb. 2026

Webmaster-Tools:

Beliebte und aktualisierte Tools:

SQL FormatiererSVG OptimiererSVG zu React/JSX KonverterAlle anzeigen →
Startseite > Webmaster-Tools > Favicon Generator