So funktioniert es
- Wählen Sie „Text / Emoji“ und geben Sie ein bis drei Zeichen ein, oder wählen Sie „Bild“ und laden Sie Ihr Logo hoch (am besten SVG oder ein quadratisches PNG mit mindestens 512 px).
- Wählen Sie Farben und eine Form – Quadrat, Abgerundet oder Kreis.
- Prüfen Sie die Vorschau in 16, 32, 64 und 128 px; die kleinen Größen zeigen, ob das Motiv noch lesbar ist.
- Laden Sie das ZIP herunter, legen Sie die Dateien im Stammverzeichnis Ihrer Website ab und fügen Sie den HTML-Code in den head-Bereich ein.
Optionen erklärt
- favicon.ico
- Enthält Versionen in 16, 32 und 48 px für Browser, Lesezeichen und Windows-Verknüpfungen.
- apple-touch-icon.png
- 180 × 180 px mit einfarbigem Hintergrund; wird verwendet, wenn jemand Ihre Website zum Home-Bildschirm eines iPhones oder iPads hinzufügt.
- icon-192.png / icon-512.png
- Werden in site.webmanifest referenziert und für Android-Startbildschirme und installierbare Web-Apps genutzt.
- icon.svg
- Ein skalierbares Icon für moderne Browser; enthalten, wenn die Quelle Text oder eine SVG-Datei ist.
Der HTML-Code
Nachdem Sie die Dateien ins Stammverzeichnis Ihrer Website hochgeladen haben, fügen Sie dies in den head-Bereich jeder Seite ein:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Häufig gestellte Fragen
Welche Dateien brauche ich wirklich?
Eine favicon.ico im Stammverzeichnis deckt alle Browser ab. Ergänzen Sie apple-touch-icon.png für iOS sowie das Manifest mit den 192/512-Icons, wenn die Website unter Android beim Installieren oder Anheften ein ordentliches Icon zeigen soll.
Warum wirkt mein Favicon in 16 px unscharf?
Feine Details gehen bei 16 × 16 Pixeln verloren. Verwenden Sie einen kräftigen Buchstaben oder ein vereinfachtes Logozeichen statt des vollständigen Logos mit Schriftzug.
Ich habe das Favicon aktualisiert, sehe aber noch das alte.
Browser speichern Favicons sehr hartnäckig im Cache. Laden Sie die Seite hart neu oder hängen Sie einen Versionsparameter wie /favicon.ico?v=2 an die link-Tags an.
Kann ich ein Emoji als Favicon verwenden?
Ja. Emoji werden mit der Emoji-Schrift Ihres Systems gezeichnet, das Ergebnis entspricht also dem, was Sie in der Vorschau sehen.
Datenschutz
Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien und Texte werden auf Ihrem Gerät verarbeitet und nie auf unsere Server hochgeladen.