<プロが教えるコーディング>ファビコンとWebクリップアイコンをラクに設置 | 東京IT新聞

<プロが教えるコーディング>ファビコンとWebクリップアイコンをラクに設置

コンシューマー その他

CODING  FACTORYです。2010年6月から月1回のペースでお届けしている「Coding Methodology」は、1909案件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

 Webサイトを閲覧していると、ブラウザのタブの部分に表示されるかわいいアイコン。ブックマークに登録したときにも表示されるので、favorite icon(お気に入りアイコン)の略で、「favicon(ファビコン)」と呼ばれます。

 今ではほとんどのサイトで見かけるこのアイコンですが、スマートフォンの普及によりfavicon事情も変わってきていることは意外に知られていません。  今回は、faviconを設置するならスマートフォン用に「Webクリップアイコン」も設置しよう、というお話をしたいと思います。

アイコンの設置方法

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

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

 この面倒なアイコン作成が一気に終わる便利なページがあります。260×260pxの画像を用意するだけで、あらゆるサイズの画像を作ってくれるだけでなく、ソースも吐き出してくれる優れものです。  これで安心してWeb クリップアイコンを設置することができますね。 Real Favicon Generator.nethttp://realfavicongenerator.net/   
 今回の執筆担当者 秋山 陽介(あきやま・ようすけ) コーディングファクトリー コーディングチーム コーダー
《株式会社モノサス》

特集

page top