Zum Hauptinhalt springen
Design-Tool

Favicon-Generator

Erstelle alle Favicon-Größen für deine Website. Lade ein Bild hoch oder erstelle ein Favicon aus Text.

Bild hochladen
Lade ein quadratisches Bild hoch (empfohlen: mindestens 512x512px)
HTML-Code
Füge diesen Code in den <head>-Bereich deiner Website ein
<!-- Favicon für Browser -->
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<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 Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">

<!-- Windows Tiles -->
<meta name="msapplication-TileColor" content="#3b82f6">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">

<!-- Web Manifest & Theme -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#3b82f6">
{
  "name": "Deine Website",
  "short_name": "Website",
  "description": "Beschreibung deiner Website",
  "start_url": "/",
  "scope": "/",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#3b82f6",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait-primary",
  "lang": "de"
}

Häufig gestellte Fragen

Alles über Favicons und deren Erstellung

Was ist ein Favicon?
Ein Favicon (Favorite Icon) ist das kleine Symbol, das in Browser-Tabs, Lesezeichen und auf dem Homescreen von Mobilgeräten angezeigt wird. Es hilft Nutzern, deine Website schnell zu identifizieren und stärkt dein Branding.
Welche Größen brauche ich für ein Favicon?
Für optimale Kompatibilität benötigst du mehrere Größen: 16x16px und 32x32px für Browser-Tabs, 180x180px für Apple Touch Icons, 192x192px und 512x512px für Android/PWA. Unser Generator erstellt automatisch alle gängigen Größen.
Welches Dateiformat ist am besten für Favicons?
PNG ist das modernste und am besten unterstützte Format. ICO wird für ältere Browser benötigt. SVG bietet die beste Skalierbarkeit, wird aber nicht von allen Browsern unterstützt. Unser Generator erstellt PNG-Dateien für maximale Kompatibilität.
Wie binde ich ein Favicon in meine Website ein?
Füge die generierten Link-Tags in den <head>-Bereich deiner HTML-Seite ein. Die wichtigsten sind: <link rel='icon' href='/favicon-32x32.png'> für Browser und <link rel='apple-touch-icon' href='/apple-touch-icon.png'> für iOS-Geräte.
Kann ich ein Textlogo als Favicon verwenden?
Ja, aber bedenke dass Favicons sehr klein sind (16x16 bis 32x32 Pixel). Text ist bei dieser Größe schwer lesbar. Besser ist ein einfaches Symbol, ein Buchstabe oder ein stark vereinfachtes Logo.
Ist der Favicon-Generator kostenlos?
Ja, unser Favicon-Generator ist komplett kostenlos und ohne Anmeldung nutzbar. Alle generierten Favicons können ohne Einschränkungen heruntergeladen und verwendet werden.

Changelog

Die neuesten Updates und Verbesserungen unseres Favicon-Generator
v1.1.028. Dezember 2025

Erweiterte Apple Touch Icons & Web Manifest

  • • Neu: Alle Apple Touch Icon Größen (76, 120, 152, 167, 180px)
  • • Neu: Vollständiges Web Manifest mit allen Optionen
  • • Neu: Maskable Icon für PWA (mit Padding)
  • • Neu: Web Manifest als Datei herunterladen
  • • Neu: Safari Pinned Tab Icon (SVG)
  • • Neu: Windows Tile Icon Unterstützung
  • • Verbesserte Icon-Kategorisierung nach Plattform
v1.0.08. Dezember 2025

Offizieller Launch

  • • Upload von Bildern (PNG, JPG, SVG, WebP)
  • • Generierung aller gängigen Favicon-Größen
  • • Live-Vorschau in verschiedenen Kontexten
  • • HTML-Code zum Kopieren
  • • Download aller Größen
  • • Textbasierte Favicon-Erstellung