目次
ファビコン（favicon）とは
ファビコン（favicon）は、ウェブページのシンボル的な意味合いを持つ小さな画像のことです。
favorite icon（フェイバリット・アイコン）の略で、元々は「お気に入りアイコン」と言う意味でした。
ファビコンが表示される場所
ファビコンはさまざまな場所に表示されます。
- ブラウザのタブ
- ブラウザのお気に入り（ブックマーク）メニュー
- ショートカットファイル
ブラウザのタブ
ウェブサイトを閲覧しているときに、ブラウザタブの左上に表示されます。
サイトのタイトルと同時に表示され、目にする機会も多いので、サイトの印象付ける重要な要素の一つになります。
お気に入り（ブックマーク）メニュー
よく使うサイトをお気に入り（ブックマーク）に登録した際にも、サイトのタイトルとともにファビコンが保存されます。
こちらもよく目にするものなので、しっかりファビコンを設定しておきましょう。
ファビコンが表示されます。
ショートカットファイル
パソコンの場合は、アドレス欄の左端にある錠前🔒のマークをデスクトップなどへドラッグすればショートカットアイコンを作れます。
スマートフォンの場合も同様に、ホーム画面にショートカットアイコンを作れます（Google Chromeの場合、ブラウザ右上の設定ボタン「⋮」→「ホーム画面に追加」など）。
これらショートカットアイコンにもファビコンが表示されます。
ファビコン画像の大きさ
ファビコンのサイズは場所によって異なります。代表的なサイズとしては、ブラウザのタブに表示されるものが 16px × 16px、パソコンのショートカットファイルに表示されるものが 32px × 32px です。
16px x 16px 原寸大
とても小さな画像ですね！
ただし、最近のスマートフォン（iPhone）などは非常に高精細なディスプレイを備えているので、ファビコンのサイズも 180px × 180px といった大きなものが使用される場合があります。（もしサイズの小さいファビコンしか用意していない場合は、自動的に拡大されて表示されますが、若干シャープさに欠ける表示になることでしょう）
さまざまなファビコンのサイズ
| サイズ | 用途 |
|---|---|
| 16px × 16px | 標準的なファビコン |
| 32px × 32px | ショートカット用ファビコン |
| 96px × 96px | ショートカット用ファビコン（大アイコン等） |
| 180px × 180px | Apple デバイス（iPad）用ファビコン |
| 256px × 256px | Android ホーム画面表示用ファビコン |
いずれも正方形なサイズとなっています。
ファビコンのデータ形式
ファビコンは ICO 形式（拡張子は .ico）で作成する必要があります。
特別なデータ形式なので、ICO 形式でデータをセーブできるアプリか、何らかのウェブサービスなどが必要になります。
詳しくは下記の「ファビコンの作り方」を参照してください。
ファビコンの作り方
ファビコンを作る方法はいくつかあります。
マウス等で描く
favicon.cc
favicon.cc は海外のファビコン作成ページです。会員登録やアプリのダウンロードなどが必要なく、誰でも無料ですぐにファビコンを作ることができます。とても手軽です。
ファビコンの作成には、使用するカラーを選択し、ページ中央にある枠内にマウスでなぞって作成します。
「Download Favicon」ボタンを押せば、描いたファビコンを .ico ファイルとしてダウンロードできます。
準備の必要がなく、すぐに作り始められるので、スピーディーな制作をしたい場合におすすめです。
画像ファイルを用意してファビコンに変換する
まずファビコンに用いる画像を作ってから、ICO 形式に変換する方法です。
まず絵を描きます。
Windows に最初から入っているアプリとしては「ペイント」があります。
大学のパソコンには「paint.net」というフリーのお絵描きアプリもインストールされています。
その他何でも良いので、好きなアプリを使って画像を作りましょう。
そして一旦 PNG 形式などで保存します。
その後、専用のアプリや、Webサービスに作った画像ファイルを読み込ませて、ICO 形式に変換を行います。
以下のサイトやアプリで変換を行えます。
favicon-generator
Favicon generator も海外のファビコン作成ページです。
このページも、会員登録やアプリのダウンロードなどが必要ありません。
「参照」ボタンを押して手持ちの画像ファイルを読み込ませた後、「create favicon」ボタンを押せば ICO 形式のファイルを出力してくれます。
@icon
@icon は Windows 専用のアプリです。パソコン上にインストールする必要があります。
読み込める画像形式は BMP ICO PNG PSD EXE DLL ICL の7種類に対応しており、BMP ICO PNG ICL の4形式でデータをセーブできます（もちろん ICO を選ぶことでファビコンを作れます）。
アプリ上でアイコンを描くことはできないので、あらかじめ画像ファイルを用意し、@icon に読み込ませて ICO 形式でセーブをしましょう。
ICO ファイルには、複数の画像をまとめて一つのファイルに保管しておける「マルチアイコン」機能があるので、@icon では 16px x 16px、32px x 32px といった複数の大きさの画像をまとめて一つにセーブしておけます。
その場合、ファビコンとして使用する際に最適なサイズの画像が自動的に選ばれます。大きめのファビコンをあらかじめ用意しておけば、スマートフォンでショートカットアイコンを作った場合などでも美しい表示を実現できるでしょう。
ファビコンの設置
ICO 形式のファイルが作成できたら、あとは簡単です。
ウェブサーバーの公開用スペース内に、作成した ICO ファイルを置いておくだけです。
サイトの最上位のフォルダ（ルートディレクトリ）に配置しておけば、それ以下の全てのフォルダでファビコンが有効になります。
MicroApache の場合は htdocs フォルダ内に配置してください。
ファイル名を favicon.ico にしておけば、自動的にファビコンとして読み取られて使用されます。
favicon.ico を配置する任意のファビコンを指定する方法
たとえば特定のページでは別のファビコンを使いたい、あるいは、別のファイル名のファビコンを使いたい場合があるかもしれません。
そのような場合は、HTML ファイルの <head>～</head> の範囲内に、以下のような <link> タグを追記しましょう。例えば myhome.ico を使いたい場合は以下のようになります。
<head> ： <link rel="icon" href="myhome.ico"> ： </head>
このように記述することで、そのページでは指定した .ico ファイルが読み取られてファビコンになります。
昔ながらの書き方
Internet Explorer などで使用できる、昔ながらの書き方としては、以下のような記述方法もあります。
最新のブラウザであっても、このような古い書き方に対応しています。よってより幅広い環境でファビコンが使用できるよう、あえて古い書き方をする場合もあります。
<head> ： <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> ： </head>
さまざまなサイズのファビコンを設定する
異なる環境に対応できるよう、PNG形式でいろいろなサイズのファビコンを用意することもできます。
以下のような書き方があります。
必要に応じて最適なサイズのものが自動的に選ばれます。
<head> ： <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"> ： </head>
ファビコンが表示されない場合
ファビコンを設置したはずなのに表示されない場合、いくつかの対処方法を試してみましょう。
- ファビコンのデータ形式が
ICO形式になっているかを確認 - ブラウザのキャッシュを削除
現代のモダンなブラウザでは、ファビコン画像のデータ形式は PNG や JPG、SVG（ベクターグラフィックス）形式といったさまざまな形式に対応していますが、環境によっては元々使われていたデータ形式である ICO 形式でないと表示されない場合があるようです。そのため、ファビコンで利用している画像形式が ICO であるかを確認してください。（もちろん拡張子を無理やり変えただけではダメで、ICO 形式でデータを出力できるアプリやサービスを介してデータ出力する必要があります）
ブラウザのキャッシュとは、閲覧したウェブサイトのデータを一時的に記憶しておき、次に同じページを表示するときに高速で処理するための仕組みです。ただし、過去のデータが記憶されているせいで、ファビコンを変更しても過去のデータが表示されて最新の内容が反映されない場合があります。
もし新しいファビコンが反映されない場合は、一度ブラウザのキャッシュを削除してリロードしましょう。ページのすべてのデータが読み直され、最新の内容が反映されるはずです。
Windows の場合、Shift+F5 キーを押すか、Shift+
（更新）ボタン をクリックすればキャッシュ削除しつつリロードを行えます。
ファビコンのデザインについて
シンプルなデザインにする
ファビコンはサイズが非常に小さいので、細かいデザインをしてもよく見えません。
小さくても分かるように、一目で認識できるようなシンプルなデザインがおすすめです。
ロゴの一部を使用したり、使用する色を数色に抑えるなどするのも良い方法と言えます。
文字を描く場合も１～２文字程度が限界かと思われます。
組織のイメージとリンクしたデザインにする
たとえば会社の場合ロゴを引用したり、コーポレートカラー1)を利用することで、自社サイトのファビコンである印象を強く残すことができます。
デザインに困った時は、無理に何かを描くより、サイトのイメージカラーだけでシンプルに作っても良いかもしれません。 枠を付けたり丸にしたりするだけでも意外と個性が感じられる場合があります。
背景は透過させる
たとえば丸いファビコンを作った場合、背景が白いと目立ってしまい、なんだか残念な感じに見えてしまうでしょう。ダークモードで見ている場合はとくに白い背景が目立ってしまいます。
右：背景が透過（透明）なファビコン
特別なデザイン上の理由がない限り、背景の余白部分は透過（透明）に設定したほうが高級感を醸し出せるでしょう。
あるいは、使える面積を全て使った四角いデザインにしてしまう手もあります。
ドット単位で修正
大きな画像を縮小してファビコンを作ることもできますが、ドット単位で修正する「ひと手間」をかけることではっきりしたきれいなアイコンになるでしょう。
元画像／縮小版／修正版
ぼやけた部分を無くし、輪郭を強調する感じに修正すると良いでしょう。
参考にしてください！😋
