iOS Lesezeichen Symbol

Question

Ich konnte es so einstellen, dass, wenn ich die Seite zu einem iOS-Homescreen die richtige Ikone zeigt. Es zeigt sich auch in jedem Webbrowser. Wenn ich jedoch iOS Safari verwende, gehe auf die Seite, buche es in die Lesezeichenliste, ein C zeigt für das Icon. Ich möchte unser Symbol nur um zu zeigen, wie es funktioniert für www.apple.com oder
www.sunsetwx.com Dies ist unsere Website: www.cbcexeter.org, die ich verwende:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=kPgOnJYLYR"> 
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=kPgOnJYLYR"> 
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=kPgOnJYLYR"> 
<link rel="manifest" href="/manifest.json?v=kPgOnJYLYR"> 
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=kPgOnJYLYR" color="#bd4c4c"> 
<link rel="shortcut icon" type="image/png" href="/favicon.png?v=kFginJYoYs"> 
<meta name="theme-color" content="#ffffff"> 

Ich habe versucht, ICO und es hat nicht funktioniert.

Vielen Dank im Voraus.

Answer 1

Vielen Dank für Ihre Frage. Es hat mich dazu gebracht, meine eigene Seite zu sehen und ich habe festgestellt, dass du recht hast. Mein Favoritensymbol wurde in Safari nicht angezeigt. Stattdessen gab es ein Standardsymbol mit dem Anfangsbuchstaben meiner Site.

Nach kurzer Suche fand ich diese tolle Seite: http://realfavicongenerator.net/

Nicht nur Sie können Ihre vorhandenen Symbole überprüfen, können Sie damit auch Ihr Symbol laden und testen verschiedene Geräte/Systeme agains. Ersetzen Sie dann einzelne Bilder (z. B. ich habe ein farbiges Png für den iOS-Homescreen, aber einen Monochrom-Vektor für das Safari-Lesezeichen und noch einen für Android).

Dann einfach generieren und laden Sie das Icon Pack und laden Sie es auf Ihren Server, enthalten den generierten Code in Ihrer Seite und Sie sind gut zu gehen.

UPDATE

Für mich sieht es aus wie es jetzt mit Ihrer Website funktioniert:

Answer 2

ich sehr http://realfavicongenerator.net/ Verwendung empfehlen würde. Es automatisiert das Ganze und erzeugt die Icons sowie Copy-Paste-Code und Anweisungen, um es einzurichten.