Android用のホーム画面に追加したとき用アイコンを設定しようとしたら反映されなくて困った

AndroidにもiPhoneにも、webサイト（URL）をホーム画面に追加する機能がある。
この時、HTML上で適切な設定ができていれば任意のアイコンでホーム画面に追加できる。
（設定していなければサイトの頭文字かなにかで設定される）
Next.jsのプロジェクトで設定していたのだが、iPhoneは下記の記述でうまくいくがAndroidでは設定されないとの連絡をもらった。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/android-touch-icon.png" />

ファイル名を変えてもsizeを設定しても一向に反映されない。
結論、絶対パスを指定することで解消することができた。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="https://ドメイン/android-touch-icon.png" />

上記設定は_documentファイルに記述する必要があり、サーバーサイドで実行されるため、クライアント側で動的にドメインを取得することはできない。
このため、.envにドメインの設定を記述する必要がある。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" href={`${process.env.APP_URL}/android-touch-icon.png`} />

↑こんな感じ。https://とドメイン部分を合わせておけば他の場所でも使えることがある　かもしれない

もしブランチごとに環境を作成してい場合であれば、
それぞれで使用している.envに環境ごとのドメイン（URL）を設定すればよし。

ちなみにこれだと今までfavicon.icoという名前のファイルをpublic/images配下に設置すれば適用されていたファビコンが、
Androidのアイコンで上書きされてしまうため、favicon用の設定を追記する必要がある。

<link rel="icon" href="/favicon.ico">

アイコン設定参考元：
スマホ向けのファビコンを設定する | GRAYCODE HTML&CSS