Kostenlos & ohne Anmeldung

Apple-Touch-Icon erstellen –
180 Pixel für den Startbildschirm

Legt sich jemand deine Website aufs iPhone, ist das apple-touch-icon die App-Kachel. Es misst 180 × 180 Pixel, bekommt seine runden Ecken von iOS selbst – und darf keinen durchsichtigen Hintergrund haben. Genau das nimmt dir das Werkzeug oben ab.

iPhone & iPad Grund automatisch deckend Android gleich mit
Bild hierher ziehen oder klicken · PNG, JPG, WebP – oder SVG
am besten quadratisch, mindestens 512 px
Noch nichts geladen.
Die Dateien kommen einzeln nacheinander – der Browser blockt sonst ab der zweiten.

Sobald du ein Bild lädst, erscheinen hier alle Größen.

Warum das Symbol auf dem iPhone
plötzlich schwarz ist

Der mit Abstand häufigste Fehler – und er fällt erst auf, wenn das Symbol schon auf dem Startbildschirm liegt.

iOS füllt Transparenz

Ein PNG mit durchsichtigem Hintergrund sieht am Rechner gut aus. iOS legt beim Startbildschirm-Symbol aber Schwarz darunter – aus dem luftigen Logo wird ein schwarzer Klotz.

Keine runden Ecken malen

Die Abrundung macht iOS selbst. Wer sie ins Bild zeichnet, bekommt sie doppelt: einen hellen Rand um die abgerundete Ecke. Das Symbol gehört als volles Quadrat angeliefert.

Zu wenig Luft am Rand

Anders als beim Browser-Tab wirkt ein randloses Motiv hier gedrängt. Etwa 10 % Abstand ringsum lässt die Kachel ruhiger aussehen – der Regler oben stellt das ein.

Eine Größe reicht –
wenn es die richtige ist

  • 180 × 180 Pixel genügt. Früher lieferte man ein halbes Dutzend Größen aus (57, 72, 114, 144 …). Seit iOS 8 rechnet das System kleinere Varianten selbst herunter. Ein sauberes 180er ist heute der ganze Aufwand.
  • Eine Zeile im Seitenkopf. <link rel="apple-touch-icon" href="/apple-touch-icon.png"> – mehr braucht es nicht. Liegt die Datei zusätzlich unter diesem Namen im Wurzelverzeichnis, findet iOS sie sogar ohne den Verweis.
  • Android geht andere Wege. Dort zählen 192 und 512 Pixel aus der site.webmanifest – und zwei maskable-Varianten, weil Android die Kachel je nach Hersteller zu Kreis oder Squircle beschneidet. Das Werkzeug oben erzeugt beides gleich mit.
  • Der Name in der Kachel. Unter dem Symbol steht der Seitentitel – oft zu lang. Mit <meta name="apple-mobile-web-app-title" content="Kurzname"> legst du fest, was dort erscheint.
Support

Häufig gestellte Fragen

Was zum iOS-Symbol am häufigsten gefragt wird.

180 × 180 Pixel. Das ist die Größe für aktuelle iPhones mit dreifacher Auflösung; alles Kleinere rechnet iOS selbst herunter. Die vielen alten Größen (57, 72, 114, 144) braucht seit iOS 8 niemand mehr auszuliefern.
Weil das Bild einen durchsichtigen Hintergrund hat. iOS füllt Transparenz beim Startbildschirm-Symbol schwarz. Der Generator oben gibt dem 180er deshalb <strong>immer</strong> einen deckenden Grund – auch wenn du „durchsichtig" wählst.
Nein, im Gegenteil. iOS rundet die Kachel selbst ab. Zeichnest du die Rundung ins Bild, entsteht ein heller Saum um die Ecken. Liefere ein volles Quadrat.
Am besten als <code>/apple-touch-icon.png</code> im Wurzelverzeichnis und zusätzlich per <code>&lt;link rel="apple-touch-icon"&gt;</code> im Seitenkopf verlinkt. iOS sucht die Datei notfalls auch ohne Verweis an diesem Standardpfad.
Nein. Android nimmt die Symbole aus der <code>site.webmanifest</code> – 192 und 512 Pixel, dazu maskable Varianten mit mehr Rand, weil das System die Kachel zu Kreis oder Squircle beschneidet. Der Generator erzeugt diesen Satz mit.
Du brauchst den ganzen Satz? Der Favicon-Generator erzeugt zusätzlich die Tab-Symbole und die favicon.ico.
Alle Größen