Apple Touch Icon vs. Favicon: Unterschiede und Einsatzgebiete erklärt
Viele Entwickler fragen sich, ob sie Apple Touch Icons zusätzlich zu normalen Favicons bereitstellen müssen.
Die kurze Antwort: Ja – beide haben unterschiedliche Einsatzgebiete.
In diesem Blogartikel erkläre ich dir die Unterschiede, wann welches Icon benötigt wird und wie du beide richtig einsetzt.
Was ist ein Favicon?
Ein Favicon ist das kleine Symbol, das in Browser-Tabs, Lesezeichen und manchmal in Suchergebnissen angezeigt wird.
Typische Merkmale:
- Standardgrößen: 16x16 px, 32x32 px, 48x48 px
- Meist als
.icooder.pnggespeichert - Primär für Browser- und Desktop-Nutzung gedacht
Wichtig: Favicons sind universell, aber sie sind nicht optimiert für mobile Homescreens.
Wenn du nur ein minimales Set an Favicons pflegen möchtest, verwende 32x32 px und 48x48 px im PNG-Format. Diese decken die meisten modernen Browser ab.
Was ist ein Apple Touch Icon?
Apple Touch Icons sind spezielle Icons, die Nutzer auf iOS-Geräten (iPhone, iPad) sehen, wenn sie eine Website zum Homescreen hinzufügen.
Sie verhalten sich ähnlich wie App-Icons und sind für eine optimale Darstellung auf mobilen Geräten gedacht.
Typische Größen:
- 120x120 px – iPhone Retina
- 152x152 px – iPad Retina
- 167x167 px – iPad Pro
- 180x180 px – iPhone Retina HD
Unterschied zum Favicon: Apple Touch Icons sind keine Tab-Symbole, sondern Homescreen-Icons, die wie eine native App aussehen.
Apple ignoriert Transparenzen und rundet die Ecken automatisch ab. Designe dein Icon also mit einem klaren Hintergrund.
Die wichtigsten Unterschiede
| Merkmal | Favicon | Apple Touch Icon | | --------------- | -------------------------- | ---------------------------------- | | Plattform | Browser (Desktop & Mobile) | iOS Geräte (Homescreen) | | Standardformate | ICO, PNG | PNG | | Größen | 16x16, 32x32, 48x48 | 120x120, 152x152, 180x180, 167x167 | | Einsatzort | Browser-Tabs, Lesezeichen | Homescreen, iOS App-ähnlich | | Transparenz | Möglich | Wird entfernt (Ecken abgerundet) |
Merke: Favicons sind fürs Web, Apple Touch Icons für die Homescreen-Erfahrung.
Wann brauchst du welches Icon?
- Nur Desktop-Nutzer? → Favicon reicht aus.
- Mobile Nutzer mit iPhones/iPads? → Apple Touch Icon ist Pflicht.
- PWAs oder Apps? → Beide einsetzen.
Am besten kombinierst du Favicons + Apple Touch Icons, um alle Geräte und Szenarien abzudecken.
Best Practices
- Lege immer mindestens ein 180x180 px Apple Touch Icon ab.
- Erstelle ein 32x32 px Favicon im PNG-Format.
- Ergänze bei Bedarf weitere Größen (16x16, 48x48, 152x152).
- Verlinke sie im
<head>deiner Seite.
Beispiel-Integration:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
Prüfe deine Icons mit echten Geräten und Tools wie Favicon-Checker, um sicherzustellen, dass alles funktioniert.
Fazit
Die Kombination aus Favicon und Apple Touch Icon sorgt dafür, dass deine Website sowohl auf Desktop als auch auf mobilen Geräten perfekt wahrgenommen wird.
Ein sauberes Set an Icons ist ein kleiner Aufwand, hat aber große Wirkung
.
Empfehlung:
- Mindestens ein Favicon (32x32 px, PNG)
- Mindestens ein Apple Touch Icon (180x180 px, PNG)
- Optional weitere Größen für ältere Geräte oder spezielle Browser
So stellst du sicher, dass deine Website überall professionell aussieht.