7. Ein Icon für den Homescreen (Web Clip Icon)

Von einer App erwartet man, dass Sie mit einem individuellen Icon vom Home Screen aus gestartet werden kann. Auch unsere HTML5 Web App soll da nicht nachstehen.

Das Icon kann einfach verlinkt werden, wenn man die richtige Relation angibt:


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

Das Icon sollte in der Größe von 57×57 Pixeln vorliegen und wird automatisch mit den abgerundeten Ecken und dem Glanzeffekt dargestellt. Wenn dies nicht gewünscht wird, kann durch das Hinzufügen von „precomposed“ in der Linkrelation die automatische Darstellungsanpassung unterdrückt werden.


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

Durch die explizite Einbindung des Icons ist es auch möglich, verschiedene Icons für verschiedene Teile der Website anzulegen.

Startup Grafik für die Web App

Guter Stil ist auch, eine Startup Grafik zu verwenden, die angezeigt wird, während die App lädt. Insbesondere bei komplexeren Seiten, die ein Sekündchen zum Laden brauchen, wirkt das professioneller. Auch sinkt durch den Einsatz der Ladegrafik die Frustration über die Ladedauer und das subjektive Zeitempfinden der Ladedauer sinkt. Die Anzeige der Startup Grafik steuert man mit diesem Code:


    <link rel="apple-touch-startup-image" href="startupimagename.png" >

Dieser Beitrag wurde unter Apps programmieren abgelegt und mit , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

6 Antworten auf 7. Ein Icon für den Homescreen (Web Clip Icon)

  1. Andreas sagt:

    Hallo,
    wie kann ich das bewerkstelligen, dass wenn ich die Seite am iPhone minimiere, dass das Symbol in der Taskleiste angezeigt wird (iOS 5.1). Wenn ich es so eingestellt habe wie hier geschrieben, kann ich die Seite nur über diesen Button öffnen. Leider sind dann auch alle Session Infos weg.

    Gruß
    Andreas

    • admin sagt:

      Hallo Andreas,

      Das ist eins der Dinge, die nur mit nativen Apps funktioniert. Solange es eine reine Webapp ist läuft das ganze ja einfach im Browser.

      Viel Erfolg beim App Programmieren

      Daniel

  2. Ein Gast sagt:

    Und noch eine Frage: wie kann ich am besten eine solche Webapp mit WordPress erstellen? Ich würde gerne JQtouch nehmen, aber wie soll das mit WordPress gehen?

    • admin sagt:

      WordPress hat mit der Programmierung von WebApps eigentlich nichts zu tun, sondern versteht sich ja als Blog-Software bzw. CMS.
      Es gibt allerdings Plugins, mit denen man den Inhalt eines WordPress Blogs für mobile Seiten optimiert ausgeben kann, wenn du das meinst. Hier auf selfhtml5 verwenden wir dafür WPtouch.

  3. Ma27 sagt:

    Hallo,
    nun habe ich endlich einen Weg gefunden, dank diesem Tutorial, ein Icon für den Homescreen hinzuzufügen.
    Eins möchte ich aber anwerken:
    <link rel="apple-touch-icon-precomposed" href="iconname.png" >
    Dies bewerkstelligt nur, dass auch Android, BlackBerry etc. ein Homescreen Icon bekommen, dafür bei Apple ohne glanzeffekt.
    Bei <link rel="apple-touch-icon" href="iconname.png" > wird es zwar bei Apple cool angezeigt, bei Android etc. wird dann aber gar nichts angezeigt.

  4. David sagt:

    Danke! Sehr guter Effekt, wenn das eine saubere Grafik ist. Ich habe zuerst eine mit 57×57 hochgeladen, die sah dann verpixelt aus, jetzt nehme ich eine mit 200×200.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *