Du erhältst favicon.ico, die PNG-Größen, ein Apple Touch Icon, Android- und Maskable-Icons, ein Web-Manifest und das HTML zum Einfügen, alles in einer .zip. Erstelle ein komplettes Icon-Set für deine Website aus einem Buchstaben oder einem Bild. Kostenlos und privat.
So erstellst du ein Favicon
- Wähle unter „Ausgangspunkt“ entweder „Ein Buchstabe“ oder „Ein Bild“. Für ein Bild tippst du auf „Bild auswählen“.
- Für einen Buchstaben gibst du deine Buchstaben ein und wählst Stärke, Schrift, Textfarbe, Stil und Hintergrund.
- Wähle die Form: Quadrat, Abgerundet oder Kreis. Passe den Innenabstand an oder lass den Hintergrund transparent.
- Trage unter „Deine Website“ den Namen der Website oder App, den Kurznamen und den Icon-Ordner ein.
- Sieh dir die Vorschau an. Sie zeigt das Icon im Browser-Tab, in Suchergebnissen und auf einem Smartphone.
- Tippe auf „HTML kopieren“, um den Code für deine Seite zu erhalten, und auf „Alle herunterladen (.zip)“ für die Dateien.
Wofür jede Datei da ist
favicon.ico enthält Versionen mit 16, 32 und 48 Pixeln in einer Datei und funktioniert in jedem Browser, auch in alten. Die PNG-Favicons liefern modernen Browsern ein scharfes Tab-Icon. apple-touch-icon.png wird verwendet, wenn jemand deine Website zum Homescreen eines iPhone oder iPad hinzufügt, und die Android-Icons samt site.webmanifest, wenn deine Website auf Android oder als App installiert wird.
Was ist ein Maskable Icon?
Android schneidet App-Icons je nach Handy als Kreis, Squircle oder abgerundetes Quadrat zu. Ein Maskable Icon füllt das ganze Quadrat mit deiner Hintergrundfarbe und hält das Logo in den mittleren 80 %, damit nichts Wichtiges abgeschnitten wird, egal welche Form das Handy nutzt.
Tipps für ein klares Favicon
Bei 16 Pixeln gehen Details verloren. Ein kräftiger Buchstabe, ein einfaches Zeichen oder der markanteste Teil deines Logos wirkt besser als das ganze Logo mit Schrift. Ein starker Kontrast zwischen Zeichen und Hintergrund hebt es zwischen anderen Tabs hervor, im hellen wie im dunklen Browser-Design.
Icons zur Website hinzufügen
- Entpacke die Dateien und lade sie in den Ordner hoch, den du unter „Icon-Ordner“ angegeben hast, meist die oberste Ebene deiner Website.
- Füge das kopierte HTML in den Head-Bereich jeder Seite ein.
- Lade die Seite neu und leere den Browser-Cache, wenn weiter das alte Icon erscheint. Browser behalten Favicons lange.
- Beginne mit einem quadratischen Bild von mindestens 512 Pixeln Breite, damit jede Größe scharf aussieht.
Für wen
Kleine Unternehmen mit neuer Website, Freelancer, die Websites für Kunden bauen, Blogger und Studierende, die ein Projekt online stellen. Um dein Logo vorher zu skalieren oder umzuwandeln, probier den Bildkonverter.
Fragen
Wird mein Bild hochgeladen?
Nein. Die Icons werden in deinem Browser erstellt.
Welche Bildformate kann ich verwenden?
PNG, JPG, SVG und WebP.
Warum wird noch mein altes Favicon angezeigt?
Browser speichern Favicons lange im Cache. Leere den Cache oder öffne die Website in einem privaten Fenster, um es zu prüfen.