iOS icon for Add to Home Screen turns black
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.