CRAで作成してビルドしたReactアプリについて、本番環境でファビコンが反映されません。

Question

前提・実現したいこと

create-react-appで作ったReactアプリをビルドしたものを、さくらのVPSで公開しています。
ローカルホストでは問題なく反映されていたファビコンが本番環境では反映されないのを、反映できるようにしたいです。
ファビコンはpublicフォルダに入っています。（デフォルトの置き場のままです）
/myproject/public/favicon.ico

ビルドしたら、publicフォルダの中身はルート直下に配置されます。

試したこと

index.htmlのデフォルトの状態は以下になります。

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

%PUBLIC_URL%はビルドの際にpublicフォルダのパス（URL）に置き換えられるようです。
ただ、デフォルトでは絶対パスで読み込まれてしまうらしく（<link rel="icon" href="/favicon.ico"/>）、相対パスで読み込ませるためにpackage.jsonに"homepage": "./"を追加すればいいと見たので試してみました。
相対パスで読み込まれるようになったものの（<link rel="icon" href="./favicon.ico"/>）、ファビコンは表示されませんでした。

hrefをURLにしてみても駄目でした。typeをつけても外しても変わらず。

<link rel="icon" type="image/x-icon" href="https://mysite.com/favicon.ico" />

どなたか解決法をご存知であればご教示いただけないでしょうか。

補足情報（FW/ツールのバージョンなど）

CentOS 7 x86_64
Apache
さくらのVPS

Comments

[hoshi-takanori]

ファビコンの URL (https://mysite.com/favicon.ico) を直接ブラウザで表示できますか？

[退会済みユーザー]

ありがとうございます。直接ブラウザ表示できます。

Answer 1

アイコンのイメージファイルを
favicon.ico → favicon.png に変更したら表示できました！
まだ全ての環境で表示されるかは確認できていませんが、取り急ぎ解決はしたので閉めさせていただきます。
ありがとうございました。