Antworten auf deine Fragen:
Neues Thema erstellen

Web-App-Icon

mobbytec

Aktives Mitglied

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.
Code:
<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.
 

noltehans

Aktives Mitglied

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

Aktives Mitglied

Moin,
danke für die Tipps. Aber irgendwie will es nicht werden.
Code:
        <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.
 

mobbytec

Aktives Mitglied

Auf der Domain klappt es so wie es soll. Ich habe jetzt nur
Code:
<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

Aktives Mitglied

Hast du dir einmal den Valtcon Quelltext Header angeschaut?
Das sind die Icon relevanten Einträge.
Code:
<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

Aktives Mitglied

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.
 

mobbytec

Aktives Mitglied

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

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben