PNGをICOに変換してくっきりしたファビコンを作成
ファビコンはウェブサイトの視覚的なシグネチャを担う小さな画像です。ページタイトルの隣のブラウザタブ・ブックマークリスト・閲覧履歴のアドレスバードロップダウン、さらには検索結果の横にも表示されます。小さいながらも多くの役割を担っています。認識しやすいファビコンは、ユーザーが数十のタブの中から自分のタブを見つけるのを助け、そのサイトが完成度が高くきちんと管理されていることを示します。その小さなアイコンの定番フォーマットがICOで、最も簡単な作り方はクリーンな正方形のPNGを変換することです。
このツールはPNG画像をICOファビコンに変換します。すべてブラウザ内で、ご自身のデバイスを使って処理されるため、選んだ画像がサーバーにアップロードされることはありません。アイコンがロゴやブランドアセットで第三者に渡したくない場合でも安心です。ファイルが準備できたら、そのままダウンロードできます。
ICOフォーマットとは何か、なぜ複数のサイズを保持するのか
ICOはMicrosoft Windowsで生まれたアイコンコンテナフォーマットで、プログラム・ショートカット・フォルダに使われるアイコンを格納します。その特徴的な機能、そしてウェブファビコンの標準になった理由は、1つのICOファイルに同じ画像を複数の解像度で同時に保存できることです。1つの固定ビットマップではなく、複数の正方形画像のセットを格納し、ブラウザやオペレーティングシステムがアイコンを描画する場所に合ったサイズを選びます。
これは本当に実用的です。ブラウザタブには小さなアイコンが必要で、ブックマークバーはやや大きいものを使い、デスクトップの固定ショートカットはさらに大きいものを要求することがあります。マルチサイズICOにより、各コンテキストが適切なバージョンを取得するため、単一の小さなビットマップから引き伸ばされてぼやけることなく、アイコンが常にシャープに保たれます。ICOは透過もサポートしているため、丸みのある不規則な形のロゴのコーナーが、どんなタブの色の上でもクリーンに見えます。
推奨ファビコンサイズ
ウェブサイトのファビコンとして含める価値のある3つのサイズは16×16・32×32・48×48ピクセルです。16ピクセル版はほとんどのブラウザがタブとアドレスバーに表示します。32ピクセル版は高解像度ディスプレイや一部のブックマーク・履歴ビューで使用されるため、現代の画面でクリアに保ちます。48ピクセル版はWindowsのサイトショートカットなど、より大きなコンテキストをカバーします。すべてが1つのICOファイル内に収まるため、1つのアセットで各サーフェスが必要なものを選べます。
引き伸ばしが起きないよう、正方形のPNGから始めてください。ソース画像が長方形または過大なサイズの場合は、画像リサイザーでクリーンな正方形にトリミングまたはスケールしてから変換してください。シンプルでコントラストが高いデザインは、細かいイラストよりも16ピクセルでずっとよく見えます。細かいテキストより太いシェイプを優先してください。
ファビコンをサイトに追加する方法
ICOファイルが準備できたら、ウェブサイトにアップロードしてください。伝統的にはfavicon.icoとしてサイトルートに配置します。多くのブラウザは自動的にそこを探しますが、推測の余地がないよう、HTMLのheadセクションに明示的に宣言することがベストプラクティスです。次のようなlinkタグを追加してください：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
この行をページの<head>セクション内に配置してください。rel="icon"属性はブラウザにこのリソースがページアイコンであることを伝え、hrefはファイルの保存場所を指します。上記のようなルート相対パスを使えば、サイトのすべてのページで同じ宣言が機能します。デプロイ後、ブラウザはファビコンをキャッシュするため、新しいアイコンが表示されるまでハードリフレッシュまたはキャッシュのクリアが必要な場合があります。
ブラウザ内でのプライベートな変換
すべてのデバイス上で処理されます。選択したPNGはローカルで読み込まれ、デコードされ、ICOとして再エンコードされます。処理中に何もマシンを離れません。アカウントも、キューも、サーバー側のストレージもありません。未公開のロゴや契約下のクライアントワークにも便利です。グラフィックの準備と整理のための他の方法については、画像ツールの完全なセットをご覧ください。
よくある質問
画像はどこかにアップロードされますか？
いいえ。PNGはご自身のデバイスのブラウザ内で完全にICOに変換されます。サーバーには何も送信・保存されないため、画像はプライベートのまま保たれます。
ファビコンに含めるべきサイズは？
最も便利なサイズは16×16・32×32・48×48ピクセルです。16ピクセル画像はブラウザタブに表示され、大きいサイズは高解像度ディスプレイやデスクトップショートカットでアイコンをシャープに保ちます。
なぜPNGではなくICOを使うのですか？
ICOは長年使われているファビコンフォーマットで、1つのファイルに複数のサイズを保存できます。ブラウザとオペレーティングシステムが各コンテキストに合った解像度を選ぶため、単一のビットマップから引き伸ばされることなくアイコンがシャープに保たれます。
ICOはPNGの透過を維持しますか？
はい。ICOフォーマットは透過をサポートしているため、PNGの透明な領域は維持され、アイコンがタブや背景色に関係なくきれいに溶け込みます。
ファビコンをウェブサイトに追加するには？
ICOファイルをサイトにアップロードし（通常はルートにfavicon.icoとして）、HTMLのheadセクションにlinkタグを追加します（link rel icon type image x-icon href slash favicon.ico）。その後、ブラウザキャッシュをクリアすると表示されます。
ソース画像が正方形でない場合はどうすればいいですか？
引き伸ばしが起きないよう、先にトリミングまたはスケールして正方形にしてください。画像リサイザーできれいな正方形を作ってから、ICOに変換するのが最もよいファビコンになります。