Ein PNG-, JPG- oder SVG-Logo in eine echte favicon.ico mit 16, 32 und 48 px umwandeln, dazu PNG-, Apple-Touch- und Android-Icons. Mindestens 512 × 512 px oder ein SVG als Ausgangsbild verwenden, damit auch die großen Icons scharf bleiben.
Anleitung
- Ein oder zwei Buchstaben oder ein Emoji eingeben – oder zu Bild wechseln und dein Logo ablegen (SVG wird am schärfsten).
- Hintergrund, Textfarbe, Form und Abstand wählen. Die Vorschau aktualisiert sich dabei.
- Alles als ZIP laden oder eine einzelne Datei antippen.
- Den HTML-Code in den <head> deiner Seite kopieren und die Dateien ins Hauptverzeichnis der Website legen.
- favicon.ico enthält 16-, 32- und 48-px-Icons als PNG für jeden Browser; favicon.svg bleibt in jeder Größe scharf.
- apple-touch-icon.png ist quadratisch und deckend, weil iOS die Ecken selbst abrundet.
- Das Maskable-Icon hält dein Logo in der sicheren Zone, damit Android es in jede Form zuschneiden kann.
- Alles entsteht in deinem Browser; dein Bild wird nie hochgeladen.
Was ein aktueller Favicon-Satz enthält
favicon.ico enthält Bilder mit 16, 32 und 48 px und wird von vielen Browsern und Tools weiterhin im Stammverzeichnis gesucht. favicon.svg bleibt in jeder Größe scharf und wird von aktuellen Browsern genutzt. apple-touch-icon.png (180 × 180) erscheint, wenn jemand die Seite auf den iPhone-Home-Bildschirm legt. android-chrome-192x192 und 512x512 sowie ein Maskable-Icon mit 512 px stehen in site.webmanifest für Android und installierbare Web-Apps.
Der HTML-Schnipsel verknüpft alle Dateien: einfach in den Head kopieren und die Dateien ins Stammverzeichnis hochladen.
Ein Icon, das bei 16 px funktioniert
Im Browser-Tab ist ein Favicon nur 16 × 16 Pixel groß. Ein, zwei kräftige Buchstaben, ein schlichtes Symbol oder die Bildmarke deines Logos wirken viel besser als ein komplettes Logo mit Schrift. Starker Kontrast zwischen Hintergrund und Motiv hilft im hellen wie im dunklen Theme. Vor dem Download die Tab-Vorschau im hellen und dunklen Design prüfen.
Apple- und Maskable-Icons
iOS rundet die Ecken selbst ab und kommt mit Transparenz schlecht zurecht, deshalb ist das Apple-Touch-Icon quadratisch und deckend. Android kann Maskable-Icons als Kreis oder andere Form zuschneiden; der Generator hält dein Motiv in der Schutzzone, damit nichts Wichtiges abgeschnitten wird.
Häufige Fragen
Welche Größe sollte ein Favicon haben?
Am besten mehrere: 16, 32 und 48 px in favicon.ico, ein SVG für jede Größe, 180 × 180 für Apple-Geräte sowie 192 und 512 px für Android. Dieser Generator erstellt alle auf einmal.
Brauche ich favicon.ico noch?
Ja. Einige Browser, Feedreader und andere Tools suchen weiterhin /favicon.ico im Stammverzeichnis. Liegt es dort, gibt es keine fehlenden Icons und keine 404-Anfragen.
Wie binde ich das Favicon in meine Website ein?
Die Dateien aus dem ZIP ins Stammverzeichnis der Website hochladen und den HTML-Schnipsel in den Head jeder Seite einfügen. Danach mit geleertem Cache neu laden.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons lange im Cache. Die Icon-URL direkt öffnen, hart neu laden oder in einem privaten Fenster testen. Suchergebnisse zeigen das neue Icon oft erst nach einiger Zeit.
Kann ich ein Emoji als Favicon verwenden?
Ja. Emoji eingeben, Hintergrund und Form wählen, das Icon wird daraus gezeichnet. Emojis sehen je nach Betriebssystem etwas anders aus; die Dateien behalten das Aussehen des Geräts, auf dem du sie erstellt hast.
Wird mein Logo hochgeladen?
Nein. Alle Icons werden im Browser gezeichnet und zum ZIP gepackt, dein Logo bleibt auf deinem Gerät.