Homepagelogo (Touch-Icon) auf dem Android HomeScreen

Nein, das ist nicht des Rätsels Lösung...
Ich möchte, dass mein Logo (Blaues Haus (siehe oben)) nicht so klein und auf diesem Blatt dargestellt wird sondern genau so wie das Logo von Golem.de

Das Favicon ist nur die kleine Grafik, die in einem PC-Browser in der URL-Leiste angezeigt wird. Das Bild war ursprünglich 16x16 Pixel groß und damit natürlich zu klein für die Anzeige auf dem Smartphone-Bildschirm.

Apple verlangt neben dem Favicon zur Anzeige im Safari-Browser also spezielle Bildchen, die dann beim Anzeigen gezeigt werden - und auch wenn das Apple-Bilder sind, zeigt Android sie dir dann an (probiere es einmal mit der www.computerhilfen.de Seite aus!)


Die Bilder heissen müssen so heissen:

• apple-touch-icon-120x120-precomposed.png
• apple-touch-icon-120x120.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Die ersten beiden sind jeweils 120x120 Pixel groß, die zweiten beiden 129x129 Pixel - es soll aber auch mit 72x72 Pixeln funktionieren. Alle müssen im Hauptverzeichnis der Webseite liegen und am besten noch in den Meta-Tags der Webseite definiert werden:

Hallo,
danke für die Antwort, aber es funktioniert immer noch nicht 

Das Icon von Computerhilfen wird aber auch nicht komplett angezeigt...

Tatsächlich, das ist nur das "normale" Favicon. Auf dem iPhone klappt das, ich hatte nur gelesen, dass es so auch mit Android gehen sollte - Muss ich doch selber prüfen! Melde mich nachher wenn ich mehr weiß!

Hallo,
habe jetzt selber einen Code gefunden:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

Hallo Dome, funktioniert das bei dir?

Bei mir haben nämlich weder die Apple-Touch-Icons noch dies geholfen:

<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">


Ich habe stattdessen zum Testen aus dem "normalen" 16x16 Pixel Favicon jetzt eine Datei erstellt, die sowohl die 16x16 als auch die 32x32 und 48x48 Pixel Version enthält. Dies hat Android dann letztendlich auch als Favicon genommen, die ganzen "Apple Touch" Bilder nicht.