Apple touch icon turns black

You’ve just generated a cool Apple Touch icon for your latest web project. Everything is ready and you decide to give it a try by adding the homepage to the home screen of your iPhone. The result is okay but… you can’t remember all that black in the original icon.

Apple Touch Icon turns black
Apple Touch Icon turns black

The reason: iOS forbids transparent icons. And it must have listened for the Rolling Stones hit for too long because it fills the gaps with black.

Bottom line: do not use transparency in your Apple Touch icon. RealFaviconGenerator helps you do just this.

Published by

Philippe Bernard

I'm a web developer and the author of RealFaviconGenerator. I created this site because I felt frustrated when I tried to generate the favicon of my previous web project.

6 thoughts on “Apple touch icon turns black”

  1. Transparent Apple Touch Icons are indeed possible. What you need to do is strip all excess information from the PNG using ImageOptim for Mac https://imageoptim.com/mac or a similar program on windows. I did extensive research and stumbled on the answer by looking at the apple touch icon used by the Virtual DJ site. This icon keeps it’s transparent background on iOS and MacOS Sierra. I looked at the file size and realized how small it was compared to the custom apple touch icons with transparency that I made for my favorites in Safari. Next I looked at the file information using the inspector in Mac’s Preview app. All of my custom apple touch icons had four tabs in the inspector section named General, exif, PNG and TIFF. The virtual DJ icon only had two tabs named PNG and General. Once I ran my custom images through ImageOptim the file sizes plummeted by over 90% and the extra TIFF and exif tabs disappeared from the inspector in Preview. Sure enough once I reloaded my custom images and launched Safari all of my Favorites tabs have transparent backgrounds!!!!

    1. Really?? Just to make sure: you mean that, when you add your site to the home screen of your iPhone, the icon is partly transparent? Not filled with black as usual? If so, could you send me the icon so I can run a few tests?

  2. Hi,
    I’ve set up my favicon with RealFaviconGenerator. I’ve set up white background for IOS icon. Current favicon on my WordPress dashboard shows a white background for IOS, but when I check my favicon with RealFaviconGenerator’s favicon checker, the background is black. Can you tell me why is that?
    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.