Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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 60×60 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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 15 Kommentare

  1. Enol
    schrieb am 03.02.2013 um 22:50 Uhr:

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

    Antworten
  2. Yannic
    schrieb am 03.10.2011 um 12:26 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 03.10.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.

      Antworten
      • Denis
        schrieb am 16.09.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
        schrieb am 16.09.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.

  3. Apple Touch Icon (auch ohne Glanz) erstellen | kulturbanause blog
    schrieb am 19.04.2011 um 19:40 Uhr:

    […] iOS (also auf dem iPhone, iPod oder iPad) eine Website auf dem Home-Screen abspeichert. In einem früheren Beitrag habe ich bereits erklärt wie Ihr das Apple Touch Icon erstellt und welche Voraussetzungen das Icon […]

    Antworten
  4. Apple Touch Icon für das Retina Display | kulturbanause blog
    schrieb am 23.09.2010 um 17:34 Uhr:

    […] das WebClip-Icon (auch Apple Touch Icon genannt) mittlerweile zum Must-Have einer guten Website. In einem älteren Artikel habe ich erklärt was genau man machen muss und worum es sich hier überhaupt […]

    Antworten
  5. Matt
    schrieb am 01.02.2010 um 14:10 Uhr:
  6. Matt
    schrieb am 01.02.2010 um 14:08 Uhr:

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

    Antworten
  7. Matt
    schrieb am 01.02.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?

    Antworten
  8. Matt
    schrieb am 24.01.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!

    Antworten
    • Jonas
      schrieb am 25.01.2010 um 08: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.

      Antworten
  9. Kulturbanause » Websites für das iPhone erstellen und optimieren
    schrieb am 24.09.2008 um 01:18 Uhr:

    […] Internetseiten lassen sich auf dem iPhone per Favoriten-Funktion direkt auf den Home-Screen befördern. Um dort auch ein hübsches Icon zu präsentieren sollte der Webdesigner ein sog. WebClip-Icon hinterlegen. Wie das geht erkläre ich in einem früheren Artikel. […]

    Antworten
  10. DerErik
    schrieb am 26.08.2008 um 11:42 Uhr:

    Danke! Sehr hilfreich

    Antworten
  11. Claudia
    schrieb am 16.08.2008 um 10:59 Uhr:

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

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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →