最もファビコンアドバイスは、2014 年に書かれたジェネレータからコピーされたダースのPNGサイズのリストです それらのサイズのほとんどはもはや何もしません サイトが今日必要とするものは短い:1 つ favicon.ico まだ探しているブラウザやツールのために、最新のものすべてに対応する 1 つのスケーラブルまたは高解像度のアイコンと、電話用の 1 つのタッチ アイコン。人々をつまずかせる部分は、奇数の拡張子を持つ画像ではないため、.ico 自体です。いくつかの画像を保持する小さなコンテナです。
このガイドは、ICOファイルのビルド方法、favicon.icoの内側にどのサイズが属するか、およびその理由、サイトがそれと並んで必要とする他のアイコンファイル、およびブラウザタブでアイコンが柔らかく見えたり読めなかったりする間違いの下に座っています 画像ツールハブ、そしてToolzコンバータのために引用されたすべてのサイズは、そのソースコードから来ています。
tl;dr: ICOファイルはコンテナです: 短いディレクトリの後にいくつかの正方形の画像が続き、サイズごとに1 つ、ブラウザまたはオペレーティングシステムが最も近い一致を選択します。 favicon.icoの場合は、16、32、48 pxを含め、同じファイルがWindowsアイコンと倍増する場合は256 pxを追加します 各エントリは最大256 x 256 ピクセルを保持できます それと並んで、SVGまたは大きなPNGアイコンと180 x 180 を宣言します
apple-touch-icon。 ザ・ PNGからICOへのコンバーター 16、32、48、および 256 px のエントリを、透明性、クライアント側、アップロードされたもの、無料、サインアップなしで PNG として書き込みます。
ICOファイルとは何ですか?
ICOファイルは、Windowsのアイコン形式です: ヘッダー、内部の各画像をリストするディレクトリ、および各エントリの画像データ。 Microsoftは、そのレイアウトを文書化しました アイコンの技術記事、そしてそれはWindowsの最初のバージョンのWindows以来、Windowsプログラム、ショートカット、フォルダのアイコンのフォーマットでした ブラウザは1990 年代後半にファビコンにそれを採用しました、それがほとんどのWebサイト上のファイルが今でも呼ばれている理由です favicon.ico。
ディレクトリは、PNGやJPGとは異なるものです.16 ピクセルでアイコンを必要とするソフトウェアは、ディレクトリを読み取り、16 に最も近いエントリを見つけて、その1 を描画します.タブ、ブックマークリスト、タスクバーボタン、デスクトップショートカットは、それぞれ同じファイルから異なる画像を撮影することができます.これにより、デザイナーは、単一の画像をどこにでも拡大縮小させるのではなく、小さなサイズには簡略化されたマークを提供し、大きなサイズには詳細なマークを提供できるようになります。
フォーマットは2 つのメディアタイプで行きます。 IANAリスト image/vnd.microsoft.icon、ほとんどのサーバーとブラウザは古いものを使用しながら image/x-icon。 どちらもファビコンのために働きます。
ICOファイルはどのように構成されていますか?
ICOファイルは6 バイトのヘッダーから始まり、1 つの画像につき16 バイトのディレクトリエントリが続き、その後に画像データが続きます。 すべての数字はリトルエンディアンです。
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
そのレイアウトの 2 つの詳細により、アイコンに関する混乱を招く点のほとんどが説明されます。
256 ピクセルの上限は 1 バイトから得られます。 幅と高さはそれぞれ 1 バイトに格納され、0 から 255 まで保持できます。この形式は 0 を 256 を意味するように再利用しており、より大きなものを表現する方法はありません。 512 x 512 エントリは、ジェネレーターが主張するものであっても、有効な ICO には存在しません。
エントリはPNGにすることができます. 初期のアイコンは、すべての画像を別の 1 ビット透明マスクを備えた非圧縮ビットマップとして保存していました。 Windows Vista 以降、エントリには代わりに完全な PNG ファイルが保持されます。これは、大きなサイズでははるかに小さく、適切なアルファ チャネルを伝送します。非圧縮 32 ビット ビットマップとして保存される 256 x 256 アイコンは、およそ 256 KB です。 PNG と同じ画像は、通常、そのほんの一部です。
Toolzコンバータは、現代のバリアントを書き込みます そのICOビルダーはタイプ1、プレーン1とピクセルあたり32 ビットでサイズごとに1 つのディレクトリエントリを設定し、0 として256 を書き、そのアルファチャネルでPNGとして各エントリを格納するディレクトリがそれを記録する方法がないので、1 から256 の外のサイズのためにそれを尋ねることは、何も書かれる前に拒否されます。
ファビコンはどのサイズにすべきですか?
favicon.ico には 16 x 16、32 x 32、48 x 48 の画像が含まれている必要があり、ファイルを Windows アイコンとしても機能させたい場合は 256 x 256 の画像が含まれている必要があります。.ico を超えて、最新のブラウザは SVG またはリンク タグ付きで宣言された大きな PNG を好み、電話機は別のタッチ アイコンを使用します。
この表は、各サイズをそれが使用されている場所にマッピングします。正確な動作はブラウザ、オペレーティングシステム、ディスプレイのスケーリングによって異なりますので、一般的なケースとして扱います:
| サイズ | それが現れる場所 | Favicon.icoで必要ですか? |
|---|---|---|
| 16 x 16 | 標準ディスプレイ上のブラウザタブ、アドレスバー、ブックマーク | はいって |
| 32 x 32 | 高密度ディスプレイ、Windows タスクバー、ショートカットのタブ | はいって |
| 48 x 48 | Windows デスクトップのショートカット、中型のアイコンビュー; Google 検索では、これよりも大きくすることをお勧めします | はいって |
| 256 x 256 | Windows の大および特大のアイコン ビュー | Windowsアイコンとして使用する場合のみ |
| 180 x 180 | IPhoneとiPadのホーム画面 ()apple-touch-icon) |
いいえ、別のPNG |
| 192 x 192 | Androidのホーム画面、Webアプリマニフェスト | いいえ、別のPNG |
| 512 x 512 | Webアプリマニフェスト、インストール、スプラッシュ画面 | いいえ、ICOには収まりません |
| エニー (SVG) | ダークモードの亜種を含むSVGアイコンをサポートする最新のブラウザ | いいえ、別のSVG |
検索結果では、 Google' s ファビコン ガイドライン 正方形のアイコンを尋ねて、48 x 48 ピクセルより大きいアイコンを推奨します。 google は、ホームページで宣言されたアイコンからそれを取得します。 16 ピクセルで最高になる.ico は、サイト' のアイコンが検索結果の横でぼやけて見える一般的な理由です。
サイトに必要なファビコンファイルはどれですか?
サイトには、すべての主流のブラウザとデバイスをカバーするために 3 つのアイコン ファイルと 1 つのマニフェスト エントリが必要です。それ以上は、ほとんどの場合残り物です。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
各行にはジョブがあります:
favicon.icoは フォールバック. The WHATWG HTML 標準 ブラウザがリクエストできるようにします/favicon.icoサイトルートから、ページがアイコンをまったく宣言しないとき、そしてRSSリーダー、クローラー、および古いツールはまだそうします。 他のアイコンを宣言しても、ファイルをルートに保持します。icon.svgはSVGファビコンをサポートするブラウザのシャープなアイコンです。 任意の密度までスケールし、aを含めることができますprefers-color-schemeメディアクエリなので、アイコンは暗いタブに適応します。すべてのブラウザがそれを尊重するわけではないため、.ico はそのままになります。apple-touch-icon.pngat 180 x 180 は、誰かがあなたのサイトをホーム画面に追加するときにiOSが使用するものです。 iOSはホーム画面のアイコンの透明性を維持しないため、背景を不透明にします。- 192 および 512 のマニフェスト アイコンは、で説明されているように、サイトがアプリとしてインストールされるときに Android および Chromium ベースのブラウザが使用するものです W3C Web Application Manifest。
ザ・ sizes .ico リンク上の属性は、1 つの方法で重要です ブラウザが SVG とサイズが設定された.ico を表示すると、SVG がスケーラブルな選択肢であることがわかります 一部のセットアップでは、SVG を使用します sizes="any" 代わりに.ico で、一部の Chrome バージョンは SVG ではなく.ico を選択することで応答しました。特定のサイズではそれが回避されます。
なぜ私のファビコンがぼやけたり間違って見えるのですか?
ほとんどのファビコンの問題は、フォーマットではなくソース画像から発生します。 ICO は、各サイズで指定されたものをすべて保存し、スケーリングは一方向にのみうまくいくことができます。
| 症状 | 原因 | 修正 |
|---|---|---|
| 柔らかく、斑点のある 256 px エントリ | ソースは256 pxより小さいので、それは引き伸ばされました | 512 x 512 以上のエクスポートから開始します |
| ロゴは潰されるか、または伸ばされます | 正方形に伸びた非正方形のソース | 変換する前に正方形に切り取るかパッドを入れます |
| タブでワードマークが読めません | 16 px で描画されたテキストは 2 ピクセルの高さです | 16 および 32 px については、記号のみを使用してください |
| 薄い輪郭が消えます | 小さいサイズで1 px未満のストローク | 小さいサイズのバリエーションの太いストローク |
| アイコンの周りの白いボックス | JPG ソースには透明性がありません | アルファチャンネルのPNGを使用します |
| 古いアイコンが表示され続けます | ブラウザは積極的にファビコンをキャッシュします | ファイルの名前を変更するか、クエリ文字列を追加してから、ハードリフレッシュします |
| Google の結果にアイコンがありません | 48 px未満のアイコン、robots.txtによってブロックされているか、ホームページ上ではありません | ホームページから大きなアイコンをサーブし、クロールを許可します |
最初の行はスペルアウトする価値があります, それはあまりにも経験豊富なデザイナーをキャッチするので.256 ティックで変換された64 pxソースは、4 回拡大64 px画像である256 pxエントリを生成します.それはまさにエントリ高密度Windowsビューと大きなショートカットショーです.大きなソースからのダウンスケーリングは、良いように見える方向です。
3 行目は算数の問題です 16 x 16 のアイコンは 全部で256 ピクセルです その幅に押し込まれた5 文字のワードマークは 1 文字あたり3 ピクセルほどになり アンチエイリアシングによって それらが灰色の汚れに変わります そのために ほぼすべての有名なサイトが ファビコンに1 文字か記号を使っています。
PNGからfavicon.icoを作るにはどうすればよいですか?
透明な背景を持つ少なくとも 512 x 512 ピクセルの正方形の PNG をエクスポートし、必要なサイズの ICO に変換し、公開する前に実物大で 16 px のエントリを確認します。
を使って PNGからICOへのコンバーター toolzで:
- PNGをドロップします。 いくつかは一度に入ることができます; それぞれが独自の.icoになります。
- アイコンのサイズを選択します。 16、32、48、256 px の 4 つのボックスすべてにチェックマークが付けられて開始されます。純粋なファビコンの場合は、256 エントリがその重量のほとんどであるため、ファイルを大幅に軽量化するために 256 をチェックマーク解除します。 4 つすべてのチェックマークを外すと、コンバーターは空のアイコンを生成するのではなく、4 つすべての書き込みに戻ります。
- を押す 変換する ICO. 正方形512 x 512
logo.pngとして戻ってくるlogo.icoメモ付き " 16、32、48、256 px アイコンが含まれています。" - ファイルをダウンロードするか、バッチを取得します
converted-ico.zip。
コンバータは、各サイズでキャンバスにあなたの画像を描き、PNGとして各正方形をエンコードし、それらを1 つの.ico、すべてのクライアント側に最初にパックするので、アートワークは、デバイスから離れることはありません透明性は、すべてのサイズで維持されます。 non-squareソースは、トリミングではなく、各正方形を埋めるために引き伸ばされ、メモはそう言う:1024 x 256 ワードマークをドロップし、それは画像が1024x256 で、あなたが選択したサイズの正方形に伸ばされたことを報告しますそのメモは、最初にトリミングまたはパッドするためのあなたの手がかりです。
小さなサイズで最良の結果を得るには、2 つのPNGを作ります: 48と256 pxの詳細なものと16と32 pxの簡略化されたシンボル それぞれのサイズだけをチェックして変換します コンバータはファイルごとに1 つのソースを書き込むので、2 つの画像アプローチは2 つの.icoファイルを与えます; 簡略化されたものを使用します favicon.icoブラウザは主に小さなエントリを選択し、windows アプリケーションまたはショートカット アイコンの詳細なエントリを選択するためです。
JPGまたはSVGからICOを作成できますか?
両方に「はい」ですが、それぞれに注意が必要です。
JPGは動作しますが、JPEGにはアルファチャンネルがなく、コンバーターがアルファチャンネルを回復できないため、すべてのアイコンエントリは透明性のない塗りつぶされた正方形として表示されます。 The JPGからICOへのコンバーター 写真は同じ16、32、48、256 pxの正方形に再サンプリングします 写真も16 pxでほとんどすべての詳細を失うため、変換する前に単一の高コントラストの被写体の周りにしっかりとトリミングし、そのまま変換された4032 x 3024 電話の写真が水平方向に絞られ、メモにそのように表示されます。
SVG は、固定された解像度を持たず、すべてのエントリ サイズでシャープなレンダリングを行うため、可能な限り最良のソースです。ルートは、必要な制御量によって異なります。 SVG に PNG コンバーター 最初に検査して編集できる PNG に SVG をレンダリングします; 最長辺が 512 px 未満である任意の SVG は 512 で描画されるため、24 x 24 アイコンの SVG は依然として 256 エントリのクリーンなソースを与えるか、SVG をそのまま一般にドロップします 画像コンバーター、SVG、PNG、JPG および他のダースのフォーマットを受け入れ、1 つのステップでレンダリングおよびパックするターゲットとして ICO を選択します。
| ソース | ICOの透明性 | 256 px でのシャープネス | ベスト用途 |
|---|---|---|---|
| svg | 保管 | シャープ、ベクトルからレンダリング | ベクトル形式のロゴ |
| PNG 512 px以上 | 保管 | シャープ | 最も ファビコン |
| 256 px 未満の PNG | 保管 | 256 でソフト | 256 をチェックを外すか、より大きな再エクスポートします |
| JPG | なし、塗りつぶされた正方形 | ソースサイズによって異なります | 写真ベースのアイコンのみ |
| 既存のico | 保管 | ブラウザがデコードするエントリから再構築されました | ファイルがどのサイズを運ぶかを変更します |
既存の.icoもフィードバックすることができます。 converterは決してrenameとしてICOにICOを扱いません; それは常にあなたがティックするサイズでファイルを再構築します。 that is a quick way to strip a bloated favicon down to 16, 32 and 48, though it rebuilds from the one entry the browser decodes, so start from the original artwork if you have it. SVG 対 PNG まさにこの種の再エクスポートのためにベクター マスターを保存する価値がある理由について説明します。
2026 年もfavicon.icoは重要ですか?
はい、フォールバックとして 現在のブラウザは、宣言するSVGまたはPNGアイコンを使用しますが、ルートを使用します /favicon.ico はまだ、一部のブラウザ、フィードリーダー、ブックマークツール、クローラーが宣言を見つけられなかったり、宣言されたタイプをサポートしなかったりしたときにフェッチするものです。欠落しているものは、ファイルが存在するかどうかにかかわらず、それらのリクエストが到着するため、サーバーログを404で埋めます。
もはや重要ではないのは、レガシーサイズのロングテールです 別々の57、60、72、76、114、120、144、152 ピクセルのタッチアイコンは、古いiOSバージョンからの日付であり、単一の180 pxファイルを通じて宣言されたWindowsタイル画像 browserconfig.xml windows 8と10 に属していました スタート画面タイル 新しいサイトにはどちらも必要ありません。
ここでは、期待されるファイルサイズで設定される実用的な最小値を示します:
| ファイル | ピクセルサイズ | 典型的な重量 | 必須? |
|---|---|---|---|
favicon.ico 16、32、48で |
16、32、48 | 数KB | はい、フォールバックとして |
icon.svg |
スケーラブル | 単純なマークの場合は 2 KB 未満 | おすすめ |
apple-touch-icon.png |
180 x 180 | 5～20KB | はい、iOSの場合 |
icon-192.png、 icon-512.png |
192、512 | 10～60KB | サイトにマニフェストがある場合 |
ブラウザでのアイコンの変換は非公開ですか?
はい。 Toolz では、.ico のデコード、サイズ変更、PNG エンコード、パッキングはすべてクライアント側でブラウザ タブ内で行われるため、画像はアップロードされず、ロードされるとページはオフラインで動作し続けます。ソースに添付されたメタデータとカラー プロファイルはキャンバス ステップによってドロップされますが、アイコンにとってこれは無害です。
100 メガピクセルを超える画像と空のファイルはメッセージで拒否され、50 MB を超える SVG ソースは拒否されます。ツールは無料で、登録はなく、変換には 1 日あたりの制限があります。
