短い答え
画像→ICO変換ツールを開き、256ピクセル以上の正方形の画像を入れ、プリセットをウェブサイトのファビコンのままにして、favicon.icoをダウンロードします。それをサイトのルートに置き、https://yoursite.com/favicon.icoで応答するようにしてください。このアドレスは、HTMLが言及していてもいなくても、どのブラウザも要求しに来ます。ですから、厳密にはほかにすべきことはありません。
以下は、技術的に存在しているだけのアイコンと、実際に読めるアイコンとの差を生む部分です。どのサイズを入れるのか、iPhoneやAndroidは代わりに何を求めるのか、そしてロゴが横幅16ピクセルに耐えられなかったときにどうするのか。
1枚の画像ではなく、サイズの集合である理由
.icoファイルは入れ物です。その中には、同じものを違う大きさで描いた完全な画像が何枚も入っていて、そのファイルを読む側が、必要な大きさにいちばん近いものを選びます。
無駄に聞こえますが、無駄ではありません。アイコンを16ピクセルで描くブラウザには、選択肢が2つあります。人が描いた16ピクセル版を読むか、より大きなものをその場で縮小するかです。後者のほうが悪いですし、目に見えて悪い。細かいロゴを自動で縮小すればぼやけたかたまりになりますが、人が目で見た16ピクセル版なら、単純にする機会があったということです。この形式が複数のサイズを抱えるのは、まさにその機会を与えるためです。
ウェブサイトでは3つのサイズが慣習で、それぞれに理由があります。
- 16×16。ブラウザのタブ、アドレスバー、ブックマークのメニューです。人が実際に目にするのは、これです。1つだけ正しくできるなら、これを正しくしてください。
- 32×32。ブックマークバー、サイトへのWindowsデスクトップのショートカット、そして高DPI画面のたいていのブラウザです。それらはタブのアイコンを32から描いて縮小します。
- 48×48。Googleが検索結果のサイトアイコンを読む大きさであり、Windowsの中アイコン表示です。
それより大きいものは、.icoの中ではなく、その隣のPNGに置くべきです。理由は、下のモバイル向けファイルのところで出てきます。
16ピクセル問題
ここは誰も警告してくれない部分です。16ピクセルは、ふつうの画面でおよそ4ミリ。全部で256個の点の格子で、この文に含まれる文字より少ないほどです。看板や名刺やウェブサイトのヘッダーで機能するように設計されたものは、そこまで縮められて生き延びることが、ほとんどありません。
消える順に挙げます。
- 文字。正方形に押し込められたワードマークは、高さ3ピクセルほどです。小さな文字になるのではなく、灰色の帯になります。名前だけでなくシンボルも持つ企業のほとんどが、ファビコンにはシンボルだけを使う理由がこれですし、シンボルを持たない企業が1文字だけを使う理由でもあります。
- 細い線。512ピクセルのロゴの1ピクセルの枠線は、16ピクセルでは32分の1ピクセルです。縁に沿った薄い灰色のもやとして描かれるか、消えます。
- グラデーションと影。移り変わるだけの余地がありません。柔らかいドロップシャドウは、汚れた縁になります。
- 細部の中の細部。文字の書かれた書類のアイコンは、しみの付いた長方形になります。
直し方は設定ではなく、別の絵を描くことです。形をひとつかふたつに絞り、コントラストを強くし、1文字を超える文字は入れません。その版を32か48ピクセルで意図して描き、それを元にしてください。
道具にできるのは、公開する前にその問題を見せることです。画像→ICO変換ツールのプレビューは、どのサイズも画面上の実寸で描きます。これを判断する方法は、それしかありません。16ピクセルのアイコンを64で表示しても、見た目は問題なく、何も教えてくれないからです。
ロゴが正方形でない。余白か、切り抜きか
アイコンは常に正方形で、たいていのロゴはそうではないので、何かが起きるしかありません。答えは3つあり、その良し悪しは同じではありません。
余白は画像全体を残し、上下に空きを作ります。安全な既定値であり、横長のワードマークには間違った選択です。縦の3倍の横幅を持つものを正方形に収めれば、高さの3分の1を占めるにとどまります。16ピクセルなら、ロゴが5ピクセルで、何もない部分が11ピクセルです。
中央で切り抜くと、中央からいちばん大きな正方形を取ります。シンボルの隣に社名が並んだ組み合わせでは、これが両方を真っ二つにすることがよくあります。それより、先に元の画像を自分で切り抜いてシンボルだけにし、それを変換するほうがいいでしょう。
引き伸ばしは、画像を潰して収めます。これが正しい場面はほとんどありませんし、用意してあるのは主に、道具が黙ってそれをしていると思われないためです。
横長のロゴに対する一般的な答えはこうです。ロゴを変換しないこと。そのうちの、単独で成り立つ部分を変換すること。
透過か、単色の背景か
ウェブサイトなら、たいてい透過が正解です。ブラウザのタブは、ブラウザとテーマ次第で灰色にも白にもほぼ黒にもなりますし、透過のアイコンはそのどれの上にも座れます。白い背景を塗り込んだアイコンは、暗いタブバーの中の白い長方形です。
知っておく価値のある例外が2つあります。
- 暗いだけのロゴは、ダークモードで消えます。もともと白地に黒のマークなら、透過ではなく色の付いた背景を与えるか、明るい輪郭線を付けてください。
- Appleタッチアイコンは不透明でなければなりません。iOSはそれを自分の角丸タイルの上に描き、透過を黒として扱います。そのファイルを作る道具は、こちらのために平らにしておくべきです。ここの道具はそうしますし、既定では白に対して行います。
ウェブサイトに必要な、.ico以外のファイル
favicon.icoがカバーするのは、ブラウザとWindowsです。スマホはカバーしませんし、手作りのアイコン一式がたいてい早すぎるところで止まるのが、ここです。ほかに3つのプラットフォームが、それぞれ自分の名前で自分のファイルを求めますし、そのどれも.icoの中を見ません。
- iOSは、誰かがサイトをホーム画面に追加したときに、180×180の
apple-touch-icon.pngを読みます。それがないと、iOSはページのスクリーンショットを使いますし、それは手違いのように見えます。 - Androidと、すべてのインストール案内は、ウェブアプリのマニフェスト、つまり
site.webmanifestを読みます。それが192と512ピクセルのPNGを指しています。512は、ウェブアプリがスプラッシュ画面に出すものでもあります。 - Windowsのスタートメニューのタイルは
browserconfig.xmlを読み、それが150×150のPNGを指します。3つの中では重要度がいちばん低く、XMLは4行です。
もうひとつ、間違えやすいものがあります。Androidのランチャーは、アダプティブアイコンを端末の好きな形、つまり円、角丸四角、丸みのある四角に切り抜きますし、生き残ることが保証されているのは中央の80%だけです。端から端まで描かれたアイコンは、四隅を失います。マスカブルアイコンとはそれのことです。同じ絵を、正方形の中に意図して小さく描き、マニフェストで別途宣言したものです。
画像→ICO変換ツールでウェブサイト用一式にチェックを入れると、これらすべてと、マニフェストと、それらを指すHTMLのかたまりが出てきます。そのかたまりが意図的に省いているものがひとつあります。favicon.icoのための<link>です。ブラウザはそのアドレスを自分から要求するので、わざわざ名指しすると、同じファイルが2回取得されることになるからです。
Windowsのアプリケーションアイコンは、別の一式です
アイコンがサイトではなくプログラムのためのものなら、サイズが変わります。Visual Studio自身の既定のapp.icoに入っているのは16、32、48、256です。シェルの3サイズに加えて、スタートメニューとエクスプローラーの特大表示が描画に使う大きなものです。
高DPIのディスプレイでは、Windowsは20、24、40、64、96も求めますし、なければ手持ちのいちばん近いサイズから作り直します。それが問題になるかどうかは、アイコン次第です。平坦な形なら作り直しに耐えますが、細かいものは耐えません。それらを足すとファイルはおよそ2倍になりますが、アプリケーションにとってそれは何でもありません。訪問者全員がファイルを取得するファビコンとは、計算がまったく違うからです。
大きさについて、もうひとつ。バイト数があるのは256の項目です。非圧縮で保存すると、それだけで264 KB。アイコンの中にPNGとして保存すれば、たいてい30KB未満です。PNGの項目はWindows Vista以降なら読めるので、避ける理由は、それより本当に古いソフトか、アイコンを自分で解析するインストーラーや組み込みの道具だけです。
Macは、まったく別のファイルを読みます
アイコンがWindowsではなくMacのアプリケーションのためのものなら、上の話はどれも当てはまりません。macOSは.icoをまったく読まないからです。読むのは.icnsで、同じ考えを別の包みに入れたもの、つまり1つの入れ物に複数のサイズを収めたものです。知っておく価値のある違いが3つあります。
- サイズは固定です。Appleが10個の枠を公開していて、選ぶものはありません。16、32、64、128、256、512、1024ピクセルで、そのうち32、256、512は2度ずつ登場します。それぞれが自分自身のサイズであると同時に、1段下のサイズのRetina版でもあるからです。
- 1024まで上がります。
.icoは256で止まります。Macのアイコンファイルが数百キロバイトで、ファビコンが15KBなのは、そのためです。一度出荷されるアプリケーションにとって、それは何でもありません。訪問者全員に取得されるのは、ファビコンだけです。 - 1024ピクセルが、図版の耐えるべき大きさです。2つの問題は、同じ絵の正反対の端にあります。ファビコンは極小でも機能しなければならず、Macのアイコンは巨大でも持ちこたえなければなりません。512で書き出して1024に引き伸ばしたロゴは、Retinaディスプレイではぼやけて見えますし、App Storeも受け付けません。
使い方です。アプリケーションのバンドルは、それをYourApp.app/Contents/Resources/に置き、Info.plistで名前を指定します。フォルダやディスクイメージなら、Finderで.icnsを選んでcommand + Cを押し、変えたいものの「情報を見る」を開き、左上の小さなアイコンをクリックしてからcommand + Vを押してください。
画像→ICO変換ツールでmacOSアイコンにチェックを入れると、それが書き出されます。Windows用のファイルを隣に付けても、付けなくても構いません。両方のプラットフォームで出荷するものは両方を必要としますし、どちらも同じ画像から、同じ一度の処理で描かれます。
うまくいったかを確かめる
ブラウザはファビコンを、ほかのほとんどのものより強くキャッシュします。ですから「アップロードしたのに何も変わらない」は、たいてい間違いではなくキャッシュです。ファイルをまた編集し始める前に、試すことが2つあります。
-
https://yoursite.com/favicon.icoを直接開いてください。ファイルがダウンロードされるなら、それはそこにあり、見ているのはキャッシュです。404が返るなら、ルートに置かれていません。 - プライベートウィンドウでサイトを読み込んでください。たいてい、独自のアイコンキャッシュを持っています。
Windowsでは、.icoをフォルダに入れ、エクスプローラーの表示サイズを小、中、大、特大と切り替えることで確かめられます。それぞれが同じファイルから別の項目を描くので、システムが見るとおりに1つずつ見られます。
Macでは、.icnsはプレビューで開き、横にすべての枠が並びます。Finderでも同じ手が使えます。フォルダに入れて表示オプションのサイズのスライダーを動かせば、中の絵が入れ替わるのを見られます。
これにアップロードは要りません
画像の拡大縮小は、どのブラウザも何年も前からしていることですし、.icoは6バイトのヘッダーと、画像1枚につき16バイト、そのあとに画像が並んだものです。それを作る工程に、サーバーを必要とするものはありません。そしてここの道具は、サーバーを使いません。ページのContent-Security-Policyには接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。
ここではそれを、ふつう以上に気にする価値があります。無料のファビコン生成サイトに渡されるロゴは、しばしば未発表のブランドだからです。アイコンは最初に作られるものの1つであり、最後に公表されるものの1つでもあります。言われるより確かめたい方は、ページを読み込んでから回線を抜き、それでも作ってみてください。オンライン変換サイトにファイルをアップロードしても安全ですか？には、どの道具にも試せる確認方法がさらに3つ載っています。