本記事では通常のファビコン作成方法から、誰でも簡単にファビコン作成できる方法について解説していきます。ファビコンを設置されていない方は、ぜひ参考にしてみてください。
ファビコンとは？
ファビコンは「Favorite icon（お気に入りのアイコン）」が派生したIT用語でウェブサイトやウェブページに関連付けられたアイコンを指します。ブラウザのブックマークや、Webブラウザでタブを開いたときに表示され、ページを判別する際の目印となります。
タブを開きすぎた際の目印としてはもちろん、お気に入りに登録した際にも、ファビコンがあるのと無いのとでは印象が異なります。最近ではスマートフォンのホーム画面などのショートカットとしても表示されうます。このようにファビコンはWebサイトを端的に表現してくれる存在であり、設置は必須と考えてよいでしょう。
必要なファビコンのサイズ
ファビコンのサイズはブラウザやデバイスによって変わります。通常は「16px × 16px」ですが、表示される場所やブラウザの種類によっては「32px × 32px」で使用されることがあります。
ブラウザ上だけであれば上記のサイズで十分ですが、デスクトップ・スマートフォンなどの対応を考慮すると、様々なサイズのアイコンを準備する必要があります。
ここでは最低限用意しておくべきサイズをいくつか紹介します。
| 種類 | サイズ |
|---|---|
| Internet Explorerのタブ | 16px × 16px |
| 各種ブラウザなどのタブ | 32px × 32px |
| iOS、 Androidのホーム画面など | 180px × 180px |
| Android、Chromeのホーム画面など | 192px × 192px |
その他のアイコンサイズが無くても、基本的にはブラウザやOSが自動で拡大・縮小して表示させてくれます。
ファビコン形式とサイズについて
ファビコンのファイル形式はico・png・gif形式に対応しています。IE用として.icoと、その他のブラウザ用として.pngのファビコンを作成しましょう。
たくさん準備するのは大変ですが、1枚の画像を準備するだけで、必要なサイズのファビコンへと変換できるWebサービスが数多く存在しているので、そちらを活用して作成していきましょう。
簡単にファビコンを作成できるツール
favicon.cc
ファビコン作成だけでなくジェネレートも可能なツールです。アニメーションも可能でリアルタイムにブラウザのアドレスバーに表示したプレビューが確認しながら作成できるので使いやすいです。
Xiconeditor.com
鉛筆、ブラシ、テキスト、などの描く上でのツールが豊富で使いやすいです。
