CODEWITHSUNDEEP
iosfavicon
LB79
LB79

Reputation: 1285

Website shortcut favicon on iOS

Ive noticed with website favicons that have transparent backgrounds, when a shortcut is made on iOS and the favicon becomes the shortcut image, the background turns black. So if the favicon is a black logo on a transparent background, it looks a bit strange.

Does anyone know the reason this happens?

Thanks

Upvotes: 1

Views: 1825

Answers (3)

philippe_b
philippe_b

Reputation: 41418

This is a known behavior of iOS. Although this is not documented anywhere, this is probably to enforce iOS UI guidelines, where all home screen icons are squares with rounded corners.

Oh, and you are not the only one trying to use transparency on iOS. Check StackOverflow's Touch icon and add it to your home screen!

Note: I'm the author of the article mentioned above.

Upvotes: 1

Inder Kumar Rathore
Inder Kumar Rathore

Reputation: 40018

The home screen icons doesn't support transparency. And why are you using favicon? You should use below in the head tag.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

As described in the answer: https://stackoverflow.com/a/21144916/468724

Upvotes: 0

dijipiji
dijipiji

Reputation: 3099

iOS doesn't allow home screen icons to have transparent backgrounds

Upvotes: 1

Related Questions