CODEWITHSUNDEEP
htmlcsssafari
Anthony Pinto
Anthony Pinto

Reputation: 317

How do I add a Safari icon to my website?

As seen here - https://i.sstatic.net/PH4S9.jpg

I have several websites with icons. My personal website however, is just the first letter of the website.

How do I add an icon that will appear in Safari favorites? The Favicon doesn't display here as I had originally thought.

Upvotes: 5

Views: 15303

Answers (3)

paolobasso
paolobasso

Reputation: 2018

You can put an icon to your browser (called favicon) with this in your <head>:

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

and for apple:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Read this article if you want to know more about it: https://css-tricks.com/favicon-quiz/

Remember that Icons take a long time to update so you'll need to wait a bit.

Upvotes: 5

Mechetle
Mechetle

Reputation: 58

Insert this in your head:

<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-96x96.png" sizes="96x96">

just replace the links with your fav-icon at that size, so it looks nice and not blurry

Upvotes: 0

Sebastian Knopp
Sebastian Knopp

Reputation: 1055

You need to set the apple-touch-icon like in the example below:

<link rel="apple-touch-icon" href="/custom_icon.png">

Upvotes: 0

Related Questions