スマートフォンのファビコン

Read More

iPhoneのWebクリップという機能を使ってホームにアイコンを表示することができます。
PCでいうファビコン(favicon)のようなもの、と考えて良いです。


このWebクリップを使うと、
サイト側でアイコンの指定をしていない場合、サイトのトップ部分を画面キャプチャしたアイコンが自動で作成されます。

ま、自動で作成してくれるのはそれはそれでいいのですが、
やはりアイコン画像くらい用意しておきたい所です。



さて、このアイコンの指定方法についてですがあちこちで情報が氾濫していて
正しい情報と間違った情報が普通に溢れかえっているのでここで整理しておきます。



まず、iPhone用に必要になってくる画像のサイズは57x57ピクセルのpng画像。

128だとか256だとか512とか必要ありません。
というかサイズが大きいと無駄なトラフィックが発生するだけなのでやめましょう。
ただ、サイズが違った場合でもiPhone側で自動でリサイズはしてくれます。



次にファイル名。

apple-touch-icon.pngというファイル名でパブリックルートディレクトリに置く。

これだけで勝手に適用してくれます。
ただし、このファイル名だとiPhoneが勝手に四隅を丸めて艶を出してくれやがります。

この艶出しと角丸処理が必要ないという場合は、
apple-touch-icon-precomposed.pngという名前にしておけばそのままのアイコン画像を使ってくれます。



次にアイコンをパブリックルートディレクトリ以外に置きたい場合、
又はパブリックルートディレクトリに置いているけどHTMLで丁寧に指定したい、
という場合はheadタグ内で以下のように指定します。

<link href="{{ディレクトリパス}}/apple-touch-icon.png" rel="apple-touch-icon" type="image/png" />



ポイントとなっているのはrel属性で"apple-touch-icon"を指定していること、です。
これは"自動"で"艶出し(+角丸)"がなされる方の指定です。

この処理が必要ない場合はrel属性は"apple-touch-icon-precomposed"となります。


またlinkタグでパスを指定しているのでファイル名は必ずしもapple-touch-icon.png(又はapple-touch-icon-precomposed.png)でなくても良いです。

ただ、別のファイル名を付けると他の人が見た時に判断しづらくなるので、設置場所も名前も変更はお勧めしません。


rel属性が"apple-touch-icon-precomposed"である時は、ファイル名もapple-touch-icon-precomposed.pngに合わせるのを忘れないでおいて欲しい所です。



type属性の指定はpng形式であることを指定しています。
これは省略可能です。




ちなみに今回はiOSの方ばかりでAndroidの方は確認していませんが、Android用に以下のような設定を行っています。
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="icon" type="image/x-icon"  />

favicon.icoは16x16のサイズです。
PC用に用意したものと同じものを指定しています。



最終的にはスマートフォン用に以下のようなlinkタグを設定しています。
<link href="apple-touch-icon.png" rel="apple-touch-icon" type="image/png" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="icon" type="image/x-icon"  />






最後に、
さきほど"丁寧に指定したい場合にlinkタグを使う"と書きましたが、実際は省略せずに書くのが当たり前です。

最近は適当なソースでもブラウザが勝手に解釈してなんでもそこそこに動いてしまいますが、こういうのは省略せずに正しく書く癖を付けたいものです。




Category "HTML・JS・CSS" の最新記事