CODEWITHSUNDEEP
htmlsafarifavicon
Courtney Pattison
Courtney Pattison

Reputation: 1606

How do I add a bookmark icon in HTML5 for Safari 8.0?

Below is a minimal example of the code that I am using for my website's favicon. It is showing up as a favicon in Safari 8.0's address bar, but it is not showing up in the favorites dropdown box that appears when you click on the address bar when it is added as a bookmark. Instead, the default compass icon appears. What do I need to add to or change in my HTML5 to make my icon show in the dropdown box?

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
</head>
<body>
</body>
</html>

Upvotes: 6

Views: 7964

Answers (3)

Aqua
Aqua

Reputation: 1

seems that when the link is placed outside of the < head > section, that the icon will show up for bookmarks, but will not work for home screen.

-hope this helps someone else

Upvotes: 0

rb03824
rb03824

Reputation: 129

Try a larger icon size (e.g., 144x144 px).

Upvotes: 0

Courtney Pattison
Courtney Pattison

Reputation: 1606

I figured out how to add a icon to the favourites dropdown box in Safari 8.0 by looking at other websites where the icon is showing up. I'm not sure why it works, but it works for me and the other websites that I looked at. Make sure to specify that the icon is a shortcut icon, the type is image/x-icon and the file is an ICO.

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
</body>
</html>

Upvotes: 2

Related Questions