Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 520
Courtney Pattison Avatar asked Oct 24 '14 13:10

Courtney Pattison


1 Answers

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>
like image 161
Courtney Pattison Avatar answered Oct 08 '22 04:10

Courtney Pattison