ファビコンが16ピクセル四方1枚で済んだのは、もう何年も前の話です。今のサイトは、タブ、Windowsのショートカット、iPhoneのホーム画面、Androidのインストール案内のためにいくつものサイズと、それらを指すマークアップを必要とします。このページは、その全部を画像1枚から、あなたのブラウザーの中で作ります。

使い方

1. 1 正方形の画像をドロップします。できれば512 px以上。
2. 2 プレビューで各サイズを確認し、透過がある画像なら背景色を決めます。
3. 3 zipをダウンロードし、サイトのルートに展開して、HTMLを貼り付けます。

ロゴではなく16ピクセルに合わせて作る

タブの大きさでは、ファビコンはこのページの句点ほどの幅しかありません。文字のロゴは灰色のにじみになり、細い線は跡形もなく消えます。この縮尺を生き延びるのは、1文字、単純な図形、あるいはロゴのいちばん特徴的な一部です。ロゴ全体が生き延びることは、ほぼありません。

PNGで十分、ICOは名残

今使われているブラウザーはどれもPNGのファビコンを読みます。つまりPNGファイル一式と正しいlinkタグがあれば、ウェブは足ります。.icoという入れ物があるのは、Internet Explorerがサイトのルートでそれを探したからです。よほど古い環境に合わせる必要がなければ、省いて構いません。

透過はスマホでは振る舞いが違う

ブラウザーのタブでは、透過のアイコンはテーマの背景にうまく馴染みます。ところがiPhoneのホーム画面では、同じファイルの背後に真っ黒な四角が敷かれます。iOSがそこでは透過を合成しないからです。背景色を決めておけば、どちらでも意図した見た目になります。

ブラウザーが古いままを表示する理由

ファビコンは強く、しかも長くキャッシュされ、通常の再読み込みでは変わらないこともあります。まずアイコンのファイルを直接開いて、新しいものが本当に置かれているか確かめ、それからプライベートウィンドウで見てください。確実に更新させるなら、ファイル名を変えるか、名前にバージョンを付けるのが早道です。