Do not use transparent PNGs for iOS favicons
Safari on iOS accepts an apple-touch-icon favicon that is used for stuff like desktop bookmarks. Always define a solid background color for them.
If you use PNGs with a transparent background, Safari will use just set a black background on your pretty icon. This is almost never what you want.
You can fix that by applying a white background via ImageMagick like this:
Copyconvert apple-touch-icon.png -background white -flatten apple-touch-icon-white.png
Since you can define a ton of different sizes for those icons, you may want to batch-convert them. Here is a Bash command (overwrites files, so have a backup of them):
Copyfor file in apple-touch-icon*.png; do convert $file -background white -flatten $file; done
Desktop and Android browsers will understand PNG favicons with alpha transparency, so you do not need to fix anything for them.
With that many different files, you should also test if they are all reachable.
makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.
