Apple touch icon

December 27, 2023

Apple lets you configure an image which is used as the icon when your progressive web app is added to the homescreen. This is configured using

<link rel="apple-touch-icon" href="apple-touch-icon.png">

My website favicon consists of an image with orange and white colors. On adding my website to the homescreen on iOS devices, iOS was somehow adding a black border. After some web research, I found out that if the image had transparent pixels, iOS would replace it with a black color. I just had to replace the transparent pixels in the apple touch icon with white. I couldn’t be bothered to use a GUI for this. Thankfully this was pretty easy to accomplish with ImageMagick.

 find . -name "*.png" -exec convert "{}" -background white -alpha remove -alpha off "{}" \;