All geek questions in one place

IOS icon to add to the home screen turns black

I am not very familiar with the code for adding icons for iOS (and Android) when you select "Add to Home Screen", but I used the following based on what I read:

<link rel="apple-touch-icon-precomposed" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/57.jpg"/> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/72.jpg"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/114.jpg"/>

The code seems to work, but after I add it to my home screen, after a while the icon will disappear and I will remain with a black square instead of the icon? What's happening? Website: http://www.redtypewriter.com/ if you want to take a look and I use a custom WordPress theme.

Thanks!

+4
source share
1 answer

There are two reasons for getting black badges:

  • Using jpg images (iOS prefers PNG)
  • Use PNG with transparent areas. iOS fills transparent areas with black.

In your case, this is because your photos are in JPG format instead of PNG.

With the original photos, I noticed three questions:

  • Black icon as you described it.
  • It took me a while on my device to show the icon (for example, when added to the main screen). For the first few seconds, I saw only the default icons. This is not so unusual, but I was a little surprised.
  • When I bookmarked, my device did not use your icons, but another: "RT" icon in bookmarks

As soon as I converted them to PNG and changed the HTML code accordingly, all problems were fixed right away.

In addition, you do not define enough images . For example, your icon will not look great on the iPad Retina.

+4
source

Source: https://habr.com/ru/post/1275554/

More articles:


All Articles