CODEWITHSUNDEEP
htmlios
James
James

Reputation: 197

iOS Bookmark icon

I've been able to set it so that when I add the site to an iOS homescreen the proper icon shows. It also shows in any web browser. However, when I use iOS Safari, go to the site, book mark it to the bookmark list, a C shows for the icon. I want our icon to show just like it does for www.apple.com or
www.sunsetwx.com This is our site: www.cbcexeter.org that I'm using:

<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">

I've tried .ico and it hasn't worked.

Thanks in advance.

Upvotes: 5

Views: 10545

Answers (2)

xxtesaxx
xxtesaxx

Reputation: 6429

Thank you for your question. It made me check out my own site and I found you were right. My fav icon wasn't showing in Safari. Instead there was a default icon with the starting letter of my site.

After a quick search I found this awesome page: http://realfavicongenerator.net/

Not only you can check your existing icons, it also lets you upload your icon and test it agains various devices/systems. Then replace singe images (e. g. i have a colored png for iOS homescreen but a monochrom vector for the safari bookmark and yet another one for android).

Then just generate and download the icon pack and upload it to your server, include the generated code in the <head> of your page and you are good to go.

UPDATE

For me it looks like it is working with your site now:

enter image description here

enter image description here

Upvotes: 13

KidCoder
KidCoder

Reputation: 82

I would highly recommend using http://realfavicongenerator.net/. It automates the whole thing and generates the icons as well as copy-paste code and instructions to set it up.

Upvotes: 4

Related Questions