コーディングメソドロジー

第79回 faviconとWebクリップアイコンの設置

Webサイトを閲覧していると、ブラウザのタブの部分に表示されるかわいいアイコン。ブックマークに登録したときにも表示されるので、favorite icon(お気に入りアイコン)の略で、「favicon(ファビコン)」と呼ばれます。今ではほとんどのサイトで見かけるこのアイコンですが、スマートフォンの普及によりfavicon事情も変わってきていることは意外に知られていません。今回は、faviconを設置するならスマートフォン用に「Webクリップアイコン」も設置しよう、というお話をしたいと思います。

アイコンの設置方法

faviconの設置だけなら、16x16pxの「.ico」形式で保存したアイコン用画像を用意し(ここではfavicon.ico)、<head>内に<link rel="shortcut icon" href="/favicon.ico">と記述するだけでOKでした。
しかし、faviconに加えWebクリップアイコンをandroidを含む主要端末で全て表示しようとすると、右図のようなことになります。
機種により表示できる画像サイズが異なるため、様々なサイズの画像を用意しなくてはなりません。
これは面倒・・・そこで。

favicon

ブラウザのお気に入りやタブに表示される。

favicon

Web クリップアイコン

スマートフォンでWebサイトのブックマークをホーム画面に登録すると表示されるアイコン。アイコンを設置していないと画面のキャプチャがアイコンとして表示される。

Web クリップアイコン

アイコンの設置方法

アイコンの設置方法

アイコン作成が2分で終わる!便利なページ

この面倒なアイコン作成が一気に終わる便利なページがあります。260x260pxの画像を用意するだけで、あらゆるサイズの画像を作ってくれるだけでなく、ソースも吐き出してくれる優れものです。これで安心してWebクリップアイコンを設置することができますね。

Real Favicon Generator.net
http://realfavicongenerator.net/

Real Favicon Generator.net

Real Favicon Generator.net

様々なサイズの画像が作られるので、必要なものだけ選んで使用する。アイコンの表示サイズや背景色などを設定することもできる。

Real Favicon Generator.net

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム