Icon für eine WebApp oder für eine Website auf dem Homescreen eines Android Mobiles anlegen

Web App Icon auf dem Android Homescreen anlegen

Wenn du diesen Beitrag zum Thema Web App Icon über eine Suchmaschine findest, hast du womöglich das gleiche Problem, das ich hatte. Du möchtest ein Icon für deine WebApp auf den Homescreen von Android bringen. Wenn man weiß, wie es geht, ist es denkbar einfach. Doch weil ich selbst lange gebraucht habe, um das herauszufinden,  gebe ich hier auf Complett-Service.de eine „Bedienungsanleitung“.

Die Aufgabe teilt sich in zwei Schritte auf. Zuerst muss eine Website für das Android Mobile erstellt werden. Dabei ist es zunächst unerheblich, ob es sich um ein Smartphone oder Tablet handelt. Im zweiten Schritt kann dann diese Website per Bookmarking, mithilfe eines Icons auf dem Android Homescreen verfügbar gemacht werden.

  1. Ruf zuerst deine Website bzw. die Seite der Webanwendung auf. Oben rechts erk
    Lesezeichen Favoritenmenü

    Dreipunktemenü für das Anlegen von Lesezeichen.

    ennst du 3 senkrecht angeordnete Punkte, die das Menü repräsentieren (1). Durch Berührenöffnet sich dieses Menü, und mit einem Wischer zum nächsten Punkt im Menü auf das Sternsymbol (2) gelangst du zum Dialog „Lesezeichen bearbeiten“.

    Lesezeichen

    Diealog zum Anpassen der Lesezeichen

    Hier kannst du einen Namen für Ihre WebApp neu vergeben, die Adresse oder den Ordner ändern. Wurde das Lesezeichen schon einmal angelegt, kannst du es in diesem Dialog auch wieder entfernen. Wie oben erwähnt, wird dieser Dialog über das Sternsymbol im Untermenü aufgerufen. Wird dieses Symbol voll ausgefüllt dargestellt, so zeigt es an, dass schon ein Lesezeichen angelegt wurde. Wird das Sternsymbol nur leer dargestellt, kann es neu angelegt werden.

  2.  Durch Klicken auf den Button „Speichern“ wird das Lesezeichen mit den Vorgaben neu angelegt.
  3. Über das Dreipunkt-Menü, das beim Aufruf jeder Website zur Verfügung steht, navigierst du jetzt zu dem Punkt „Lesezeichen“ (3). Der Dialog mit dem Inhalt „Mobile Lesezeichen“ wird angezeigt. Hier findest du auch das von dir zuvor angelegte Lesezeichen direkt, oder du musst zuerst den Ordner mit Ihrem angelegten Lesezeichen wählen. Wechsel dazu in der Ordnerebene evtl. zur übergeordneten Ebene. Diese erreichst du über das Menü, das sich oben im Dialog befindet. Bei mir steht z. B. „Lesezeichen > Mobile Lesezeichen“. Klicke ich hier auf Lesezeichen, werden mir im Dialog die vorhandenen Ordner dieser Ebene angezeigt.Startbildschirm
  4. Hast du dein Bookmarking gefunden, das du auf den Homescreen dienes Android-Smartphones bringen  möchtest, berührst du den Eintrag so lange, bis sich ein Menü öffnet. Dort kannst du den Eintrag „Zum Startbildschirm hinzufügen“ auswählen. Klick auf den Menüeintrag, und das sollte es dann gewesen sein.
  5. Wähle auf deinem Android den Homescreen, so sollte nun ein Icon vorhanden sein, das deine Webapp (Website) repräsentiert und das durch Berührung aufgerufen werden kann.
    Möglicherweise wird dein Bookmarking von Chrome mit einem Standard-Icon versehen, aber dies lässt sich auch ändern. Die Änderung wird aber nicht auf dem Smartphone durchgeführt, sondern auf der Website selber bzw. auf dem Webserver, wo diese liegt.

Erstellen und Einbinden eines WebApp Icons für den Homescreen des Android Nexus 4

Du möchtest für deine Web App ein eigenes Icon erstellen, dass deine Anwendung auf dem Android Homescreen repräsentiert? Die Voraussetzungen dafür musst du in diesem Fall auf dem Webserver schaffen, der die WebApp bereithält.  Das bedeutet, dass dein Icon auf dem Webserver liegt und dort in die Startseite deiner Anwendung eingebaut wurde. Dies geschieht über ein „link-Tag“:

<link rel=“apple-touch-icon-precomposed“ href=“apple-touch-icon-precomposed.png“ />

Obwohl hier das Wort “apple” vorkommt, gilt diese Vorgehensweise nicht nur für iPhones und iPads, sondern auch für Android-basierte Geräte. Zumindest ist der Chrome Browser von Google anhand dieses Links in der Lage, dieses Icon für den Homescreen des Android-Smartphones bereitzustellen. Der Zusatz “precomposed” verhindert, dass das Icon ohne Glanzeffekt oder abgerundete Ecken dargestellt wird, zumindest bei Apple.

Meta-Tags für die Web App

Zusätzlich und zu weiteren Vorbereitung deiner Webapp trage nun zum „Link-Tag“ noch die drei folgenden Meta-Tags in den Headbereich der Web App ein:

<meta name=“viewport“ content=“initial-scale=1.0, user-scalable=no“>

<meta name=“apple-mobile-web-app-capable“ content=“yes“>

<meta name=“apple-mobile-web-app-status-bar-style“ content=“black“>

In der ersten Codezeile wird die initiale Skalierung   auf 1 gesetzt, d. h. die Seite wird 1:1 dargestellt und sie kann nicht skaliert werden.

Mit den beiden nächsten Codezeilen aktivierst du den Full Screen Mode für die Web App und blendest Tabs, Adresszeile und Statusbar aus. Die Web App sieht damit einer nativen App schon sehr ähnlich. Dies genügt, um ein rudimentäres Grundgerüst für die Web App bereitzustellen, die auch mit einem eigenen Icon auf dem Homescreen deines Android Smartphones eingebunden werden kann.
Jetzt muss nur noch das apple-touch-icon-precomposed.png erstellt werden und anschließend im Rootverzeichnis des Webservers abgelegt werden. In Abhängigkeit von der Displayart des Smartphones wird mit Icon-Größen von 72 bzw. 144 (Retina) Pixeln gearbeitet.

 

Schreibe einen Kommentar

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