ファビコンという言葉を聞いたことがありますか？
ファビコンはアイコン1つでサイト全体のイメージを表す重要な要素です。
ファビコン（サイトアイコン）を設定して、サイトの完成度を一段引き上げましょう。
⇒CSSでアニメーション表現の作り方。サイトデザインをリッチにしよう
目次
ファビコンとは？
ファビコンとは一言で言えば、サイト全体を表すイメージ画像のことです。
お気に入り登録をしたときに表示されるアイコンという意味でfavorite icon（お気に入りのアイコン）を縮め、faviconと呼ばれるようになりました。
別名ブログアイコンという名称で呼ばれることもあります。
ファビコンが現れる場所は主に次の4つです。
・ブラウザタブでサイト名の横に表示される
・ブックマークをしたとき、サイト名と一緒に表示される
・スマホサイトの検索結果に表れる
・スマホでサイトをホーム画面に追加したときのアイコンになる
ファビコンはサイトの中で使われているアイコンとは違い、サイトの外側に表示される物です。
そのため頑張ってWEBデザインを作っていても、ファビコンの設定はついつい忘れがちになってしまいます。
しかし、ファビコンを設定することはいくつものメリットがあります。
まず、どのようなサイトかを視覚的にユーザーに伝えることができる点です。
ファビコンが設定されていないサイトは、数多くのブラウザタブやブックマークの中で埋もれてしまいがちです。
一方ファビコン付きのサイトは目立つので、ユーザーの再訪問率を高めることができるのです。
またファビコンが設定されているサイトは、作りこまれたデザインというイメージを与えることができます。
逆にファビコンが設定されていないと、なんとなくサイトの作りが荒く感じられるものです。
配慮が行き届いたサイトデザインを目指すなら、ファビコンは重要な要素です。
ファビコンを設置することで、ブランドイメージをアピールできるというメリットもあります。
大企業の公式ホームページを見てみると、ブランドロゴがそのままファビコンに使われているのが分かると思います。
ファビコンを目にする機会は案外多いものです。ブランドロゴを印象付ける1つの手段として、ファビコンは有効に使えます。
このようにファビコンの設置するメリットは大きいものです。Webデザインをする際は、最後の詰めとしてファビコンの設置を忘れないようにしましょう。
ファビコンの作り方
では、実際にファビコンを作ってみましょう。
ファビコンはico、png、gif等のファイル形式で作るのが主流です。
古いブラウザも含めて対応させたい場合はico形式で作るのがお勧めです。
ico形式は通常の画像ソフトで作ることが難しいため、一度pngやgifなどでファビコンをデザインしてから、変換ツールでico形式にするとよいでしょう。
変換ツールには様々なものがあり、無料で使えることも多いです。
「ファビコン 作成 無料」と検索すればいろいろなツールが出てきます。
ファイル形式を変換するだけではなく、一からファビコンを作れるサービスもあります。
なおファビコンを製作する上の注意点を３つあげておきます。
複雑な物は作らない
ファビコンはとても小さいものです。複雑なデザインだと形がつぶれてしまい、何を表しているのか分からなくなる可能性があります。
サイトのイメージにあった物にする
ファビコンはサイトのイメージを代表する存在です。1目でどのようなサイトか分かるものが理想的です。
目立つようにする
他のサイトや背景色に埋もれてしまわないよう、目立つデザインの物を作りましょう。
ファビコンを設置してみよう
ファビコンができたら、早速サイトに設置してみましょう。
HTMLでファビコンを設定する
まずファビコンのファイルをサーバーにアップロードすることが必要です。
アップロード出来たら、サーバー上の画像アドレス（URL）を取得し、headタグ内に以下のように書き込みます（ファビコンを設置したURLは固定し、できるだけ変更しないようにしましょう）。
- <link rel=”icon” href=”ファビコンのURL”>
（Internet Explorer11以上に対応した書き方です）
relにはicon以外にも、以下のキーワードを指定できます。
・apple-touch-icon
スマホやタブレットでWebページをホーム画面に追加したときのアイコンを指定
・shortcut icon
Internet Explorer8以下の古いブラウザにも対応したいとき（この場合、ファビコンの形式はico限定）
またファビコンの形式にico以外のファイル形式を使いたい場合は、linkの記述が少し長くなります。
pngのとき
- <link rel=”icon” type=”image/png” href=”○○.png”>
gifのとき
- <link rel=”icon” type=”image/gif” href=”○○.gif”>
WordPressでファビコンを設定する
サイトをWordPressを使って運営している場合、ファビコンの設置はもっと簡単に行えます。
では、実際にWordPress運営サイトにファビコンを設置する方法を見ていきましょう。
まず、ファビコンの元になるファイルを作ります。WordPressでのファビコンの推奨サイズは512×512ピクセル以上の正方形です。
ico形式だけでなく、png形式でもOKです。
次に、WordPressの管理画面に行き、「外観」→「カスタマイズ」を選択します。
開いたメニュー画面の中から「サイト基本情報」を選択します。
「サイトアイコン」という項目の中の「サイトアイコンを選択」をクリックします。
ここでサイトアイコンを選択します。アップロード済みの画像か、パソコン内の画像から選ぶことができます。
アイコンを選ぶと、タブアイコンとして使用された場合のプレビュー画面と、「切り抜き」の選択画面が現れます。
切り抜きを行う場合は、中央画像の四隅に現れたハンドルを動かして調整します。最後に画面右下の「画像切り抜き」をクリックします。
これでファビコンの設定ができました。
このようにサイト基本情報からファビコンを追加することで、WordPressのシステムが自動的にheadタグ内にlinkタグを挿入してくれます。
なお上の方法でファビコンの設定ができない場合、WordPressのバージョンが古い可能性が考えられます。
というのも、WordPressにファビコン設置のメニューが作られたのはWordPress 4.3以降だからです。
セキュリティの面からも早めに最新版のWordPressにアップグレードすることをお勧めします。
はてなブログでファビコンを設定する
ブログシステムとして日本国内で広いシェアを誇るのがはてなブログです。はてなブログでもファビコンを簡単に設置できます。
まず、はてなブログで表示するファビコンを作成します。
はてなブログではファビコンの最大サイズは65×65pxの正方形になります。
これより大きい画像は縮小されて表示されます。
ただし、はてなブログのファビコンはスマホのホーム画面設置アイコンとしても使われます。
そのため192×192px以上のサイズで製作しておく方が、いろいろなデバイスに対応できるでしょう。
なお、はてなブログのファビコン設定ではgif形式画像をサポート外にしています。はてなブログで使うファビコンを作るときはgif形式以外で作成してください。
ファビコンができたらはてなブログの管理画面に移行し、「設定」を開きます。
「基本設定」タブの中の「ブログアイコン」メニューから「ファイルを選択」を選び、ファビコンにしたい画像ファイルを開いてください。
最後に、設定画面一番下の「変更する」ボタンをクリックすると、ファビコンが設定されます。
ファビコンは小さいながら、サイトのイメージを背負う大事な存在です。ユーザーの目をひくオリジナルのファビコンを作ってみてください。
