# 16ピクセルでも読めるファビコンの作り方 ファビコンは、ロゴを小さくした絵ではありません。決まったサイズの絵の集まりで、ほとんどの人が開いたこともない入れ物に収められており、そのうちいちばん小さいものこそ、実際に誰もが目にするものです。ここでは、必要なサイズはどれか、その隣に置くファイルは何か、そしてロゴが縮小に耐えられなかったときにどうするかを説明します。 [画像→ICO変換ツールを開く](https://abox.tools/ja/image-to-ico/): 画像を1枚入れれば、ブラウザもWindowsもMacも、求めるサイズがすべて出てきます。 最終更新 2026年8月26日 ## 短い答え [画像→ICO変換ツール](https://abox.tools/ja/image-to-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・32・48ピクセル、その下にファイルへ入るものの要約があります。](https://abox.tools/screens/make-a-favicon/preset.webp) .icoは入れ物で、これはその中身の一覧です。プリセットは、ブラウザが実際に求めてくる組み合わせへの近道にすぎません。 ## 16ピクセル問題 ここは誰も警告してくれない部分です。16ピクセルは、ふつうの画面でおよそ4ミリ。全部で256個の点の格子で、この文に含まれる文字より少ないほどです。看板や名刺やウェブサイトのヘッダーで機能するように設計されたものは、そこまで縮められて生き延びることが、ほとんどありません。 消える順に挙げます。 - **文字。**正方形に押し込められたワードマークは、高さ3ピクセルほどです。小さな文字になるのではなく、灰色の帯になります。名前だけでなくシンボルも持つ企業のほとんどが、ファビコンにはシンボルだけを使う理由がこれですし、シンボルを持たない企業が1文字だけを使う理由でもあります。 - **細い線。**512ピクセルのロゴの1ピクセルの枠線は、16ピクセルでは32分の1ピクセルです。縁に沿った薄い灰色のもやとして描かれるか、消えます。 - **グラデーションと影。**移り変わるだけの余地がありません。柔らかいドロップシャドウは、汚れた縁になります。 - **細部の中の細部。**文字の書かれた書類のアイコンは、しみの付いた長方形になります。 直し方は設定ではなく、別の絵を描くことです。形をひとつかふたつに絞り、コントラストを強くし、1文字を超える文字は入れません。その版を32か48ピクセルで意図して描き、それを元にしてください。 道具にできるのは、公開する前にその問題を見せることです。[画像→ICO変換ツール](https://abox.tools/ja/image-to-ico/)のプレビューは、どのサイズも画面上の実寸で描きます。これを判断する方法は、それしかありません。16ピクセルのアイコンを64で表示しても、見た目は問題なく、何も教えてくれないからです。 ![同じマークを16・32・48・64・128ピクセルで描いたプレビューの帯。](https://abox.tools/screens/make-a-favicon/sizes.webp) 16ピクセル版が、あなたが作った版の隣に並びます。マークを単純にする必要があったかどうかを決めるのは、この一枚です。 ## ロゴが正方形でない。余白か、切り抜きか アイコンは常に正方形で、たいていのロゴはそうではないので、何かが起きるしかありません。答えは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変換ツール](https://abox.tools/ja/image-to-ico/)でウェブサイト用一式にチェックを入れると、これらすべてと、マニフェストと、それらを指すHTMLのかたまりが出てきます。そのかたまりが意図的に省いているものがひとつあります。`favicon.ico`のための``です。ブラウザはそのアドレスを自分から要求するので、わざわざ名指しすると、同じファイルが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変換ツール](https://abox.tools/ja/image-to-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つでもあります。言われるより確かめたい方は、ページを読み込んでから回線を抜き、それでも作ってみてください。[オンライン変換サイトにファイルをアップロードしても安全ですか？](https://abox.tools/ja/guides/is-it-safe-to-upload-files/)には、どの道具にも試せる確認方法がさらに3つ載っています。