2019年2月16日、本サイト「烏合総合研究所」は、スターサーバーフリーへ移行した。それにともない、faviconとWebクリップアイコンを設置してみたのだが、なかなか思ったようにいかず、少々苦労することになった。インターネット上の記事を参考にしてみたものの、いまでもHTMLをテキストエディタで書いているような本サイトの管理人にはいまひとつ理解できなかったのだ。本稿は、そんな残念な管理人の備忘録である。
faviconとは、シンボルマークとしてWebサイトに設置するアイコンである。ブラウザのブックマーク（お気に入り）やアドレスバー、タブに表示される。ほかのWebサイトと区別しやすくなるので、ブックマークから目的のサイトを探したり、タブの切り替えが容易になる効果が期待できる。favorite iconを縮めてfaviconというらしい。
faviconの例1（茨城県公式ホームページ）
faviconの例2（茨城県公式ホームページ）
実体は画像ファイルである。環境（OSやブラウザ）毎に最適なサイズが異なるので、それぞれに対応した画像を複数準備し、それらをひとまとめにしたICO形式がよく使われる。PNG形式やGIF形式も使えるが、古いブラウザでは表示できない場合がある。link要素で指定し、rel属性はiconとなる。
Webクリップアイコンとは、iPhoneやiPad、Androidでホーム画面にショートカットを作成したときに表示されるアイコンである。faviconと同様、ほかのWebサイトと区別しやすくなり、自分のWebサイトを目立たせる効果が期待できる。Webサイトのショートカットをホーム画面に追加することをWebクリップというので、Webクリップアイコンというらしい。
Webクリップアイコンの例（茨城県公式ホームページ）
faviconと同じく実体は画像ファイルで、環境毎に最適なサイズが異なる。画像フォーマットはPNG形式が一般的だ。HTML5では正式に定義されておらず、スマートフォン向けの独自機能のようだ。link要素で指定し、rel属性はapple-touch-iconとなる。
まず、favicon、Webクリップアイコンのもとになる画像を準備する。別々の画像としてもよいが、Webサイトのシンボルマークという役割を考えると、同じ画像を使うべきだろう。基本的に正方形である。
次に、この画像を想定する閲覧環境に最適なサイズにリサイズする。環境毎に最適サイズは異なるので、想定する閲覧環境が複数ある場合は、それぞれにあわせてリサイズした画像を作成する。favicon、Webクリップアイコンともに複数の画像を指定できるので、必ずしも画像サイズをひとつにそろえる必要はない。
favicon用にリサイズした画像はICO形式に変換する。画像が複数ある場合は、ひとまとめにしてマルチアイコン化しておく。Webクリップアイコン用の画像はPNG形式に変換する。PNG形式は画像をまとめることができないので、画像が複数ある場合は、HTML内でひとつずつ個別に指定する。
これらの画像ファイルをWebサイトのサーバへ転送したら、HTMLファイル内でそれぞれの位置とファイル名を指定する。faviconは、「favicon.ico」としてルートディレクトリに置くだけでほとんどのブラウザで機能するので、面倒ならこれで済ませてもよい。
もとになる画像はMicrosoft ペイントで作成した。単色でなるべく均等に正方形を埋めることを意識し、楕円と直線のみで構成した。前者はアイコンとしての視覚性、後者は将来のサイズ変更に対応させやすくするためである。
サイズは192px×192pxで、リサイズせずにWebクリップアイコンとした。192px×192pxとした理由は作成しやすい大きさというだけで、Webクリップアイコンの仕様としての根拠はない。
もとになる画像（作成中）
もとになる画像
この画像を修正し、IrfanView32で透過PNGに変換したものがWebクリップアイコンとなる。ファイル名は「android-icon.png」とした。
Webクリップアイコン
また、もとになる画像をIrFanView32で16px×16px、32px×32px、48px×48px、64px×64px、128px×128pxにリサイズしてPNG形式に変換したものをfavicon用の画像とした。画像のサイズは、これが現時点の最大公約数だろうと独断で決めた。Webクリップアイコンと同様、背景色を透過させている。
favicon用の画像
これを@icon変換でマルチアイコン化したものがfaviconになる。ファイル名は「favicon.ico」とした。
@icon変換によるマルチアイコン化
「favicon.ico」はWebサイトのルートディレクトリに、「android-icon.png」はルート直下のimgディレクトリに設置した。実体としてのfavicon、Webクリップアイコンの準備はこれで完了である。
あとはHTMLファイルにこれらの位置とファイル名を追記すればよい。前述のようにfaviconは指定しなくても機能するはずだが、念のため指定した。例として、インデックスページ（index.html）への記述は次のようになる。
<head>
:
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64 128x128">
<link rel="apple-touch-icon" type="image/png" href="img/android-icon.png" sizes="192x192">
:
</head>
ルートディレクトリ以外にあるHTMLファイルでは、パスを適切に書き換えてやればよい。すべてのHTMLファイルを手動で書き換えるのは大変なので、なにかツールを使うのがよいだろう。当研究所ではMultiReplaceを利用した。
PC上のブラウザでの動作は、Windows 10上のChrome（バージョン72.0.3626.121）とMicrosoft Edge（バージョン44.17763.1.0）、Windows 7上のInternet Explorer 11（バージョン11.0.110）で確認した。タブとブックマーク（お気に入り）に設定したアイコンが表示されており、faviconはきちんと機能するようだ。ショートカットやトップページにもアイコンが反映されている。
Chromeのタブ（Windows 10）
Chromeのブックマーク（Windows 10）
Chromeのショートカット（Windows 10）
Microsoft Edgeのタブ（Windows 10）
Microsoft Edgeのお気に入り（Windows 10）
Microsoft Edgeのトップサイト（Windows 10）
Internet Explorer 11のタブ（Windows 7）
Internet Explorer 11のブックマーク（Windows 7）
Windows 10のスタート画面やタスクバーのピン留めにもアイコンが反映された。Webクリップも機能としては問題ないが、配色が微妙である。輪郭を縁取りしたりすれば目立つのかもしれないが、面倒なのでそままにしてある。
スタートアップへのピン留め（Windows 10）
タスクバーへのピン留め（Windows 10）
Webクリップ（Windows 10）
Androidでの動作は、HUAWEI MediaPad T3 7上のChrome（バージョン73.0.3683.75）で確認した。タブ、ブックマーク、ホーム画面、ドロワーのいずれでも設定したアイコンが表示され、favicon、Webクリップアイコンともに機能している。
Chromeのタブ（Android）
Chromeのブックマーク（Android）
Chromeのショートカット（Android）
ホーム画面（Android）
ドロワー（Android）
iOSに関しては、当研究所には確認できる環境がないので試していない。
faviconとWebクリップアイコンの実装で、個人サイトとしてはそれなりの体裁が整ったと自負している。2017年11月から続けてきたWebサイトのリニューアルはこれでほぼ完了だ。今後は記事の充実に力を入れていきたい。
HTML 5.2 W3C Recommendation, 14 December 2017
https://www.w3.org/TR/html52/（2019年3月20日参照）
TAG index
https://www.tagindex.com/（2019年3月20日参照）