Thought that wasn’t possible, but it actually is. Here‘s two approaches:
iOS Profile
Add the web clip via profile by running this shortcut. You don’t need to upload the image anywhere, but it means you have the profile laying around. If you‘re okay with uploading the image somewhere I‘d recommend the next approach.
Change the apple-touch-icon
urls
I made this little shortcut that does it for you, you just need a url to the image and run the shortcut on the website you wanna add.
(If you wanna use the space mouse icon I made, here’s a high res image url: https://i.imgur.com/kUxXoIA.png)
Or if you wanna do it yourself:
You can manually change the apple-touch-icon
urls before adding the web clip to your home screen. Either by connecting your device to a Mac and doing the changes via web inspector there, or directly on device by using a safari extension such as this one that lets you run JavaScript.
Install the app, go to the website, enable the extension, paste this in the console and tap “execute”:
const appleTouchIcons = document.querySelectorAll('link[rel="apple-touch-icon"]'); appleTouchIcons.forEach(icon => { icon.href = "https://i.imgur.com/kUxXoIA.png"; });
You can change the url to any image url you want to use.
Sorry I didn’t post this right away, but I realized you could also use a shortcut for the second option. I added that to the post, makes it pretty easy and you don’t have to install a profile or any other app which is nice.