Windowsのwebサイトのスタート画面にピン止めしたときにライブタイルの画像に設定したアイコンが表示されない

現状

ウェブサイトを開発しています。Windows8～の機能で、サイトをピン止めしたときに、スタート画面にタイル表示されることを知り、いろいろ調べて現在ではhtmlのヘッダにメタタグとして以下の記述をすればよいことがわかりました。(browserconfig.xmlは置かないパターン)
main.scala.html:

html
1<meta name="application-name" content="hogehoge"/>
2<meta name="msapplication-square70x70logo" content="/public/static/media/tile_icon/tiny.png"/>
3<meta name="msapplication-square150x150logo"content="/public/static/media/tile_icon/square.png"/>
4<meta name="msapplication-wide310x150logo" content="/public/static/media/tile_icon/wide.png"/>
5<meta name="msapplication-square310x310logo" content="/public/static/media/tile_icon/large.png"/>

一番上の行の設定は反映されてサイトタイトルが"hogehoge"となりましたが、画像の設定はダメなようで、何も表示されません。

疑問

① 状態からして画像のパス設定がおかしい？
4つのサイズの画像はプロジェクト直下のpublic/static/media/title_icon/に配置しています。
② キャッシュが残っている？
最初、よくわからないままトライ＆エラーで何度か試していたので、画像が表示されない状態のキャッシュが残っているかも
-> ブラウザのキャッシュクリア(F5)を実行しても変化はありませんでした。スタート画面へのピン止めの設定は別に必要？
現に、試しにデスクトップ上でhtmlファイルを作成して、そこで同じようなことをした結果(この時は画像が表示された)、画像を変更したりしても、最初に設定した画像から変更が変わらなかったです。またサイズもデフォルトの二つしかなく、4つある画像のうち一つ(150x150のやつ)だけが拡大縮小されるだけという...
③そもそもどういう仕組みでリクエストが来ているのか？エラーを吐いているはずなので、そのログはどこで見られるのか？

ということが知りたいです！長くなりましたが、どなたかご教授を頂けると幸いです。

補足：②について、新たな情報として
ローカル環境で立ち上げたサーバ(localhost:9000など)だとピン止めの画像が反映されず、html単体をwebブラウザで開いたもの(つまりブラウザのURLはファイルのパス＝file:///C:/Users/username/.. ../project/public/hogehoge.html)をピン止めすると150x150の画像のみが設定される
ということがわかりました。(なぜそうなのかは置いといて...)

追記：
開発は、create-react-appで作られるデフォルトのものを使用しています。

行動規範の内容に同意します

回答2件

自己解決

ネットワークに繋げてみたところ、うまくいきました。ローカルだとうまく反映されないみたいです。回答してくださった方ありがとうございました。

投稿2019/08/13 02:22

yochun02

総合スコア76

PlayFrameworkでpublic直下の静的なファイルは、jarファイル内に含められてしまう為、
パスを直接指定してもアクセスできないと思います。

routeファイルのルーティングにもよりますがデフォルトは
以下のようになっていると思いますので

routes
1GET      /assets/*file       ontrollers.Assets.versioned(path="/public", file: Asset)

main.scala.htmlでは、

HTML
1<meta name="application-name" content="hogehoge"/>
2<meta name="msapplication-square70x70logo" content="@routes.Assets.versioned("static/media/tile_icon/tiny.png")"/>
3<meta name="msapplication-square150x150logo"content="@routes.Assets.versioned("static/media/tile_icon/square.png")"/>
4<meta name="msapplication-wide310x150logo" content="@routes.Assets.versioned("static/media/tile_icon/wide.png")"/>
5<meta name="msapplication-square310x310logo" content="@routes.Assets.versioned("static/media/tile_icon/large.png")"/>

のようにしてみれば表示されるではないでしょうか。

投稿2019/08/07 09:43