Favicon-Generator
Ein Tool zum Generieren von Favicons in verschiedenen Größen durch Hochladen von Bildern.
💡 Was ist ein Favicon?
Ein kleines Symbol, das in Browser-Tabs oder Lesezeichen einer Website angezeigt wird.
📋 Generierte Größen
- 16x16, 32x32 - Standard-Browser-Favicon
- 180x180 - Apple Touch Icon (iOS)
- 192x192, 512x512 - Android/PWA
🎨 Empfehlungen
- Quadratisches Bild verwenden (1:1 Verhältnis)
- Einfaches Design (kleine Anzeige berücksichtigen)
- Kontrastreiche Farben (verbessert Lesbarkeit)
- PNG-Format empfohlen (transparenter Hintergrund möglich)
📌 HTML-Verwendung
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
Generierte Größen
| Größe | Verwendungszweck |
|---|---|
| 16x16 | Standard-Browser-Favicon |
| 32x32 | Standard-Favicon |
| 48x48 | Hochauflösender Browser |
| 64x64 | Windows-Kachel |
| 128x128 | iOS-App-Icon |
| 180x180 | Apple Touch Icon |
| 192x192 | Android/Chrome |
| 512x512 | PWA-Splash |
HTML-Verwendung
<!-- Basis-Favicon -->
<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 -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<!-- PWA -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
Design-Empfehlungen
✅ Gut
- Quadratisches Bild
- Einfaches Design
- Kontrastreiche Farben
- PNG-Format (Transparenz möglich)
❌ Vermeiden
- Komplexe Details
- Langer Text
- Kontrastarme Farben
- Querformat-Bilder
Anwendungstipps
💡 Tipp 1: Original-Bild
Verwenden Sie ein hochauflösendes Bild mit mindestens 512x512px.
💡 Tipp 2: Testen
Testen Sie tatsächlich in mehreren Browsern.
💡 Tipp 3: Branding
Verwenden Sie Firmenlogos oder Marken-Icons.
Dateistruktur
Platzieren Sie die generierten Favicons im Website-Root:
/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-180x180.png
├── favicon-192x192.png
└── favicon-512x512.png
Häufig gestellte Fragen
F: Werden auch ICO-Dateien generiert?
A: Derzeit wird nur PNG unterstützt. Für ICO konvertieren Sie PNG.
F: Ist ein transparenter Hintergrund möglich?
A: Ja, da es sich um PNG-Dateien handelt, ist ein transparenter Hintergrund möglich.
F: Werden alle Größen benötigt?
A: Grundsätzlich reichen 16x16, 32x32 und 180x180 aus.
💬 War dieses Tool hilfreich?
Senden Sie uns jederzeit gerne Ihr Feedback oder Ihre Vorschläge!
Datenschutz
Alle Favicons werden lokal in Ihrem Browser generiert. Ihre hochgeladenen Bilder werden nicht auf unseren Servern gespeichert oder verarbeitet.