クリエイティブなファビコンを設置しよう
Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！
ファビコンをデザインする
ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。
多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、Apple、Twitterなど、ロゴマークの認知度が高いブランドほど、ファビコンにした時でもそのシンプルさが生かされています。
では、ロゴが複雑なデザインだったり、長方形の場合はどうすればいいでしょうか？単純に縮小しただけでは、なんのサイトなのかわかりづらいですよね。YouTubeのロゴはテキストのみのデザインですが、ファビコンにはテーマカラーの赤を使って再生ボタンを採用。Nintendoのロゴも同様にテキストのみですが、ファビコンではトレードマークでもあるマリオのドット絵を使っています。このようにロゴを簡略化するだけではわかりづらい場合は、そのブランドを連想させる代わりのアイコンでもOK。
サイズ制限がある分、テーマカラーを利用したり、シンプルな図形を使ってわかりやすくデザインすることがポイントです。
ファビコンのファイルを用意する
デザインが完成したら、ファビコン用のファイルを作成します。デバイスによってはPNG画像だけで表示されますが、Webサイト（IE）には昔ながらの .ico 形式のものも用意しておきましょう。
オンラインジェネレーター
JPGやPNG等の形式からICO形式に変換するには、オンラインジェネレーターが便利。数あるファビコンジェネレーターのサイトの中でも有名ドコロはこちらのFavIcon Generator。gif、jpg、png、bmp形式のファイルをアップロードすると16×16、オプションで32×32と48×48のサイズの .ico ファイルがダウンロードできます。
Macならプレビューアプリで
オンラインジェネレーターを使わなくても、Macならプリインストールされているプレビューというアプリで簡単に .ico 画像が生成できます。まずは元のファビコン画像（PNG形式等）をプレビューで開きます。そしてメニューの ファイル ＞ 書き出す をクリック。
フォーマットの選択ができるのですが、通常だとICO形式が選択できません。
そこで alt キーを押しながら再度フォーマットのセレクトメニューをクリック。選択できるフォーマットの数が増えています。その中から「Microsoft アイコン」を選択して保存すると、.ico の画像が保存されています。簡単ですね！
ファビコンの設置方法
これまでの流れでファビコン画像が準備できたと思います。それではその画像を実際にWebサイトで表示できるようにしましょう。以下のコードを <head>〜</head> 内に記述します。
まずは昔ながらのファビコン指定コード。主にIE。
1 | <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> |
高解像度ディスプレイや異なるデバイスに合わせてPNG形式でサイズいろいろ。
1 2 3 | <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> |
iOSのホームスクリーン用。
1 2 3 4 5 6 7 8 9 | <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
AndroidのChrome用コードはこちら。
1 | <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> |
そしてWindows 8のタイル用。
1 2 3 4 | <link rel="manifest" href="/manifest.json"><meta name="msapplication-TileColor" content="#ffcc22"><meta name="msapplication-TileImage" content="/mstile-144x144.png"><meta name="theme-color" content="#ffffff"> |
何個あるんだようわあああああああああああ！！！
そんなあなたをお助けする「Real Favicon Generator」
画像をすべて作るのがめんどう！コードの記述もめんどう！そんな時はこちらのReal Favicon Generatorに頼っちゃいましょう。このサイトに260×260以上の画像ファイルを指定すると、デスクトップのWebサイト用ファビコンだけでなく、モバイルのホームスクリーン、Windows 8のタイル、タスクバー用の画像も一度に生成してくれます。いつもお世話になってます！デモ画面では実際にどのように表示されるのかが一目瞭然。エラーがある場合も教えてくれますよ。「Select your Favicon picture」をクリックしてスタート。
WordPressサイトには同サイトのプラグインもリリースされています。コードも自動生成してくれるのでとっても便利。
機能付きファビコン
ここまで一般的なファビコンについて説明しましたが、他にも様々な機能のついたファビコンを設置しているWebサイトがあります。Webサービス等で利用するといいかも。
Trello
Todoリスト管理サービスのTrelloでは、各ボードによって背景色をカスタマイズでき、その設定した背景色にあわせてファビコンの色も変わります。
そして自分あてにメッセージやTodoが割り振られると赤いマークがつきます。
Slack
チャットアプリのSlackも同様にDMが届くと赤いマークでお知らせしてくれます。この画像では左のファビコンが通常のもの、右のファビコンが未読メッセージがある時のものです。このようにメッセージ機能のついたサービスでは頻繁に見られる機能ですね。
GitHub
GitHubではシステムステータスによってファビコンの色が変化します。
Googleカレンダー
Googleカレンダーでは今日の日付がファビコンで表示されます。
動的機能をファビコンに実装するためのJavaScriptライブラリー
上記で紹介したような機能のついたファビコンも、JavaScriptライブラリーを使えば手軽に実装できます。
Tinycon
GitHub｜デモ
ファビコンに数字のついたアイコンをつけられるライブラリー。色やフォントの変更もOK。
favico.js
GitHub｜デモ
数値が変更する時のアニメーションやアイコンの位置、形なども変更可能。ファビコンを動画やWebカメラのものにすることもできるようです。
Piecon
GitHub｜デモ
ファビコンを時間とともに変化する円グラフにできます。色などは変更可能。ダウンロード中・アップロード中などの表現に使えそうですね。
たかがファビコン、されどファビコン。小さなアイコンながら機能するデザインとしてサイトを彩ってくれるでしょう。Webベースで運営しているサービスも増えているので、ここで紹介したような小さな気配りができるといいですね。
