Webサイトのファビコンやスマホ用アイコンの各種設定方法

Webサイト制作時にブラウザ用のファビコン(favicon)を用意しますが、他にもユーザーの目に触れるアイコンを設定できる箇所があります。
iOSやAndroid端末でホーム画面にURLリンクを保存した時に表示される画像や、Windows8や10でスタート画面にピン留めした時の画像などがそれです。 OSやブラウザのバージョンによって正しい書き方が常に変化するものですが、今回は2018年10月現在の、Webサイトに必要なファビコンや各種アイコンの設定方法について調べてみました。

Webサイトに必要な各種アイコン

Webサイト制作時に設定しておくべきアイコン画像は以下です。

• ファビコン(favicon)
• スマホホーム用アイコン(touch-icon)
• Windows8, 10用アイコン

ブラウザのタブに表示されるファビコンと同じように、スマホホーム用アイコンはWebサイトへのショートカットを端末のホーム画面に設定した際に、 Windows8, 10用アイコンはスタート画面にWebサイトをピン留めした時にそれぞれアイコンとして表示され、ユーザーが目的のサイトを探しやすくなる効果があり、Webサイトへのアクセスの導線が強まります。

それでは設定方法を紹介します。

各種アイコンの設定内容

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

ファビコンの設定は.ico形式のファイルで行います。この形式は複数サイズの画像を1つのファイルにまとめることができ、デバイスや表示環境に応じて最適なサイズで表示することができます。
pngやgif形式でも設定はできますが、複数サイズを格納することができないのでファビコンは.ico形式で作成することをおすすめします。
設定用の記述は以下です。

<link rel="icon" href="favicon.ico">

スマホホーム用アイコン(touch-icon)の設定方法

スマートフォンやタブレット端末でWebサイトをホーム画面に追加した際に表示されるホーム画面用アイコンをapple-touch-iconといいます。2018年現在ではAndroid OSでも読み込むことができるようになり、 設定がシンプルに行えるようになっています。
様々な画像サイズを用意するように説明されることもありますが、180×180の画像を1つ設定しておけばデバイスや表示環境に応じて最適なサイズで表示することができます。
設定用の記述は以下です。

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">

Windows8, 10用アイコンの設定方法

Windows8や10のスタート画面にWebサイトをピン留めした際の表示を、Webサイト側から設定することができます。
設定用の記述は以下です。

<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="#1683FB"/>

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

過去にはiOSのSafariでも専用のアイコン設定が必要でしたが、2018年現在ではSafariでファビコン画像がサポートされるようになったため、ファビコンが正しく設定されていればsafariでも正しく表示されるようになりました。

まとめ

本記事で紹介するファビコンや各種アイコンの設定のIE対象バージョンはIE11以降です。
アイコン画像の設定方法については、OSのアップデートや仕様変更によってすぐに情報が更新されます。
動向に注意を払いながら、ユーザービリティ向上とアクセスアップのためにも、正しい設定を行いましょう。