@yume_sakiposted at 2024-09-06

スマホのホーム画面のアイコン設置

Q&A

HTML favicon スマホアイコン

解決したいこと

スマホのホーム画面のアイコンをios用とandroid用を設置したいのですが、テスト環境では反映され本番環境では反映されません。

考えられる原因と対処法を教えていただけますでしょうか。

よろしくお願いいたします。

該当するソースコード

<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.ico" sizes="64x64">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/img/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/img/android-touch-icon.png" sizes="192x192">
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.svg" type="image/svg+xml">

自分で試したこと

・svgデータの記述を一番下に移動
・wpのキャッシュ削除（プラグイン対応）
・icoファイルをpngファイルに変更
・pngファイルの画像サイズを64x64から32x32に変更
※pc用のファビコンは表示される
※icoファイルはpngファイルの拡張子を変更したもの

1Answer

@itagagaki posted at 2024-09-06

サーバーの wp-content/themes/(テーマ名)/img にファイルを転送できていますか？

0Like

Comments

@yume_saki
Questioner
ご回答いただきありがとうございます。
はい。転送できています。
サイトの検証画面でも読み込まれているか確認し、全ファイル問題なく表示されました。
@itagagaki
テスト環境と本番環境は同じサーバーですか？
@yume_saki
Questioner
ご回答いただきありがとうございます。
違うサーバーです。
本番環境のimgファイルまでの階層は以下のとおりです。
/contents/sample/wordpress/wp-content/themes/(テーマ名)/img
@itagagaki
テスト環境のOSは何でしょう？もしWindowsだったりするとファイル名の大文字と小文字が違ってもたぶん表示されてしまうので、そのあたりだったりしないかなと。
@yume_saki
Questioner
ご回答いただきありがとうございます。
iOSです。
テスト環境のスマホアイコンを確認できたブラウザは、Google ChromeとSafariで問題なく表示されました。
@yume_saki
Questioner
何度も申し訳ありません。
本番環境のスマホアイコンは未だに表示されず、他に考えられる原因はありますでしょうか。
ファイルの格納場所を変えたり、ファイル名を変えたりなどはしてみました。
試した格納場所：/contents/sample/wordpress/wp-content/themes/(テーマ名)
@itagagaki
wpのキャッシュ削除をやってみたとあるので、もちろんブラウザのキャッシュのクリアもやってみたものと思っていましたが、念のためもう一度クリアして試してみてはいかがでしょうか。ブラウザはfaviconを強くキャッシュするので、ただページを再読み込みするだけでは読み込まれない可能性があります。iOS Safariなら設定＞Safari＞履歴とWebサイトデータを消去」でしょうか。
@yume_saki
Questioner
ご回答いただきありがとうございます。

はい、ブラウザのキャッシュのクリアも上記の方法で何度も試しておりまして、念のためもう一度クリアして時間を置いてから確認しましたが、反映されませんでした。

スマホの「ホーム画面に追加」するのアイコンは未設定ですが、スマホのタブなどのアイコンはwpのファビコンに設定されているものと同じものが反映されています。

wpのファビコンは今回アイコンを設定する前から設定されているものでした。
こちら何か関係しているのでしょうか。
よろしくお願いいたします。
@itagagaki
質問に貼り付けられていたlinkタグのコードは、PC向けでもモバイル向けでも共通ですか？それならPCのブラウザで本番環境のURLに行ってページのソースを表示してみて、そのlinkタグがちゃんとあるかどうか、そしてhrefのパスがどうなっているかを確認してみましょうか。
@yume_saki
Questioner
ご回答いただきありがとうございます。
はい、共通のコードです。
linkタグはちゃんとあり、hrefのパスは下記の通りでファイルも読み込まれています。
サイトURL/uBs8nV5c/wordpress/wp-content/themes/テーマ名/img/favicon.ico
@itagagaki
他の img/apple-touch-icon.png 等もあるということですよね。
そして、たとえば rel="apple-touch-icon" のほうのhrefのパスを直接PCブラウザのURLバーに貼り付けたらそれもちゃんと表示されるわけですね？
だとしたら、やっぱり端末側の問題でしょうか。他の端末で試してみたりしましたか？
@yume_saki
Questioner
ご回答いただきありがとうございます。

はい、rel="apple-touch-icon"も直接PCブラウザのURLバーに貼り付けたら表示されます。
iphone3台のGoogle ChoromeとSafari、AndroidはキャッシュクリアしてできないものでしたがGoogle Choromeで確認しました。

別に、wpからサイトアイコンをpngファイルで設定しましたが、スマホのタブのアイコンにだけは一時反映されましたが、12時間以上経った今また消えてしまっていました。

いずれにしてもスマホのホーム画面のアイコンには反映されませんでした。
@itagagaki
なかなか問題を切り分けられないですね。でも、なんとなくサーバーに何か変な設定が入っているのではないかという気がしてきました。テスト環境と本番環境は別のサーバーだということでしたが、サーバーの種類（Apacheとかnginexとか）は同じでしょうか？で、その設定も同じでしょうか？たとえばApacheならhttpd.confや.htaccessがテスト環境と本番環境とでどこか違っているところがあって、それが原因になっていたりしないでしょうかね。
@yume_saki
Questioner
ご回答いただきありがとうございます。

解決いたしました！
本当に申し訳ないのですが、、原因はBasic認証をかけていたためでした、、、
Basic認証を外してみたら問題なく表示されました。

こちらの説明不足でお手数をおかけいたしました。
ご丁寧に何度もご回答いただきありがとうございました。
とても勉強になりました。

今後ともよろしくお願いいたします！！

Are you sure you want to delete the question?