Webサイトへの404エラーの1つに、存在しないファイルへのアクセスがログで見つかることがあります。かなりの量だと気になりますよね。
中でも、apple-touch-icon-120×120.pngといった画像ファイルへのアクセスが見つかりました。
これはどうしてエラーになるかというと、iPhoneでホーム画面に登録する際、アイコンを表示させるため該当の画像ファイルを自動的にアクセスしてきたから起きます。
Appleに限ったことではなく、AndroidでもMicrosoftでも同様にサイトアイコンの画像があれば取得するようにアクセスしてきます。
いわゆるFaviconのことです。
Apple用だけではなく、どのOSにも適したアイコンファイルを生成しておくことで、この404エラーは解消できます。
Faviconをすべて生成する
アクセスエラー404を無くすには、単純にそのファイルが存在していれば済みます。少なくても404エラーにはなりません。
エラーログに載らないよう解消させるのに、次のオンラインサービスを使いました。
Faviconを生成してくれるサービスです。
今回利用したのは次のサイトです。
Faviconとして設定できるのは標準のfavicon.ico以外、iOS用、Android用、Windows用、MacOS用です。
これらをすべて一括で生成してくれます。
画像を用意する
基本となる画像を用意します。気を付けるのはサイズだけです。260×260ピクセル以上を用意しましょう。×512くらいが適当です。
当サイトだと、次のようなアイコン。
サービスサイトは英語ですが、それほど難しいわけでもないので、記事を参考にトライしてみてください。ウィザード形式で生成してきます。サービスの利用自体は無料で特にID登録する必要もありません。有難い！
最終的には、様々な形式に沿った画像を用意してくれます。出来上がった画像をWebサイトのルートディレクトリにFTPでアップロードして、<link rel=などのHTMLコードを<head></head>に書き込むだけです。
いくつかかいつまんで説明していきます。
画像ファイルを選ぶ
はじめにfaviconとして使用する画像を指定します。
設定箇所は細かくできる
画面が変わり、順番に各項目のオプションを選べば、左側のプレビューで確認ができます。簡単です。
分かりにくいのですけど、タブで選んで細かく設定できます。用意した画像によっては、デフォルトでも問題ないことも多いです。プレビューを見ておかしくなければOKでしょう。
ジェネレートボタン
一番下まで選んで設定した後、ボタンから生成できます。
このとき、オプションタブの最後になるREADME.mdとhtml_code.htmlを一緒に生成するオプションにチェックを入れましょう。
これはサイトに転送する必要はありませんが、コードなどを後から確認することができるので生成しておいた方が楽です。
既にWordpressテーマ側でアイコンを設定してある場合、書き換わらないため、Version/refreshの項目でバージョンのクエリを設定しておきます。
仮に1.2などとしておけば、バージョン指定したURLで表示できます。これで再び書き換えたとしてもURLが変わるのでアイコンも更新されます。
やり直すときなどで利用しました。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1.2">FTPでファイルをアップロード
最終的に出力されたファイルをダウンロードし、展開したファイルをFTPでアップロードします。
オプションの指定により、ファイル数は変わります。10個〜でしょうか。
表示されたコードをコピペ
<link rel=の数行を<head>セクションにコピペすれば終了です。
最後に利用したサイトにはアイコンチェッカーがあります。赤い表示になっていなければ問題ありません。
アップロードする場所
基本はサイトのルートディレクトリです。
ただ、ファイル数が多いので、別のディレクトリにしたいのならそのように指定もできます。
オプションのパスに作成したフォルダを指定すればOKです。
これはお好みで。
404エラーの解消
これでエラーのあったapple-touch-icon-120×120.pngは存在することになり、404にはなりません。
ついでにどのデバイスでもサイトアイコンが表示されて気持ちがいいです。
アイコンの404エラーに遭遇したのでファビコン（Favicon）を生成して対応するやり方でした。
