How to make web shortcut icons mode-adaptive like native app icons?

Hello everyone,

I'm very impressed with the Liquid Glass design introduced in iOS 26, especially how native app icons automatically adapt to the system's display mode (dark or light).

This brings me to a question: Is it possible to make a website shortcut icon created via Safari's "Add to Home Screen" feature adapt to Dark Mode in the same way?

For native apps, we can use tools like Icon Composer and asset catalogs (Assets.xcassets) to provide different icons for each mode. It would be a huge improvement for web clips if we could achieve the same with existing web technologies like apple-touch-icon or the Web App Manifest.

If anyone has figured out a way to do this, I would greatly appreciate it if you could share your knowledge.

Thanks in advance!


日本語の原文:

iOS 26から導入されたLiquid Glassデザインについて。 ネイティブアプリのアイコンがシステムの表示モード(ダークモード/ライトモード)に合わせて自動で最適化されるようになりました。 そこで疑問に思ったのですが、Safariから「ホーム画面に追加」機能を使って作成するWebサイトのショートカットアイコンは、ネイティブアプリと同じようにダークモードに対応できないのでしょうか? ネイティブアプリの場合は、Icon Composerなどのツールでアセットカタログ(Assets.xcassets)を使い、モードごとのアイコンを用意できますよね。 Web側でも、apple-touch-iconやWeb App Manifestといった既存の仕組みを使って、アイコンを動的に切り替えられるようになると、Webクリップの使い勝手がさらに向上すると思うのですが もし、すでに何らかの方法で対応されている方がいらっしゃれば、ぜひその知見を共有していただけると嬉しいです。

How to make web shortcut icons mode-adaptive like native app icons?
 
 
Q