Posted over 5 years ago. Visible to the public. Repeats.

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:

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

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

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
over 3 years ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more