Apple-Touch-Icon-Leitfaden
Wenn jemand Ihre Website zum iOS-Homescreen hinzufügt, verwendet Safari das apple-touch-icon – nicht favicon.ico. Liefern Sie ein 180×180-PNG (oder ein größeres Quadrat, das verlustfrei skaliert) aus und verlinken Sie es im <head>.
Apple wendet bei Web Clips auf modernem iOS keine Maskierung an wie bei nativen Apps – dennoch sollte Ihr Icon quadratisch sein und sichere Ränder aufweisen. Halten Sie Logos ca. 10 % vom Rand entfernt, damit abgerundete Ecken keine Grafik abschneiden.
Verwenden Sie <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Eine einzelne 180×180-Datei deckt alle aktuellen iPhones ab; optionale 152×152- und 167×167-Varianten unterstützen ältere iPad-Layouts.
So funktioniert es
- 1
180×180-PNG exportieren
Aus unserem Favicon-Generator oder einem Bild-Resizer.
- 2
In das Website-Root hochladen
/apple-touch-icon.png neben der favicon.ico ablegen.
- 3
Link-Tag ergänzen
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> im <head> einfügen.
Jetzt ausprobieren
apple-touch-icon generieren
Favicon-GeneratorFAQ
Welche Größe hat das apple-touch-icon?+
180×180 px für aktuelle iPhones. Exportieren Sie es aus einer 512×512- oder 1024×1024-Mastervorlage.
PNG oder ICO für iOS?+
Ausschließlich PNG. iOS ignoriert .ico für Homescreen-Icons.
Brauche ich trotzdem favicon.ico?+
Ja – Tabs und andere Browser verwenden weiterhin .ico. Das apple-touch-icon ist eine Ergänzung.