1

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

LB79
  • 1,285
  • 2
  • 12
  • 20

3 Answers3

1

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

dijipiji
  • 3,063
  • 1
  • 26
  • 21
1

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.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
0

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

Community
  • 1
  • 1
Inder Kumar Rathore
  • 39,458
  • 17
  • 135
  • 184
  • Thanks for the reply. The favicon is coming automatically from a Wordpress site. I'll look into your suggestion more. – LB79 May 09 '17 at 11:10