Apple touch icon December 27, 2023

On Apple devices, you can configure an app icon for your PWA(Progressive Web Application) using apple-touch-icon. This can be 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 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 did not want to fiddle with a GUI editor for this. Thankfully this was pretty easy to accomplish with ImageMagick.

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