iOS icon for Add to Home Screen turns black

。_饼干妹妹 提交于 2019-12-10 14:16:56

问题


I'm not terribly familiar with the code to add 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 some time, the icon disappears and I'm left with a black square in place of the icon? What's happening? The site is: http://www.redtypewriter.com/ if you want to take a look, and I am using a custom WordPress theme.

Thanks!


回答1:


There are two mains reasons to get black icons:

  • Using JPG pictures (iOS prefers PNG)
  • Using PNG with transparent regions. iOS fills transparent regions with black.

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

With you original pictures, I observed three issues:

  • The black icon, as you described it.
  • It took some time for my device to show the icon (eg. when adding to the home screen). During the first few seconds, I only saw default icons. This is not that unusual, but I was a bit surprised.
  • When bookmarking, my device didn't use your icons but another one:

As soon as I converted them to PNG and change the HTML code accordingly, all issues were fixed at once.

In addition, you don't define enough pictures. For example, your icon won't look great on a Retina iPad.



来源:https://stackoverflow.com/questions/23014401/ios-icon-for-add-to-home-screen-turns-black

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!