スマホ向けのファビコン設定の方法

こんばんは、こうちゃんです。

今回はサイト作りの際に見栄えに役立つ、
ファビコン（favicon）の情報紹介です

ファビコンとは、元々パソコンのブラウザ上でブラウザ上部のタブに表示されるアイコン画像のことで、ブックマークした時などにも表示されます。
こちら、スマホでも、仕様は異なりますが、
ホーム画面にお気に入りでショートカットを登録した際などにはスマホ向けファビコンが表示されることとなります。
ファビコンは通常のWebサイトとは別に、スマホ向けの指定をすることができます。

画像は、PC向けですと、.icoの拡張子で指定した画像ファイルになりますが、
スマホ用でしたら、.pngのファイルで用意することになります。
そして、今のメジャーなスマホ用OSですと、iPhone、Androidがありますが、
それぞれに対して、ファビコンの指定は以下のようなタグをhead要素内に記載する方式になります。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">

記載はこのようなタグを書き、画像は参照できれば大丈夫ですので、
href以降のパスは好きなようにサイト内に配置して構いません。

このようにすれば、それぞれのスマホでお気に入りした時に、
指定の画像がアイコンとして表示されます。
ブラウザのタブ表示やブックマーク時など、ファビコンが目に触れる機会は意外と多いものですので、各種設定やっておくとよいです。




こうちゃん