faviconの作りかたと設置方法

Faviconの作りかた

最近仕事でFaviconを作って設定したので、今さらですがその時に調べてみました。

Faviconのサイズ

ブラウザのタブやブックマークに表示される16×16サイズで作れば良いかと思っていたのですが、実はFaviconのサイズは3種類あります。

  • 16px×16px
  • 32px×32px
  • 48px×48px

Faviconの表示サイズ

ブックマークには小さいサイズで表示されますが、URLをWindowsのデスクトップに置いた時は32px×32px、エクスプローラーでショートカット(ファイルの種類:インターネットショートカット)を表示したときは48px×48pxとなります。

画像を作成・変換する

Faviconは上記3つのサイズを含んだ.ico形式の画像を用意すればいいのですが、グラフィックソフトでこの形式に対応しているものが少ないため、私は他のフォーマットで作った画像をオンラインで変換する方法を使いました。

他にも色々あると思いますが、使いやすいのでx-icon editorがおすすめです。

※GIFやPNGファイルでもfaviconとして使うことは可能ですが、IEが.icoにしか対応していないため、実質的にはFaviconのフォーマット=.icoと考えたほうが良いでしょう。

.ico形式への画像フォーマット変換方法

.ico画像への変換のしかた

透過PNG作成形式で作ったFavicon用画像をアップロードして、左側の編集ツールで範囲を指定します。右側には色々なサイズが表示されているので、必要なものにチェックをつけてOKを押します。

.ico画像への変換のしかた

アップロードした画像の編集画面になります。もし細かいところを修正したい場合は、画面の左側に描画ツール一式があるので、それを使って画像を編集できます。

faviconのプレビュー

編集が終わったら、画面右下にある「3. Preview」ボタンを押して実際の見た目をプレビューします。
プレビューは別ウインドウで開くので、おかしいところがあれば編集画面に戻って修正もできます。

編集がすべて終わったら、編集画面右下のにある「4. Export」を押してfaviconファイルを保存します。モーダルウインドウが開くので、上にある「Export Your Icon」を押すと自動でダウンロードが始まります。

Faviconとして表示させる

ウェブブラウザの中には、サイトのルートディレクトリにfavicon.icoを置いておくだけで自動的に識別するものもありますが、確実に表示させるには、<head></head>の間に

<link rel=”shortcut icon” href=”favicon.ico”>

と記述します。ファイル名は任意ですので、正しく指定されていればfavicon.icoでなくても構いません。

改めて自分のブックマークを見て見ると、今はほとんどのサイトにFaviconが設定されていて、ブックマークを見る時も無意識のうちにFaviconでサイトを識別しているような気がします。
ブラウザのタブをたくさん開いている時も、Faviconがあればサイトタイトルが見えなくてもわかりやすいので、これからは忘れないで設定しておきたいと思います。

コメントを残す