Apple Touch Icon Größe - Leitfaden (180x180)

8 min read

13. Juni 2026

Die korrekte apple-touch-icon-Größe für iPhone- und iPad-Homescreen-Verknüpfungen 2026 ist 180x180 Pixel, ausgeliefert als quadratisches PNG über link rel="apple-touch-icon" im HTML-Head. iOS nutzt dein 32x32-Tab-Favicon nicht, wenn jemand die Seite auf den Homescreen legt. Es sucht dieses dedizierte Tag und die Datei.

Dieser Leitfaden erklärt die 180x180-Anforderung, Design-Regeln die Apple automatisch anwendet, typische Template-Fehler und wie du das Icon in Produktion prüfst.

Kurzantwort: warum 180x180

Apple dokumentiert 180x180 px für moderne iOS-Geräte. Ältere Guides nennen 152x152 (iPad) oder 120x120 (Legacy-iPhone). 180x180 deckt aktuelle Phones ab und skaliert auf Tablets akzeptabel.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Tag ins serverseitig gerenderte <head> setzen. Safari liest es bei Teilen > Zum Home-Bildschirm.

Größe	Status 2026
180x180	Empfohlener Standard
152x152	Legacy iPad, nicht allein nutzen
120x120	Veraltete iPhone-Größe
32x32 Favicon	Falsches Asset für Homescreen

Alle Favicon-Dimensionen inkl. Tab und PWA: Favicon-Größen - Leitfaden.

Was iOS mit deinem apple-touch-icon macht

Beim Hinzufügen zum Homescreen lädt iOS das PNG und wendet an:

Abgerundete Ecken (nicht vorab runden)
Kein Gloss seit iOS 7 (flache Icons)
Kein Transparenz-Trick - Leinwand als opak behandeln

Fehlt das Tag, nutzt iOS Screenshots oder ein hochskaliertes Favicon. Das wirkt neben nativen Apps unprofessionell.

apple-touch-icon vs Favicon

Getrennte Systeme:

rel="icon" - Browser-Tabs, Desktop-Lesezeichen
rel="apple-touch-icon" - iOS- und iPadOS-Homescreen

Du brauchst beides. Favicon per HTML einbinden zeigt das vollständige HTML-Set.

Design für 180x180

Das Homescreen-Icon ist größer als ein Tab-Favicon, aber im Phone-Grid noch klein. Richtlinien:

Quadratische Leinwand - kein breites Logo auf Rechteck
Volle Hintergrundfarbe - Markierung auf Vollfläche
Einfache Markierung - Symbol oder Lettermark, kein vollständiges Wortlogo
Keine vorgezeichneten Ecken - iOS maskiert selbst
Keine dünnen Linien - Strich unter 2 px verschwindet

PNG exakt 180x180 exportieren. @2x-Namensgebung ist optional bei explizitem sizes="180x180".

Precomposed ist obsolet

Früher rel="apple-touch-icon-precomposed" gegen Gloss. iOS 7+ ohne Gloss. Nur standard apple-touch-icon nutzen.

Mehrere apple-touch-icon-Größen

Mehrere Größen für ältere Geräte:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Praktisch reicht 180x180 für die meisten Sites 2026. 152x152 nur bei signifikantem iPad-Homescreen-Traffic.

Safari wählt den passendsten sizes-Wert.

HTML-Platzierung und Pfade

Korrekt:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Falsch:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Relative Pfade brechen auf Unterseiten. Root-relative /-Pfade überall.

Datei im Static Root:

https://beispiel.de/apple-touch-icon.png

Manche Konventionen akzeptieren /apple-touch-icon-precomposed.png ohne Tag. Explizites HTML ist klarer und auditierbar.

Typische apple-touch-icon-Fehler

Favicon als apple-touch-icon

Beide Tags auf favicon-32x32.png erzeugen unscharfe Homescreen-Icons. Dediziertes 180x180 exportieren.

Transparentes PNG mit Inhalt am Rand

iOS schneidet Ecken. Inhalt zentrieren mit Padding.

Falsche Datei-Dimensionen

512x512 mit sizes="180x180" funktioniert, verschwendet Bandbreite. 120x120 mit sizes="180x180" wirkt weich hochskaliert.

Tags nur clientseitig

SPAs, die apple-touch-icon nach JavaScript setzen, scheitern oft beim Homescreen-Flow. Serverseitig rendern.

iPad Safari angeheftete Tabs vergessen

Angeheftete Tabs auf iPadOS nutzen je nach Version apple-touch-icon oder SVG. 180x180 hilft trotzdem.

Schritt-für-Schritt-Setup

180x180 PNG aus Brand-Master exportieren (Quelle min. 512x512).
In Site-Root oder /icons/ hochladen.
link rel="apple-touch-icon" sizes="180x180" ins Layout-<head>.
Deploy, PNG-URL direkt aufrufen - HTTP 200 bestätigen.
Favicon Check für Tag und Download.
Auf iPhone: Safari > Teilen > Zum Home-Bildschirm > Vorschau prüfen.

Testen ohne iPhone

Desktop-Safari simuliert Homescreen nicht vollständig. Trotzdem validieren:

Seitenquelltext für Tag
PNG-URL mit korrekten Dimensionen
Favicon Check listet apple-touch-icon mit Metadaten
Lighthouse oder manuelles <head>-Audit

PNG aus Favicon Check bei 100% Zoom öffnen. Scharf bei 180 px Quadrat.

Safari Web Apps und iOS 17+

Apple hat Zum Home-Bildschirm als Web-Apps mit app-ähnlicherem Verhalten ausgebaut. Die Icon-Quelle bleibt für die meisten Sites apple-touch-icon, nicht das Web App Manifest. Manifest-Icons allein fixen iOS nicht.

Installieren Nutzer eine Site als Web-App, liest iOS deine apple-touch-icon-Metadaten. Fehlende oder falsche Größe erzeugt Screenshot-Fallback. 180x180 PNG parallel zu Android-PWA-Arbeit pflegen.

Angeheftete Safari-Tabs auf iPad ziehen in manchen Konfigurationen ebenfalls apple-touch-icon. Ein scharfes 180x180 deckt mehrere iOS-Flächen besser ab als hochskalierte Tab-Favicons.

Wenn möglich auf echter Hardware testen: iPhone Safari > Teilen > Zum Home-Bildschirm. Vorschau soll Markenzeichen zeigen, keinen zugeschnittenen Seiten-Render.

Brand und Marketing abstimmen

Marketing liefert oft horizontales Logo. iOS braucht quadratisches Asset. Früh ein App-Icon-artiges Markenzeichen planen:

Zentriertes Symbol auf Markenfarbe
Kein Tagline-Text unter ~8 px Äquivalent
Gleiches Ecken-Padding wie bei nativem App-Store-Sketch

Master im Design-System neben OG-Vorlagen speichern. Favicon-Stack und Social Previews sind verwandt, aber andere Crops. Favicon-Größen - Leitfaden intern verlinken, damit Designer alle Größen in einer Session exportieren.

Nach Handoff binden Entwickler HTML ein laut Favicon per HTML einbinden. QA validiert mit Favicon Check vor Kampagnen-Launch.

Unterschiedliche iPad- und iPhone-Nutzung

152x152 taucht in älteren iPad-Dokumentationen auf. 2026 reicht 180x180 für die meisten Fälle. Teams mit viel iPad-Traffic in Analytics können optional 167x167 oder 152x152 zusätzlich pflegen - nur wenn Pixel-Perfektion auf jedem Gerät messbar Conversion bringt.

Für SaaS und Marketing-Sites ist der Aufwand selten nötig. Lieber 180x180 scharf und zentral im Safe Zone als viele halb gepflegte Größen.

Prüfe in Analytics mobile Geräteverteilung. Hoher iOS-Anteil ohne apple-touch-icon ist ein schneller Branding-Win nach Deploy.

Farbflächen und Markenkonsistenz

iOS rundet Ecken automatisch. Dein quadratisches PNG sollte den Marken-Hintergrund bis zum Rand füllen. Transparente Ecken wirken auf manchen iOS-Versionen wie fehlende Fläche.

Nutze dieselbe Primärfarbe wie in theme-color oder Header der Site. Visuelle Kontinuität zwischen Browser und Homescreen stärkt Wiedererkennung.

Nach Rebrand alle Touch-Icon-Dateien tauschen, nicht nur CSS. Favicon Check zeigt, ob noch alte PNG-URLs ausgeliefert werden.

Caching und Update-Verzögerung auf iOS

iOS cached Homescreen-Icons pro Verknüpfung. Änderst du apple-touch-icon.png auf dem Server, aktualisieren bestehende Verknüpfungen nicht automatisch. Nutzer müssen alte Verknüpfung löschen und neu anlegen.

Safari cached den Icon-Fetch beim ersten Hinzufügen. Cache-Busting im Dateinamen bei Rebrand: apple-touch-icon.v2.png mit aktualisiertem href.

Support-Teams informieren: „Icon auf iPhone aktualisiert nicht" ist oft Cache, kein kaputtes Deploy. Server-Datei zuerst mit Favicon Check prüfen, dann Nutzer zum Neu-Anlegen anleiten.

HTML-Head-Reihenfolge und mehrere Icons

Mehrere apple-touch-icon-Einträge mit unterschiedlichen sizes sind erlaubt. Safari wählt passend. Für 2026 reicht meist ein 180x180-Eintrag.

Platziere apple-touch-icon nahe anderen Icon-Tags im Head. Kein funktionales Muss, aber übersichtlicher für Code-Review und Audits.

Vermeide doppelte Tags auf dieselbe URL mit widersprüchlichen sizes-Werten. Das verwirrt Audit-Tools ohne Nutzen.

Typische Support-Anfragen zu iOS-Icons

„Homescreen-Icon ist nur Screenshot der Seite" - apple-touch-icon fehlt komplett. 180x180 PNG und Tag ergänzen, mit Favicon per HTML einbinden verifizieren.

„Icon hat weiße Ecken" - transparentes PNG auf hellem Homescreen-Hintergrund. Volle Hintergrundfarbe im quadratischen Export nutzen.

„Marketing liefert nur SVG" - für iOS nach PNG 180x180 exportieren. SVG allein reicht nicht.

„Rebrand sichtbar im Tab, nicht auf iPhone" - iOS-Shortcut-Cache. Verknüpfung löschen, neu anlegen, Server-Datei vorher mit Favicon Check prüfen.

Diese Fälle trennen iOS-Homescreen-Probleme klar von Tab-Favicon-Themen in Beste Favicon-Größe für Browser-Tabs.

Launch-Checkliste für iOS-Homescreen

Vor Go-Live diese Punkte abhaken:

apple-touch-icon.png existiert unter stabiler Root-URL
Datei ist exakt 180x180 px, quadratisch, opaker Hintergrund
link rel="apple-touch-icon" sizes="180x180" steht im serverseitigen Head
Kein veraltetes 120x120 oder precomposed-Tag konkurriert
Favicon Check zeigt erfolgreichen Fetch und Download
Optional: echter iPhone-Test mit Teilen > Zum Home-Bildschirm

Parallel prüfen, ob Android-Manifest-Icons für PWA-Nutzer gesetzt sind - siehe PWA-Icon-Größen. iOS und Android teilen sich nicht dieselbe Datei.

Warum 180x180 nicht mit Tab-Favicon getauscht werden sollte

Tab-Favicons sind für 16-32 px optimiert. Hochskalieren erzeugt weiche Kanten. Runterskalieren eines horizontalen Logos auf 180 px wirkt oft leer oder unleserlich.

Investiere einmalig in ein quadratisches App-Icon-artiges Asset. Nutze es für apple-touch-icon und optional als Basis für PWA maskable Icons nach leichtem Padding.

Design-Review: Icon neben echten iOS-App-Icons auf dem Homescreen vergleichen. Gleiche visuelle Gewichtung anstreben.

Favicon Check zeigt neben apple-touch-icon auch Tab- und Manifest-Icons - ideal, um Austausch-Fehler zwischen Größen sofort zu sehen.

Wenn du nur eine Sache aus diesem Artikel mitnimmst: 180x180 ist die iOS-Homescreen-Größe, kein optionaler Bonus neben dem Tab-Favicon. Beide Dateien parallel pflegen, beide in QA prüfen.

Bezug zu PWA und Android

iOS liest für klassische Homescreen-Lesezeichen nicht wie Android Web App Manifest Icons. Manifest-Icons trotzdem für plattformübergreifende PWAs:

180x180 apple-touch-icon - iOS Homescreen (dieser Artikel)
192x192 / 512x512 - Android-Manifest (PWA-Icon-Größen)

Beide Plattformen im selben Deploy. Favicon Check scannt HTML und Manifest zusammen.

FAQ

Welche Größe soll apple-touch-icon haben?

180x180 Pixel PNG für modernes iOS. Quadratisches Seitenverhältnis.

Kann ich SVG für apple-touch-icon nutzen?

Safari unterstützt kein SVG für apple-touch-icon. PNG nutzen.

Braucht apple-touch-icon ein sizes-Attribut?

Empfohlen. sizes="180x180" hilft bei mehreren Icons.

Was passiert ohne apple-touch-icon?

iOS nutzt skaliertes Favicon oder Screenshot. Generisch oder unscharf.

Padding für abgerundete Ecken?

Ja. Wichtiger Inhalt im inneren ~80%-Kreis. Keine eigenen abgerundeten Ecken zeichnen.

Nutzt macOS Safari apple-touch-icon?

macOS-Tabs nutzen Standard-Favicons. apple-touch-icon betrifft primär iOS-Homescreen.

Ein PNG für Favicon und apple-touch-icon?

Technisch möglich mit großer Datei. Besser: separate 32x32- und 180x180-Exporte.

Wie prüfe ich apple-touch-icon live?

Favicon Check. URL eingeben, 180x180-Eintrag mit erfolgreichem Fetch bestätigen.

Fazit

iOS-Homescreen-Icons brauchen 180x180 PNG und link rel="apple-touch-icon" im serverseitigen HTML. Quadratische opake Leinwand, root-relative Pfade, Validierung mit Favicon Check. Tab-Favicons und apple-touch-icons sind verwandt, aber nicht austauschbar.