Apple touch icon

12/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 "{}" \;