ファビコン(favicon)や、iOSやAndroidでホーム画面に保存した時に表示される画像、Windows8や10でスタート画面にピン留めした時の画像など、Webサイトでは様々なアイコン画像に関する設定が必要です。

さらに、OSやブラウザのバージョンアップによって書き方が異なるケースもあり、正しい書き方も常に変化してしまっています。

今回は、2019年2月現在のWebサイトに必要なファビコンや各種アイコンの設定方法についてまとめました。

必要なアイコン画像

紹介しているサイトによって必要なアイコン画像に関する説明は異なりますが、下記の3つの設定をしておけば問題ありません。

対象とするバージョン

本記事で紹介するファビコンや各種アイコンの設定について、IEの対象バージョンはIE11以降としています。

一部記述方法や、ファイルの拡張子などがIE10以前だと対応していない場合もありますが、IE10はすでにサポートが終了していることも踏まえ、今回は対象から外しています。

最終的なファビコン・各種アイコンの設定内容

先に、Webサイトに必要なファビコンや各種アイコンの設定内容をお見せしてしまいますが、必要な設定は下記のようになります。

思っていたよりもシンプルだと思った方が多いのではないでしょうか？様々なサイズを設定する方法もありますが、最近では最大サイズの画像を1つアップロードしておけば、後は端末側でよしなに表示してくれるため、サイズはあまり気にしなくてもよくなっています。

Windows向けの設定は、必ず必要という訳ではありません。手間だという方は、ファビコンとスマホ用アイコンの2つだけ設定しておきましょう。

では、それぞれ詳しくご説明していきましょう。

ファビコン(favicon)の正しい設定方法

まずは、ファビコンの設定方法についてご紹介します。ファビコンの拡張子は.ico形式にするのがおすすめです。icoファイルにすると、複数サイズの画像を1つのファイルにまとめることができるので、1つの画像ファイルでデバイスや環境に応じて最適なサイズで表示することができます。

.ico形式でファビコンを用意する場合

.ico形式でファビコン画像を用意する場合は、下記のように記述するだけでOKです。

ico形式のファイルを作るには、「X Icon editor」というサービスが便利です。pngやjpgなどの画像ファイルなどをアップロードすると、.ico形式のファイルに変換してくれます。

ちなみに、サイトのルートディレクトリに「favicon.ico」という名前でファイルを配置しておけば、上記の記述が無くてもファビコンを表示してくれます。

.ico以外の形式でファビコンを用意する場合

ファビコンは、.ico以外の画像ファイルも設定することができます。ただし、IE10以前のバージョンでは対応していなかったり、サイズの設定が面倒だったりするので、可能であればico形式に変換して設定するのがいいでしょう。

apple-touch-icon(スマホ用)

iPhoneやiPadのsafariや、AndroidでWebサイトをホーム画面に追加した時に表示されるのがapple-touch-icon(アップルタッチアイコン)です。

こちらは必須の設定ではありませんが、登録しておくとスマホユーザーがホーム画面に追加した時に分かりやすく表示することができるので、ユーザビリティとブランディングを考えると設定しておいた方が良いでしょう。

様々なサイズを用意するように説明されることもありますが、180×180の画像を1つだけ設定しておけば問題ありません。

apple-touch-icon.pngという名称で180×180のアイコン画像を作成し、ルートディレクトリにファイルを設置しておきましょう。

Windows用アイコン

Windows8やWindows10のスタート画面にWebサイトをピン留めした時の表示をリッチにしたい場合は、Windows用アイコンの設定を行いましょう。

必要なコードと画像の生成は、マイクロソフトが公式に提供するサービスを使って簡単に作ることができます。

少し前まではbrowserconfig.xmlというファイルを用意して各画像のサイズを指定していましたが、2019年2月現在マイクロソフトが公式に伝えている方法では上記の書き方となっています。

これからWindows用アイコンの設定を行う場合は上記のように記述すれば問題ありません。

Safari用のアイコン画像はもう必要ない

iOS 12、macOS Mojaveが登場するまでは、SafariでWebサイトをピン留め表示した時に表示されるアイコン画像を別途用意しなければなりませんでしたが、Safariでもファビコン画像がサポートされるようになったため、ファビコンさえ正しく設定しておけばSafariでも正しく表示されるようになりました。

ファビコンやアイコン画像が正しく設定されているか確認する方法

ファビコンが正しく設定されているのか、ブラウザ上で確認できるツールがいくつかありますが、最新の仕様に追いついておらず、あまり参考にならないので注意が必要です。

参考までに確認することはできますが、最終的な確認は実機で行うべきでしょう。下記のブラウザとデバイスで確認しておけば問題ないと思います。

補足：Androidでタブの色を変更する方法

AndroidのChromeやGoogleアプリでタブの色をWebサイト側から設定することができます。わざわざ色を設定しなくても問題ありませんが、あまり多くのWebサイトで設定されておらず、サイトの個性を引き立てることができます。

特に難しい設定は必要なく、下記のように記述するとタブの色を変更することができます。

まとめ

アイコン画像の設定方法について様々な記事が公開されていますが、OSのアップデートや仕様変更によってすぐに情報が古くなってしまうため、注意が必要です。

また、metaタグをきちんと設定していない方はファビコンや各種アイコン画像を設定するタイミングで一緒に修正しておくことをおすすめします。

おすすめの記事