Kostenlos · ohne Anmeldung
Favicon und Apple Touch Icon erstellen
Erstellen Sie aus Ihrem Logo passende Website-Icons. Wählen Sie den Ausschnitt und laden Sie alle Dateien mit fertiger HTML-Einbindung herunter. Ihr Bild bleibt auf Ihrem Gerät.
Ihr Bild als Website-Icon
Das Schachbrett zeigt transparente Flächen und wird nicht exportiert. Einfarbige Hintergründe eignen sich besonders für Apple Touch Icons.
HTML für den <head>-Bereich
Was enthält das Favicon-Paket?
Sie erhalten PNG-Favicons in 16, 32, 48 und 96 Pixeln, ein apple-touch-icon.png mit 180 Pixeln sowie Web-App-Icons mit 192 und 512 Pixeln. Die Datei favicon.ico enthält mehrere Größen. Dazu kommen ein anpassbares Manifest, der HTML-Code und eine kurze Einbauanleitung.
So binden Sie die Icons ein
- Laden Sie das ZIP herunter und entpacken Sie es.
- Legen Sie die Bilddateien und
site.webmanifestim Hauptverzeichnis Ihrer Website ab. Bei einem anderen Ordner müssen Sie die Pfade im HTML und Manifest anpassen. - Übernehmen Sie die Link-Tags in den
<head>-Bereich. Entfernen Sie widersprüchliche alte Icon-Angaben und ersetzen Sie den Website-Namen im Manifest. - Prüfen Sie die veröffentlichten Dateien mit dem Favicon Checker. Ein CMS kann eigene Icon-Einstellungen haben; nutzen Sie dann den vorgesehenen Upload-Bereich.
Was unterscheidet Favicon und Apple Touch Icon?
Browser-Favicons helfen bei der Wiedererkennung in Tabs und Lesezeichen. Das Apple Touch Icon wird für Verknüpfungen auf dem iPhone oder iPad verwendet. Die Dateien sind deshalb getrennt benannt und unterschiedlich groß. Ein Manifest mit Icons allein macht eine Website noch nicht zur installierbaren Web-App.
Für Google-Suchergebnisse muss das Favicon unter einer stabilen, crawlbaren Adresse liegen. Ein korrektes Icon garantiert keine Anzeige. Google erläutert die Favicon-Anforderungen.
Häufige Fragen
Wird mein Bild hochgeladen?
Nein. Zuschneiden, Vorschau und Dateierzeugung laufen lokal im Browser. Es findet kein Bild-Upload statt.
Kann ich einen transparenten Hintergrund behalten?
Ja. Aktivieren Sie die Transparenz. Ein bereits undurchsichtiger Hintergrund im Ausgangsbild wird dadurch aber nicht entfernt.
Warum wirkt ein kleines Logo unscharf?
Die erzeugten Dateien können keine fehlenden Bilddetails ergänzen. Verwenden Sie möglichst eine klare Ausgangsdatei mit mindestens 512 × 512 Pixeln und kontrollieren Sie die kleine Vorschau.
Seitenreport SEO Suite: Ihre Website als Ganzes prüfen
Prüfen Sie bis zu 20 URLs kostenlos. Für wiederkehrende Kontrollen und Veränderungen Ihrer Website lernen Sie die SEO Suite kennen.