ファビコンは、タブやアドレスバーに表示されるサイトアイコンのことで、この表示によって、ユーザーは「視覚的」にサイトを認識することが出来るので、とても重要な役割を担っています。
ここでは、ファビコンの一般知識をザックリと解説したうえで、ファビコンを簡単に設置できる方法をご紹介します。
ファビコンとは
ファビコンとは、タブやブックマークなどに表示されるサイトアイコンのことで、サイトのブランディングやユーザビリティの向上に役立てることが出来ます。
ファビコンの基本知識
ファビコンに使う素材
ファビコンのサイズ
ファビコンは、ブラウザやデバイスによって表示(サイズ)が異なるので、基本的には以下のサイズを用意する必要があります。
- 16×16ピクセル（IEのタブ）
- 32×32ピクセル（Chrome・Firefox・Safariなどのタブ）
ファビコンのファイル形式
ファビコンは、背景に色がついていると不自然なので、画像ファイルの拡張子が「png」や「gif」など、背景が透過する画像(ファイル形式)を作成するのがポイントになります。
なお、ファビコンを設置する際は、基本的にはファイルの拡張子が「ico」(マルチアイコン)の形式でアップロードする必要があります。
この点は、他のファイル形式をicoファイルに変換するオンラインジェネレーターもあるので、自分でファビコン画像を作成する際は、以下の無料ツールを有効に活用しましょう。
FavIcon Generator
マルチアイコン作成
ファビコン favicon.icoを作ろう!
ファビコンの作成
ファビコンは、ペイントソフトなどを使ってオリジナルのものを作成することが理想ですが、そこまで手間をかけたくない方は、フリー素材を活用した方法をおススメします。
ファビコン作成におススメのフリー素材サイトは、次の２サイトになります。
- ICOON MONO
- freefavicon.com
１．ICOOON MONO
『ICOOON MONO』は、シンプルで洗練されたアイコン素材を6000以上ストックしているフリー素材サイトで、色やサイズを指定してダウンロードすることが出来ます。
２．freefavicon.com
『freefavicon.com』は、ファビコン用のアイコン素材を13000以上ストックしているフリー素材サイトで、オンラインで素材を編集できる「アイコンメーカー」も備えています。
ファビコンの設置
ファビコンは、テーマファイルに直接追記したりプラグインを使って設置するともできますが、ここでは、WordPessの基本機能を使った設置方法をご紹介します。
この方法を利用すれば、お好みの画像(512×512ピクセル以上の正方形)を用意すればいいだけなので、icoファイルの作成やテンプレートの編集が不要です。
WordPressのサイトアイコン機能
これは、「WordPress 4.3」以降に実装された機能で、画像をアップロードするだけで簡単にファビコンを設置することが出来る機能です。
[外観]メニューにある[カスタマイズ]を開きます。
[サイト基本設定・ロゴ画像]を開きます。
メニューを下にスクロールし、「サイトアイコン」の項目にある[画像を選択]をクリックして、ファビコンに使う画像(512×512ピクセル以上の正方形)を選択します。
プレビューを確認し、よければ[公開]をクリックして設定を保存します。
これで、ファビコンの設置が完了です。
「Webページのタブ」と「ブックマーク」の両方にきちんと表示されました。
