kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

WebClip Icon für das iPhone erstellen

Kleine Icons zur bildhaften Kennzeichnung von Internetseiten haben sich in den letzten Jahren großer Beliebtheit erfreut. Das Favicon als Markierung von Lesezeichen oder der Browser-URL kennt wohl mittlerweile jeder. Doch was genau ist ein WebClip Icon? Die Lösung ist ganz einfach. Das Favicon im iPhone und iPod Touch!

Damit das iPhone anstelle eines automatisch generierten Icons ein schönes, vom Webseitenbetreiber erstelltes, Icon anzeigt muss nicht viel getan werden. Im Folgenden erkläre ich in aller Kürze was getan werden muss.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Wo erscheint das Icon denn überhaupt?

Das WebClip Icon wird erst dann sichtbar, wenn ein iPhone oder iPod Touch Benutzer sich dazu entscheidet eine Website nicht in den Favoriten von Safari zu verwalten sondern ihr einen ehrenvollen Platz auf dem Home Bildschirm zuzuweisen.
Sofern kein WebClip Icon vorhanden ist, erstellt das iPhone automatisch ein passendes. Dieses zeigt jedoch nur eine stark verkleinerte Ansicht der gesamten Website. Ich für meinen Teil wollte solch ein hässliches Icon nicht auf dem Home Bildschirm platzieren, also muss ein WebClip Icon her.

WebClip Icon erstellen

Erstellt eine neue Datei mit den Abmessungen 60x60 Pixel und gestaltet Euer Icon. Beachtet hierbei bitte, dass die gesamte Arbeitsfläche zum Icon generiert wird.
Der große Vorteil liegt darin, dass Ihr weder die abgerundeten Ecken einbringen, noch die Spiegelungen hinzufügen müsst. Dies geschieht alles im iPhone selbst.
Die fertige Grafik speichert Ihr nun unter dem Dateinamen "apple-touch-icon.png" in den Root Eurer Seite ab. (Hinweis: Bei WordPress muss das Icon in der selben Hierarchieebene liegen in der sich auch die wp-config.php-Datei befindet.)
Das wars. Ihr benötigt im Gegensatz zum Favicon keine Codeschnipsel im Seitenhead oder ähnliches. einfach nur das Icon erstellen, hochladen fertig.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

15 Kommentare

  1. Claudia

    Verfasst am 16. August 2008 um 10:59 Uhr.

    Iphone??? Ich les immer nur Iphone????? :-))

    Noch knapp 3 Wochen, dann kann ich mir Dein Icon „richtig“ anschauen :-)

  2. DerErik

    Verfasst am 26. August 2008 um 11:42 Uhr.

    Danke! Sehr hilfreich

  3. Matt

    Verfasst am 24. Januar 2010 um 18:32 Uhr.

    Ich habe mehrere Websites, für die ich gerne jeweils eigene Icons verwenden würde. Gibt es auch eine Lösung dafür? Vorab vielen Dank!

    • Jonas

      Verfasst am 25. Januar 2010 um 8:06 Uhr.

      @Matt: Ich verstehe das Problem nicht ganz. Du kannst doch auch für mehrere Websites ein solches Icon erstellen und jeweils im Root ablegen.

  4. Matt

    Verfasst am 1. Februar 2010 um 13:15 Uhr.

    @Jonas, vielen Dank für Deine Rückmeldung. Ich habe es noch einmal bei meinem Hoster ausprobiert, bei dem ich in diversen Unterordnern iPhone Websites liegen habe und die über eigene Domains angesprochen werden können.
    Bei diesen Websites habe ich im Header die Zeile einfügt.
    Die Grafik wird aber nur dann als Icon herangezogen, wenn es im Ordern „html“ liegt … sonst funktioniert es nicht! Die Websites selbst liegen aber etwa 4-5 Unterordner weiter.
    Hast Du noch eine Idee?

  5. Matt

    Verfasst am 1. Februar 2010 um 14:08 Uhr.

    @Jonas, hat sich erledigt – über kann man es lösen – aber vielen Dank!

  6. Matt

    Verfasst am 1. Februar 2010 um 14:10 Uhr.

    hier bin ich fündig geworden -> http://www.apfelquak.de/2008/01/17/homescreen-icon-fuer-web-snippets-erstellen,/

  7. Yannic

    Verfasst am 3. Oktober 2011 um 12:26 Uhr.

    Kann man denn auch selbst den Titel für das Icon festlegen?

    • Jonas Hellwig

      Verfasst am 3. Oktober 2011 um 14:30 Uhr.

      @Yannic: Meinst du die Beschriftung die unter dem Icon auf dem iPhone erscheint? Dafür nimmt iOS den Seitentitel. Der Benutzer kann die Beschriftung aber anpassen wenn die Seite auf den Home-Screen gespeichert wird.

      • Denis

        Verfasst am 16. September 2012 um 10:48 Uhr.

        Da mein Seitentitel aber zu groß ist möchte ich einen Seitentitel einbinden der nur benutzt werden soll beim Webclip anlegen. Geht das ?

      • Jonas Hellwig

        Verfasst am 16. September 2012 um 11:32 Uhr.

        Hallo Denis. Ich fürchte das geht nicht, zumindest ist mir die Funktion nicht bekannt. Der User kann den Titel ja selbst umbenennen wenn er die Seite auf den Home-Screen speichert.

  8. Enol

    Verfasst am 3. Februar 2013 um 22:50 Uhr.

    Das tönt alles super. Vielen Dank!
    Aber wie kann ich das Icon im Blogger / Blogspot einfügen?

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.