Specify custom icon for Safari 17 “Add to Dock” feature?

According to the MDN documentation, you should be able to use a different icon by specifying the icons property within the manifest.json file: https://developer.mozilla.org/en-US/docs/Web/Manifest/icons.

Unluckily for us, this doesn't seem to work either.

I'm currently playing around with the manifest and it's look like also other components are not behaving as expected, such as scope and display. Maybe further tests are needed.

I've been able to use any size photo file, and so far anyways, I've been able to use any type of photo file format as well when changing these icons in Sonoma for web apps, very pleasantly surprised and pleased actually.

Not sure if what I am doing differes from you, but..:

1. Share site from Safari to dock via "Add to Dock"
2. Right click the app icon in the dock and under options go to "Show in Finder"
3. CMD+I on the app now shown/highlighted in Finder to pop up the Info Window
4. With the new icon copied to your clipboard, click the old Icon in the top Left of the Info Window.
5. CMD+V to paste the new icon over the old to update and replace.
6. You then do have to remove the App from the dock and close the app. Re-open and add to dock again and new icon is there (For all and any that I've tried since first installed Sonoma, all remain too).

I've mostly used https://macosicons.com/ for all my webapp icons. Very High quality / Free - 1,024 x 1,024 in size.

Have been testing many combination of <link rel="apple-touch-icon" .../> none worked.

However, seems like adding MacRumors site to Dock uses a different icon from their favicon, can't seem to replicate their success. https://www.macrumors.com

This is frustrating! We really want to provide the best website experience, including these nifty features like "Add to dock", but the support for it by its own creator is abysmal! Apple, wake up, do something about it! Or remove this half-baked feature. Heck, I cannot even move the app icon away from the dock and - say - into the Launchpad.

UPDATE to my previous post!

As it turns out – after a bit of fiddling – it is possible to define which icon shall be taken for the app icon in the dock. As I and others have already found out the hard way, using the legacy <link rel="apple-touch-icon" .../> doesn't work.

What works is to provide a properly configured manifest file (e.g. /app.webmanifest) that is served with the application/manifest+json content type). The icon is then listed in the "icons" section. Both 512x512 and 1024x1024 sized PNG and WEBP files worked (no transparency used, full square). And if you provide an SVG file ("sizes": "any") then this seems to take preference, even if you change the order within "icons". My web server also serves all image files with the appropriate respective content type.

Here's the manifest I that worked for me (with the SVG icon being chosen by Safari):

{
  "short_name": "Saturn PWA",
  "name": "Saturn Progressive Web App",
  "icons": [
    {
      "src": "/_static/_/images/pwa-icon.svg",
      "type": "image/svg+xml",
      "sizes": "any"
    },
    {
      "src": "/_static/_/images/pwa-icon-512.webp",
      "type": "image/webp",
      "sizes": "512x512"
    },
    {
      "src": "/_static/_/images/pwa-icon-1024.webp",
      "type": "image/webp",
      "sizes": "1024x1024"
    },
    {
      "src": "/_static/_/images/pwa-icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/_static/_/images/pwa-icon-1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
    }
  ],
  "id": "Saturn",
  "start_url": "/",
  "display": "minimal-ui",
  "theme_color": "#1A2733"
}