ファビコンについて改めて説明は不要でしょう。
ブラウザのタブについているオリジナルの目印や、スマートフォンのショートカットとして表示されるアレです。
ファビコン ジェネレーターを使おう
必要な画像サイズ バリエーションだけでなく、htmlに入れるコードも生成してくれる至れり尽くせりのサイト「Favicon Generator for all platforms: iOS, Android, PC/Mac…」を使って超簡単にファビコンを設定してしまいましょう。
英語サイトなので、使い方を日本語で説明しますね。
ファビコン ジェネレーターにアクセスする
右側に表示される[Select your Favicon picture] ボタンを押しましょう。
ボタンを押すと、パソコンで元画像を選択するウィンドウが表示されます。
Fabicon を生成するための最小画像サイズは70x70pxですが、元画像のサイズが260x260pxより小さいといくつかのオプション画像が生成されません。
画像をアップロードする
先の手順でアップロードした元画像が260x260pxより小さい場合、上図の確認ウィンドウが表示されます。
Windows 8やIE 11は高解像度のタイルを使用することを推奨していますが、元画像が小さいとこれらのオプションは生成されませんという内容です。
画像を選択しなおす場合は、[Cansel and submit another picture]を押します。
かまわずそのまま進むなら、[Continue with this picture]を選択しましょう。
なお、長方形の元画像をアップロードした場合、余白部分を透明にしてファビコンを生成しますよ、という確認ウィンドウが表示されます。
ファビコン画像を最終調整しよう
iOS用ウェブクリップ、アンドロイド Chrome用ファビコン、Windows Metro用タイル、macOS・サファリ用のファビコンが、サンプル画像とともに表示されます。
それぞれのプラットフォームごとに、ファビコンの見え方を調整できます。
例えば…こんなこと。
Settings
[（Main）settings]： 表示通りそのまま使うなら「No change, keep the master picture as is/」を選択しましょう。
[Add margins and plain background]： マージンサイズや背景色を設定できます。
[Apply a slight drop shadow, …」： Googleの公式アプリのように若干のドロップシャドウを付けることができます。
Windows Metro UIで使われている背景色を付けたり、macOS Safariのモノクローム アイコンを調整したりもできます。
Assets
対象とするプラットフォームのバージョンの詳細を設定できます。
選択肢の詳細は割愛します。詳細を知りたい方は、コメントください。
Dedicated picture
iOSウェブクリップ専用、Android Chrome専用…といった具合に、プラットフォーム専用の画像を選択してファビコンを生成できます。Dedicated pictureタブを開くと表示される青いボタンをクリックしパソコンから画像を選択しなおします。
ファビコン生成のオプションを設定しよう
ファビコン画像最終調整ページの最下部に、「Fabicon Generator Options」があります。
この欄の設定通りに html コードが生成されます。
普通のサイトに普通にファビコンを入れるだけなら、[Path]タブでファビコン画像の保存場所を設定するだけでOKです。
上のラジオボタンは、「ドメイン直下のルートディレクトリにファビコン画像を保存する」という意味です。
ファビコン画像をルート以外のディレクトリに保存する場合は、下のラジオボタンをチェックして、入力フィールドにファビコン画像の保存場所ディレクトリを入力します。
[Generate your Favicons and HTML code] ボタンを押します。
ファビコンファイルのダウンロードとhtmlコードを取得しよう
[Favicon package]ボタンを押すと、ファビコンファイルをダウンロードできます。
ダウンロードしたzipファイルを解凍して、指定したディレクトリにすべてのファイルを保存しましょう。
次に、上図 3.に表示される htmlコードをコピーして、ファビコンを設置するhtmlファイルの<head></head>内にペーストします。
ファビコンファイルとhtmlをサーバにアップロードするのを忘れないでね♪
サーバへアップロードした後ファビコンが正しく表示されるかを確認するには、上図画面 4. の [Check your favicon]ボタンを押しましょう。次に表示される画面で、URLを入力することでファビコンが正しく表示されているか否かを確認できます。
文章で説明すると長いですね。でも、作業時間は3分くらいかな。
以上