PNG を ICO に変換

ICO 形式は何十年も前から、1 つのファイルに同じアイコンの複数サイズを収めるよう設計されています。ファビコンを表示する場所によって必要な解像度が異なるからです。ブラウザのタブは 16×16 でも読める小さなものを求め、タスクバーやショートカットは 32 や 48 ピクセルでもう少し細部を求め、高精細ディスプレイやアプリストアの掲載ページは鮮明に見えるずっと大きなバージョンを求めます。単に拡張子を .ico に変えただけの通常の PNG は有効な複数サイズアイコンではなく、本物の ICO 形式を前提とするソフトでは正しく表示されないか、まったく表示されないことがよくあります。

これは 16・32・48・64・128・256 ピクセルの正方形という 6 つのサイズを 1 つの正しく構造化された ICO にまとめるので、どの場面でファイルを読み込んでも、その用途に合った解像度を選べます。

ICO 内のすべてのサイズは正確な正方形でなければならないため、正方形でない元画像——横長のロゴ、長方形のバナー——を単にその形に押し込むと明らかに歪んでしまいます。代わりに、画像は各正方形サイズの中央に配置され、収まるように拡縮され、余った領域は透明のままにされます。これにより比率が正しく保たれ、伸びて見えることもありません。

特に細部が消えやすい最小の 16 ピクセルサイズで最も鮮明な結果を得るには、最初から正方形で、シンプルかつコントラストの高い形の元画像から始めるのが一番です。細かい文字を含む詳細なロゴは、どう生成しても 16 ピクセルではしばしば判読できない染みになってしまいます。

最も一般的な置き場所は、Web サイトのルートに置く favicon.ico という名前のファイルで、そこを指す HTML がまったくなくても多くのブラウザが自動でチェックします。とはいえ、ページの head 部分に明示的な <link rel="icon" href="/favicon.ico"> タグを追加するのが、より信頼でき標準に沿った宣言方法です。より新しい構成では ICO の代わりに HTML で直接宣言する PNG や SVG のファビコンを使うこともありますが、複数サイズの ICO は今も、古いブラウザ・Windows のショートカット・名前で探し続ける各種デスクトップやビルドツールとの互換性が最も広い形式です。

画像は必要な 6 サイズそれぞれに拡縮され、あなたのブラウザ内でローカルに ICO コンテナへまとめられます。まだ公開していないロゴやブランド素材は、ファビコンを作るためだけにどこかへ送られる必要がありません。処理が終わればすぐダウンロードできる状態になり、アカウントも透かしもなく、ページを離れた後に何も残りません。