Favicon-Generator
Verwandle ein Logo in ein komplettes Favicon-Paket.
Läuft in deinem Browser. Deine Dateien verlassen nie dein Gerät.
- ICO plus jede PNG-Größe
- Fertiger HTML-Schnipsel
- Einstellbarer Innenabstand
So erstellst du ein Favicon
- Lege ein quadratisches Logo oder Bild hier ab.
- Passe bei Bedarf Innenabstand und Hintergrund an.
- Lade das ZIP herunter und füge den HTML-Schnipsel ein.
Was im ZIP enthalten ist
| Datei | Größe | Genutzt von |
|---|---|---|
| favicon.ico | 16, 32 und 48 px in einer Datei | Ältere Browser, Lesezeichen |
| favicon-16x16.png | 16 x 16 | Browser-Tabs |
| favicon-32x32.png | 32 x 32 | Browser-Tabs, Taskleisten |
| apple-touch-icon.png | 180 x 180 | Startbildschirm von iPhone und iPad |
| android-chrome-192x192.png | 192 x 192 | Android-Startbildschirm |
| android-chrome-512x512.png | 512 x 512 | Android-Splashscreen und App-Icon |
| site.webmanifest | Textdatei | Sagt Android, welches Icon zu nutzen ist |
Wohin die Dateien gehören
Lade jede Datei aus dem ZIP in den Root-Ordner deiner Website hoch, denselben Ordner wie index.html, nicht in einen Unterordner. Füge dann den bereitgestellten HTML-Schnipsel in den head jeder Seite ein, oder in die gemeinsame Header-Vorlage deiner Website, falls es eine gibt.
Tipps zu Innenabstand und Hintergrund
- Füge 10 bis 15 Prozent Innenabstand hinzu, wenn dein Logo die Ränder seines Quadrats berührt, damit es bei 16 Pixel Größe nicht beschnitten wirkt.
- Aktiviere eine Hintergrundfüllung, wenn dein Logo Transparenz hat und gegen die eigene Tab-Farbe eines Browsers seltsam wirkt.
- Ein einfaches, kontrastreiches Logo wirkt bei 16x16 besser als eines mit feinen Details oder dünnem Text.
Häufige Fragen zu Favicon-Generator
Was ist im ZIP enthalten?
favicon.ico mit 16, 32 und 48 Pixel Größe, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, zwei android-chrome-PNGs und eine site.webmanifest-Datei.
Wohin kommen diese Dateien?
Lade sie in den Root-Ordner deiner Website hoch und füge dann den HTML-Schnipsel in den head jeder Seite ein.
Sollte mein Bild schon quadratisch sein?
Ein quadratisches Logo ergibt das sauberste Ergebnis. Nicht quadratische Bilder werden mit Innenabstand in ein Quadrat eingepasst, sodass nichts gestreckt wird.
Was macht der Innenabstand?
Er fügt leeren Raum um dein Logo im Quadrat hinzu, damit das Design bei kleinen Icon-Größen nicht an den Rändern anstößt.
Wird mein Bild hochgeladen?
Nein. Jede Icon-Größe wird in deinem Browser erzeugt, das Bild verlässt dein Gerät also nie.
Brauche ich alle sechs Dateien oder nur favicon.ico?
Moderne Browser nutzen meist die PNG-Dateien und site.webmanifest. favicon.ico wird für ältere Browser und manche Lesezeichenleisten beibehalten, lade also alle hoch für die breiteste Unterstützung.
Mit welcher Bildgröße sollte ich starten?
Mindestens 512 mal 512 Pixel. Das Master-Icon wird in dieser Größe erzeugt, ein kleineres Ausgangsbild wird also hochskaliert und kann weich wirken.
Muss die Manifest-Datei bearbeitet werden?
Die erzeugte site.webmanifest nutzt einen Platzhaltertext für den Seitennamen. Öffne sie anschließend in einem Texteditor und passe die Felder name und short_name an deine Website an.