WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： スーザン
カテゴリー： マークアップ >その他

サイトをサーバーにアップし、完了かと思いきやfaviconの設置していなかった！
なんてことありませんか？
iPhoneのホーム画面にリンクを追加した時、ウェブクリップアイコンが設定されていないと何だか残念な見た目に・・・

うっかり忘れてしまいがちですが、サイトにとって重要なfavicon、ウェブクリップアイコンについてまとめてました。

faviconとは

favicon（ファビコン）＝favorite icon(フェイバリット・アイコン）の略。

ブラウザのタブやお気に入り、ブックマークなどをすると表示される小さなアイコンのことです。

faviconのサイズは

faviconは対応するブラウザによって様々なサイズがあり、どのサイズを作ったらいいのか迷ってしまいます。まずは、以下の主要サイズを抑えておきましょう。

• 【主要サイズ】
• ・16px×16px　　IEのタブやお気に入り
• ・32px×32px　　chrome、firefox、safariなどのタブやブックマーク
• ・48px×48px　　Windowsのサイトアイコン
• ・64px×64px　　高解像度のWindowsサイトアイコン

画像枚数が増えるとデータが重たくなってしまうので、私は16px×16px 、32px×32pxの2サイズをマルチアイコンにしています。
※マルチアイコンとは異なったサイズのアイコンを1つのファイルにまとめたアイコン画像のことです。

faviconの作成方法

faviconを作成していきます。（画像の作成にはphotoshopを使用しました。）

1、16px×16px、32px×32pxのpng画像を作成します。

背景は透過させ、png形式で書き出します。（ファイル名は任意でOKです。）
背景を透過させていないと、下記右側のように背景色が浮きでてしまいますので注意してください。（わかりやすい色にしています。）

2、拡張子を「.ico」へ変換します。
「.png」形式だと対応していないブラウザ（主にIE）があるので、「.ico」へ変換します。今回は下記サイトを使用し、変換しました。

■ファビコン favicon.icoを作ろう!
http://ao-system.net/favicon/

まずは先程作成した画像をそれぞれサイトにアップロードします。
アップロードできたら「favicon.icoを作成」ボタンをクリック。

画像がアップロードされ、上記で「a」になっていた部分が猿の画像に変わりました。

さらにページの下を見てみるとプレビュー画面がでています。

確認ができたら「ダウンロード」ボタンを押して、icoファイル（favicon.ico）をダウンロードします。
これでfavicon画像ファイル作成完了です。

■もっと細かいサイズ指定をしたい方はこちらのサイトがおすすめです。
http://ao-system.net/alphaicon/

faviconの設置方法

先程作成したfavicon.icoファイルをサーバーにアップします。

ドキュメントルート（一番上の階層）に「favicon.ico」を設置すればファイルが認識されます。そして、htmlのhead内に下記記述をし、ファイルを指定します。

<link href="favicon.ico" rel="shortcut icon" /> 
<link href="apple-touch-icon.png"　rel="apple-touch-icon" >

ディレクトリごとに別のfaviconを表示させたい場合は、それぞれのfaviconを指定して記述します。(URLは適宜変更して下さい)

<link rel=”shortcut icon” href=”ファイルのパス1/favicon.ico” />
<link rel=”shortcut icon” href=”ファイルのパス2/favicon.ico” /> 

これでfavicon設置の完了です。

ウェブクリップアイコンを設置しよう

続いてはiPhone、iPad、Androidなどのスマートフォンやタブレットでホーム画面にブックマークをした時に表示されるアイコン「ウェブクリップアイコン」の設置方法の紹介です。

こちらはアイコンの指定をしていないと、サイトページのスクリーンショットがアイコン画像に使用されてしまいますのでしっかり設定しておきたいですね。

ウェブクリップアイコンのサイズと作成

• ウェブクリップアイコンのサイズ
• ・114px×114px　　iPhone、iPod touch
• ・144px×144px　　iPad

144px×144px以上の正方形で作っておけばデバイスに応じて縮小され、表示してくれます。faviconのように、ico変換しなくてもiPhoneやiPadが自動的に角丸のアイコンに変換してくれるので四角い画像のままでOKです。

フォーマットはpng形式にて画像を作成します。画像名は任意でOKです。

ウェブクリップアイコンの設置方法

作成したpng画像をサーバーにアップします。

faviconと同様、ドキュメントルート（一番上の階層）に画像を格納します。
htmlのhead内に下記のような記述をし、ファイルを指定します。

head内に下記のような記述を指定。

<link rel="apple-touch-icon" href="画像のパス"> 

これだけで、ウェブクリップアイコンが適応されます！

過去に作ったサイトなど、見直して設置しておきたいですね。