Read more

Do not use transparent PNGs for iOS favicons

Arne Hartherz
July 16, 2014Software engineer at makandra GmbH

Safari on iOS accepts an apple-touch-icon Show archive.org snapshot favicon that is used for stuff like desktop bookmarks. Always define a solid background color for them.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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:

convert 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):

for 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.

Posted by Arne Hartherz to makandra dev (2014-07-16 10:58)