Web-App-Icon

[mobbytec]

Hallo,
ich wollte für eine Website ein Web-App-Icon für den Homescreen. Dazu habe ich diese Anleitung genutzt.
Ich also im header z.b.

<link rel="apple-touch-icon" href="_icons/apple-touch-icon-57x57.png" sizes="57x57">

Trotzdem wird das App-Icon beim Abspeichern der Webseite auf dem Homescreen nicht angezeigt.
Welche Ursachen könnte das haben.

 

[lachender_engel]

Weil das Icon nicht gefunden wird. Du musst den href absolut angeben.

 

[mobbytec]

Auch absolut ändert nichts daran.

 

[noltehans]

Mach mal einen Schrägstrich vor "_icons" rein.

 

[mobbytec]

Moin,
habe ich auch getestet. Ich habe das auch für Android angelegt und da geht es.

 

[noltehans]

Pack die Icons mal direkt in den Root-Folder und nicht in den _icons-Ordner.
Nicht vergessen den BrowserCache auf deinem Smartphone zu löschen.

 

[mobbytec]

Moin,
danke für die Tipps. Aber irgendwie will es nicht werden.

        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link rel="icon" type="image/gif" href="favicon.gif">
        <link rel="icon" type="image/png" href="favicon.png">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" sizes="57x57">
        <link rel="apple-touch-icon" href="apple-touch-icon-60x60.png" sizes="60x60">
        <link rel="apple-touch-icon" href="apple-touch-icon-72x72.png" sizes="72x72">
        <link rel="apple-touch-icon" href="apple-touch-icon-76x76.png" sizes="76x76">
        <link rel="apple-touch-icon" href="apple-touch-icon-114x114.png" sizes="114x114">
        <link rel="apple-touch-icon" href="apple-touch-icon-120x120.png" sizes="120x120">
        <link rel="apple-touch-icon" href="apple-touch-icon-128x128.png" sizes="128x128">
        <link rel="apple-touch-icon" href="apple-touch-icon-144x144.png" sizes="144x144">
        <link rel="apple-touch-icon" href="apple-touch-icon-152x152.png" sizes="152x152">
        <link rel="apple-touch-icon" href="apple-touch-icon-180x180.png" sizes="180x180">
        <link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png">
        <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
        <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
        <link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
        <link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196">
        <meta name="msapplication-TileImage" content="win8-tile-144x144.png">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-navbutton-color" content="#ffffff">
        <meta name="msapplication-square70x70logo" content="win8-tile-70x70.png">
        <meta name="msapplication-square144x144logo" content="win8-tile-144x144.png">
        <meta name="msapplication-square150x150logo" content="win8-tile-150x150.png">
        <meta name="msapplication-wide310x150logo" content="win8-tile-310x150.png">
        <meta name="msapplication-square310x310logo" content="win8-tile-310x310.png">
        <link rel="manifest" href="manifest.json" />

So sieht der Code aus, die Grafiken liegen im Root.

 

[noltehans]

Ruf mal mit deinem iPhone diese Seite auf.
https://www.valtcon.de/

Die sollte funktionieren.
Das Touch-Icon habe ich so eingebaut.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

 

[mobbytec]

Auf der Domain klappt es so wie es soll. Ich habe jetzt nur

<meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width">
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

drin, aber immer noch nix.

 

[noltehans]

Hast du dir einmal den Valtcon Quelltext Header angeschaut?
Das sind die Icon relevanten Einträge.

<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0e2041">
<meta name="theme-color" content="#0E2041">

Falls das auch nicht funktioniert, zieh dir das Valtcon Touch-Icon runter und bau es zum testen bei dir ein.
https://www.valtcon.de/apple-touch-icon.png

Vielleicht zickt IOS (oder Safari) mit dem Bildformat rum.

 

[mobbytec]

Also wenn ich die Seite Valtcon aufrufe, wird das Icon angezeigt. Habe nun eine ganz leere Seite erstellt, den Code und png von Valtcon genommen, aber das touch-icon wird nicht angezeigt. Alles sehr eigenartig.

 

[noltehans]

Ein Link zu deiner Seite wäre ganz hilfreich.

 

[mobbytec]

Ja, ich weiß. Ist aber z.Zt. nicht möglich.
Habe jetzt aber den "Fehler" gefunden. Die .htaccess mit einem Verzeichnisschutz stört. Ist dieser raus, klappt es auch mit dem icon.
Danke für die Hilfe/Geduld.

 

[noltehans]

Schön, dass es jetzt funktioniert.

Die .htaccess ist mir auch durch den Kopf gegangen, hatte den Gedanken aber gleich wieder fallenlassen, da es ja unter Android funktioniert.