Kostenloser Online-Favicon-Generator

Kostenloser Online-Favicon-Generator. Laden Sie ein Bild hoch und laden Sie ein komplettes Icon-Kit herunter – favicon.ico, PNG-Icons, Apple-Touch-Icon und Web-Manifest – bereit für Browser-Tabs, Lesezeichen sowie Android- und iOS-Startbildschirme.

Ein quadratisches Bild mit 512 × 512 px oder größer funktioniert am besten.

0%
Von Rand zu RandLuft zum Atmen
0%
QuadratKreis
App- und Installations-Einstellungen

Root-relativer Pfad, z. B. / oder /icons/.

#FFFFFF

Wählen Sie ein Bild oder versuchen Sie ein Text-Icon, um zu starten.

512 px
Browser-Tab
Meine Website
your-website.com
Startbildschirm
Meine Website
Pixelperfekt?

Kleine Größen vergleichen.

16px
32px
48px
64px

Laden Sie Ihr Icon-Kit herunter

7 Icon-Dateien, ein Web-Manifest und Installationsanleitung.

Inhalt Ihres Downloads

9 Dateien
favicon.icoClassic browser support
16, 32, 48 px
favicon-16x16.pngBrowser tabs
16 x 16
favicon-32x32.pngHigh-density tabs
32 x 32
favicon-48x48.pngSearch & shortcuts
48 x 48
apple-touch-icon.pngiPhone & iPad
180 x 180
android-chrome-192x192.pngAndroid home screen
192 x 192
android-chrome-512x512.pngLarge app icon
512 x 512
site.webmanifestWeb app metadata
JSON
INSTALL.txtInstallation guide
TXT

HTML-Code

HTML

Laden Sie Ihre Dateien hoch und fügen Sie dies dann in das <head> Ihrer Website ein. Die Pfade werden mit Ihren Einstellungen aktualisiert.

index.html
VOM HOCHLADEN BIS ÜBERALL

So funktioniert es

Verzichten Sie auf manuelles Ändern der Größe und Raten über Formate.
In drei Schritten von Ihrer Idee zu einer wiedererkennbaren Website.

01 /

Bringen Sie Ihre Identität ein.

Laden Sie Ihr Logo hoch oder erstellen Sie ein Icon aus einem Buchstaben. Einfache Formen, kräftiger Kontrast und eine quadratische Leinwand sind der beste Ausgangspunkt.

02 /

Verfeinern Sie die Details.

Wählen Sie einen Hintergrund, passen Sie den Abstand an und prüfen Sie die Live-Vorschauen. Stellen Sie sicher, dass Ihr Zeichen auch in einem winzigen Browser-Tab erkennbar ist.

03 /

Geben Sie jedem Tab ein Zuhause.

Laden Sie Ihr komplettes Kit herunter, laden Sie die Dateien hoch und fügen Sie das HTML ein. Ihre Marke ist bereit für Browser-Tabs, Lesezeichen und Startbildschirme.

FÜR DIE KLEINEN DINGE GEMACHT

Funktioniert über Browser und Geräte hinweg

Ein Favicon ist oft der kleinste Teil Ihrer Marke. Trotzdem sollte es bewusst gestaltet sein. Erzeugen Sie die richtigen Größen für die Orte, an denen Menschen Ihre Website finden, speichern und wieder besuchen.

Erstellen Sie Ihr Favicon
Alltags-BrowserICO + PNG für Tabs, Lesezeichen und Verknüpfungen16–48 px
Apple-GeräteEin dediziertes, undurchsichtiges Startbildschirm-Icon180 px
Android & Web-AppsHochauflösende Icons mit Web-Manifest192 / 512
DER ZWEI-MINUTEN-LEITFADEN

Installation

Keine komplizierte Einrichtung.
Nur wenige Dateien am richtigen Ort.

Springen Sie zu Ihrem HTML
1

Laden Sie Ihr Icon-Kit herunter und entpacken Sie es

Wählen Sie Ihre Quelle und passen Sie die Vorschau an, wählen Sie dann „Favicon-Kit herunterladen“. Entpacken Sie das ZIP, um alle sieben Icon-Dateien, site.webmanifest und eine Installationsanleitung im Klartext zu erhalten.

2

Platzieren Sie die Dateien so, dass Ihre Website sie ausliefern kann

Laden Sie die Icons und das Manifest in das öffentliche Root-Verzeichnis Ihrer Website hoch. Wenn Sie einen Unterordner bevorzugen, legen Sie „Icon-Verzeichnis“ unter den App-Einstellungen fest, bevor Sie herunterladen. /icons/ bedeutet beispielsweise, dass Ihre Dateien unter your-site.com/icons/ verfügbar sein sollten.

3

Fügen Sie das HTML hinzu und prüfen Sie Ihre Arbeit

Kopieren Sie den generierten Code in das <head> jeder Seite oder Ihres gemeinsamen Layouts. Entfernen Sie widersprüchliche alte Icon-Tags. Öffnen Sie die Icon-URLs direkt, um zu prüfen, dass sie geladen werden, und besuchen Sie Ihre Website anschließend in einem privaten Fenster, um veraltete gecachte Icons zu vermeiden.

EIN BESSERES ICON BEGINNT HIER

Tipps für das Favicon-Design

Weniger Details. Mehr Charakter.

Feine Linien und lange Wörter verschwinden bei kleinen Größen. Verwenden Sie ein unverwechselbares Symbol, ein Monogramm oder einen einzelnen Buchstaben, statt Ihr gesamtes Logo in ein Quadrat zu quetschen.

Geben Sie ihm etwas Raum.

Nutzen Sie Innenabstand, um Ihr Zeichen von den Rändern fernzuhalten. Sehen Sie sich sowohl einen Browser-Tab als auch einen Startbildschirm an: Dasselbe Bild kann je nach Maßstab ganz anders wirken.

Lassen Sie Kontrast zählen.

Transparente Icons können bei einem hellen oder dunklen Browser-Theme verschwinden. Ein solider Hintergrund sorgt für vorhersehbaren Kontrast. Prüfen Sie beide Themes, bevor Sie live gehen.

Beginnen Sie mit einer scharfen Quelle.

Ein großes, sauberes Bild gibt dem Generator mehr Details zum Arbeiten. Das Hochskalieren eines winzigen Bildes kann fehlende Informationen nicht wiederherstellen. Verwenden Sie möglichst ein SVG oder eine Quelle mit 512 px.

DIE FEINEREN DETAILS

Häufig gestellte Fragen

Alles Weitere, was Sie über Ihr neues Favicon wissen möchten.

Was ist ein Favicon und warum brauche ich eins?

Ein Favicon ist das kleine Symbol, das Ihre Website in Browser-Tabs, Lesezeichen, dem Verlauf und manchmal in Suchergebnissen repräsentiert. Ein klares, konsistentes Icon hilft Besuchern, Ihre Website unter vielen geöffneten Tabs wiederzuerkennen. Startbildschirm-Icons erfüllen einen ähnlichen Zweck, wenn jemand Ihre Website auf einem Telefon speichert.

Welches Bild sollte ich hochladen?

Beginnen Sie mit einem quadratischen PNG, SVG, JPEG oder WebP, idealerweise mit mindestens 512 × 512 Pixeln. Transparente PNGs und eigenständige SVGs funktionieren besonders gut. Halten Sie das Design einfach: Ein Symbol oder Initialen sind bei 16 Pixeln meist besser lesbar als ein vollständiges Wortlogo. Unterstützt werden Dateien bis 10 MB und Bilder bis 4096 Pixel pro Seite.

Ist dieses Tool kostenlos? Werden meine Bilder hochgeladen?

Der Generator ist kostenlos nutzbar, ohne Konto oder Wasserzeichen. Bilddecodierung, Vorschauen und ZIP-Erstellung erfolgen in Ihrem Browser. Ihr Quellbild wird nicht auf einen Server hochgeladen. Ihr Browser lädt beim ersten Besuch möglicherweise die Website-Ressourcen herunter, aber der Generator sendet Ihr Bild nirgendwohin.

Warum haben Apple- und Android-Icons einen Hintergrund?

Startbildschirm-Icons wirken auf einer soliden quadratischen Leinwand am besten. Dieses Tool ebnet diese Exporte auf Ihre gewählte Hintergrundfarbe, selbst wenn transparente Browser-Icons aktiviert sind. Das Gerät wendet seine eigene Eckbehandlung an. Android-Exporte verwenden den Standardzweck „any“; sie sind keine zertifizierten maskierbaren (maskable) Icons.

Warum wird mein altes Favicon noch angezeigt?

Browser cachen Favicons aggressiv. Prüfen Sie zuerst, dass jede generierte URL direkt öffnet und Ihre Seite nur eine vorgesehene Reihe von Icon-Links hat. Versuchen Sie dann ein privates Fenster oder leeren Sie den Site-Cache. Für ein zuverlässiges Update verwenden Sie einen neuen Ordner wie /icons-v2/ und aktualisieren Sie die HTML-Links. Suchmaschinen benötigen möglicherweise länger, um das Icon erneut zu crawlen.

Macht das Web-Manifest meine Website zu einer PWA?

Nein. Das Manifest stellt App-Name, Farben und Icons bereit, fügt aber keine Offline-Funktionalität oder einen Service Worker hinzu. Die Installierbarkeit hängt von Ihrem Browser und der Site-Konfiguration ab, einschließlich HTTPS. Das generierte Manifest verwendet / als Start-URL; bearbeiten Sie es, wenn Ihre App in einem Unterverzeichnis liegt.

Kann ich diese Dateien mit WordPress, Shopify oder Astro verwenden?

Ja. Die Dateien sind standardmäßige PNG- und ICO-Bilder. In Astro legen Sie sie in public/ ab und fügen die generierten Tags in das <head> Ihres gemeinsamen Layouts ein. Verwenden Sie bei WordPress oder Shopify wenn möglich die Site-Icon-Einstellung der Plattform oder laden Sie die Dateien hoch und passen Sie das <head> Ihres Themes an. Gehostete Plattformen können Dateinamen und URLs steuern. Passen Sie daher die Pfade entsprechend an.