ファビコン(favicon)や、iOSやAndroidでホーム画面に保存した時に表示される画像、Windows8や10でスタート画面にピン留めした時の画像など、Webサイトでは様々なアイコン画像に関する設定が必要です。
さらに、OSやブラウザのバージョンアップによって書き方が異なるケースもあり、正しい書き方も常に変化してしまっています。
今回は、2020年4月現在のWebサイトに必要なファビコンや各種アイコンの設定方法についてまとめました。
INDEX
Webサイトに必要なアイコン画像の種類
紹介しているサイトによって必要なアイコン画像に関する説明は異なることもありますが、下記の3つを設定をしておけば問題無いでしょう。
- ファビコン
- ブラウザのタブなどに表示されるWebサイトごとに設定可能なアイコン画像です。ファビコンを設定しなくても支障はありませんが、タブ表示したときやブックマークした時にWebサイトを探しやすくなるため、ユーザビリティを考えると必ず設定しておいた方が良いでしょう。
- apple-touch-icon(Web Clipアイコン）
- Webサイトをホーム画面に追加した時に、アプリと同じようにアイコン表示される時の画像です。スマホ用アイコンが設定されていないと、ページのサムネイルがアイコン画像に使用されますが、それだと使いづらいため、やはりユーザビリティを考えると設定しておいた方がベターです。
- Windows用アイコン
- スタート画面にWebサイトをピン留めした時に表示されるアイコン画像です。ファビコンやスマホ用アイコンと比べると使用頻度は低くなるので面倒であれば設定しなくても問題ないと思いますが、余裕があれば設定しておいた方がいいですね。
対象とするバージョン
本記事で紹介するファビコンや各種アイコンの設定について、IEの対象バージョンはIE11以降としています。
一部記述方法や、ファイルの拡張子などがIE10以前だと対応していない場合もありますが、IE10はすでにサポートが終了していることも踏まえ、今回は対象から外しています。
ファビコン・各種アイコン設定のサンプルコード
先に、Webサイトに必要なファビコンや各種アイコンの設定内容をお見せしてしまいますが、必要な設定は下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- ファビコン --> <link rel="icon" href="/favicon.ico"> <!-- スマホ用アイコン --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Windows用アイコン --> <meta name="application-name" content="{サイト名}"/> <meta name="msapplication-square70x70logo" content="small.jpg"/> <meta name="msapplication-square150x150logo" content="medium.jpg"/> <meta name="msapplication-wide310x150logo" content="wide.jpg"/> <meta name="msapplication-square310x310logo" content="large.jpg"/> <meta name="msapplication-TileColor" content="#FAA500"/> |
思っていたよりもシンプルだと思った方が多いのではないでしょうか？様々なサイズを設定する方法もありますが、最近では最大サイズの画像を1つアップロードしておけば、後は端末側でよしなに表示してくれるため、サイズはあまり気にしなくてもよくなっています。
Windows向けの設定は、必ず必要という訳ではありません。手間だという方は、ファビコンとスマホ用アイコンの2つだけ設定しておきましょう。
では、それぞれ詳しくご説明していきましょう。
1. ファビコン(favicon)の正しい設定方法
まずは、ファビコンの設定方法についてご紹介します。ファビコンの拡張子は.ico形式にするのがおすすめです。icoファイルにすると、複数サイズの画像を1つのファイルにまとめることができるので、1つの画像ファイルでデバイスや環境に応じて最適なサイズで表示することができます。
.ico形式でファビコンを用意する場合
.ico形式でファビコン画像を用意する場合は、下記のように記述するだけでOKです。
|
1 |
<link rel="icon" href="/favicon.ico"> |
ico形式のファイルを作るには、「X Icon editor」というサービスが便利です。pngやjpgなどの画像ファイルなどをアップロードすると、.ico形式のファイルに変換してくれます。
ちなみに、サイトのルートディレクトリに「favicon.ico」という名前でファイルを配置しておけば、上記の記述が無くてもファビコンを表示してくれます。
.ico以外の形式でファビコンを用意する場合
ファビコンは、.ico以外の画像ファイルも設定することができます。ただし、IE10以前のバージョンでは対応していなかったり、サイズの設定が面倒だったりするので、可能であればico形式に変換して設定するのがいいでしょう。
|
1 |
<link rel="icon" type="image/png" href="/favicon.png"> |
|
1 |
<link rel="icon" type="image/gif" href="/favicon.gif"> |
2. apple-touch-icon(Web Clipアイコン)
iPhoneやiPadのsafariや、AndroidでWebサイトをホーム画面に追加した時に表示されるのがapple-touch-icon(アップルタッチアイコン)です。
こちらは必須の設定ではありませんが、登録しておくとスマホユーザーがホーム画面に追加した時に分かりやすく表示することができるので、ユーザビリティとブランディングを考えると設定しておいた方が良いでしょう。
様々なサイズを用意するように説明されることもありますが、180×180の画像を1つだけ設定しておけば問題ありません。
|
1 |
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> |
apple-touch-icon.pngという名称で180×180のアイコン画像を作成し、ルートディレクトリにファイルを設置しておきましょう。
3. Windows用アイコン
Windows8やWindows10のスタート画面にWebサイトをピン留めした時の表示をリッチにしたい場合は、Windows用アイコンの設定を行いましょう。
|
1 2 3 4 5 6 |
<meta name="application-name" content="{サイト名}"/> <meta name="msapplication-square70x70logo" content="small.jpg"/> <meta name="msapplication-square150x150logo" content="medium.jpg"/> <meta name="msapplication-wide310x150logo" content="wide.jpg"/> <meta name="msapplication-square310x310logo" content="large.jpg"/> <meta name="msapplication-TileColor" content="#FAA500"/> |
以前はMicrosoftのツールで簡単にアイコン画像を生成できましたが、すでにツールの提供が終了しているため、それぞれのサイズの画像を作成し、アップロードした上で上記のコードを記述してください。
Safari用のアイコン画像はもう必要ない
iOS 12、macOS Mojaveが登場するまでは、SafariでWebサイトをピン留め表示した時に表示されるアイコン画像を別途用意しなければなりませんでしたが、Safariでもファビコン画像がサポートされるようになったため、ファビコンさえ正しく設定しておけばSafariでも正しく表示されるようになりました。
ファビコンやアイコン画像が正しく設定されているか確認する方法
ファビコンが正しく設定されているのか、ブラウザ上で確認できるツールがいくつかありますが、最新の仕様に追いついておらず、あまり参考にならないので注意が必要です。
参考までに確認することはできますが、最終的な確認は実機で行うべきでしょう。下記のブラウザとデバイスで確認しておけば問題ないと思います。
- ブラウザ
- Chrome, Safari, Edge
- デバイス
- Windows, Mac, iOS, Android
補足：Androidでタブの色を変更する方法
AndroidのChromeやGoogleアプリでタブの色をWebサイト側から設定することができます。わざわざ色を設定しなくても問題ありませんが、あまり多くのWebサイトで設定されておらず、サイトの個性を引き立てることができます。
特に難しい設定は必要なく、下記のように記述するとタブの色を変更することができます。
|
1 |
<meta name="theme-color" content="#378586"> |
まとめ
アイコン画像の設定方法について様々な記事が公開されていますが、OSのアップデートや仕様変更によってすぐに情報が古くなってしまうため、注意が必要です。
また、metaタグをきちんと設定していない方はファビコンや各種アイコン画像を設定するタイミングで一緒に修正しておくことをおすすめします。
