PNGからICOへ:クリーンなfavicon.icoを作成

PNGはfavicon作成の最も人気のある出発点であり、それには十分な理由があります。PNGファイルは透明度をサポートし、鋭いエッジをクリーンに処理し、ほぼすべてのデザインツールのネイティブエクスポート形式です。問題は、ブラウザとオペレーティングシステムがfavicon.icoファイルとしてPNGを直接受け付けないことです。ICO形式は、単一のファイル内に複数の画像サイズを保持できる特別なコンテナであり、システムが各コンテキストに最適な解像度を自動的に選択できるようにします。

Any2ICOを使用すると、PNGをマルチサイズICOに変換するのに1分もかかりません。画像をアップロードし、必要なサイズを選択し、画像のスケーリング方法と使用する背景を選択して、完成したICOをダウンロードします。変換全体はCanvas APIを使用してブラウザで実行されるため、ファイルはデバイス上にとどまり、リモートサーバーにアップロードされることはありません。

このガイドでは、プロセスのすべてのステップを説明します。faviconとWindowsデスクトップアイコンにどのサイズを含めるか、containとcoverスケーリングをいつ使用するか、背景色の処理方法を学びます。最終的には、ウェブサイトまたはアプリケーションにドロップする準備ができたプロフェッショナルなマルチサイズICOファイルが完成します。

ステップバイステップ:PNGをICOに変換

これら4つのステップに従って、任意のPNGをクリーンでマルチサイズのICOファイルに変換します。

ステップ1 - PNGをアップロード

任意の最新ブラウザでAny2ICOコンバーターを開きます。PNGファイルをアップロードエリアにドラッグするか、クリックしてデバイスを参照します。クリップボードから画像を貼り付けたり、URLを入力したり、Google DriveまたはOneDriveからインポートすることもできます。Any2ICOは最大10 MBのPNGファイルを受け付けます。

ステップ2 - アイコンサイズを選択

ICOファイルに埋め込むピクセルサイズを選択します。Any2ICOは16、32、48、64、128、256ピクセルを提供します。標準的なウェブサイトのfaviconには、少なくとも16、32、48を選択してください。アイコンがWindowsショートカットまたはアプリケーションアイコンとしても使用される場合は、64、128、256も追加してください。最大の互換性のためにすべての6つを選択できます。

ステップ3 - スケーリングと背景を選択

スケーリングで、Containを選択して画像全体をアイコンフレーム内に収めます(ロゴとイラストに最適)、またはCoverを選択してフレームを完全に埋め、必要に応じてエッジをクロップします(写真とフルブリードグラフィックに最適)。次に、PNGにアルファチャネルがある場合は背景を透明に設定するか、単色の背景を希望する場合は白に設定します。

ステップ4 - 変換してダウンロード

変換をクリックします。Any2ICOはブラウザでICOファイルを即座に生成します。単一の.icoファイルをダウンロードして、ウェブサイトのルートにfavicon.icoとして配置するか、オペレーティングシステムがアイコンファイルを期待する場所で使用します。複数の画像を変換した場合、Any2ICOは自動的にZIPアーカイブにバンドルします。

どのサイズを含めるべきですか?

ICO形式は単一のファイルに複数の解像度を保持でき、各解像度は異なる目的を果たします。適切な組み合わせを選択することで、アイコンが表示されるすべての場所で鮮明に見えることが保証されます。

16x16は古典的なfaviconサイズです。ブラウザはタブ、ブックマークバー、履歴リストに表示します。これは含めるべき絶対的な最小サイズです。

32x32は、高DPI(Retina)ディスプレイのブラウザおよび小さなショートカットアイコン用にWindowsで使用されます。16x16と一緒に含めることで、ブラウザがシャープな画面で16ピクセルバージョンをスケールアップするのを防ぎます。

48x48は、Windowsタスクバーと、わずかに大きなアイコンを必要とする特定のブラウザコンテキストに表示されます。ウェブ使用の必須トリオを完成させます。

64x64、128x128、256x256は、主にWindowsデスクトップショートカット、アプリケーションアイコン、高解像度ディスプレイに関連しています。ICOがウェブサイトのfaviconとしてのみ機能する場合は、これらをスキップしてファイルを小さく保つことができます。アイコンがデスクトップで使用される可能性がある場合は、最高の外観のためにそれらを含めてください。

各サイズが表示される場所の詳細については、faviconサイズのガイドをご覧ください。

スケーリング:ContainとCover

ソースPNGが完全に正方形でない場合、またはターゲットアイコンサイズと正確に一致しない場合、Any2ICOは画像を正方形のアイコンフレームに収める方法のルールが必要です。そのルールがスケーリングモードです。

Containは、画像全体がアイコンフレーム内に収まるまで画像を縮小します。ソースが正方形でない場合、2つの側面にパディングが表示されます。このモードは、何もクロップされないことを保証します。これは、エッジを切り取ることが受け入れられないロゴ、ワードマーク、およびあらゆるグラフィックに最適な選択です。

Coverは、アイコンフレームを完全に埋めるまで画像を拡大または縮小します。ソースが正方形でない場合、オーバーフローするエッジがクロップされます。このモードは、パディングや空のスペースがないところで、フレーム全体を埋めることがより重要な写真、テクスチャ、またはフルブリード背景に役立ちます。

ほとんどのfaviconワークフローでは、Containが正しいデフォルトです。アイコンは小さく、ロゴから数ピクセルをクロップするだけでも認識できなくなる可能性があります。画像がすでに正方形である場合、またはすべてのエッジを保持するよりもフレーム全体を埋めることが重要な特殊なケースのためにCoverを予約してください。

背景:透明と白

背景設定は、アイコンフレームが完全にカバーされていない場合に画像の後ろに表示されるものを制御します。これは、ソースにアルファチャネル(透明度)があるか、またはContainスケーリングがパディングを追加したためです。

透明はアルファチャネルをそのまま保持します。アイコンは、ダークブラウザタブバー、ライトブックマークリスト、または色付きデスクトップ壁紙など、配置されている表面とシームレスに調和します。これは、ロゴとシンボルの標準的な選択です。

白は、画像以外の領域を単色の白で埋めます。これは、ソースPNGが白いキャンバスでデザインされ、透明度が不要なエッジを露出する場合、またはアイコンが透明度を適切にサポートしないコンテキストに表示される場合に役立ちます。

経験則として:PNGにすでに透明な背景があり、小さいサイズで良く見える場合は、背景を透明に設定したままにしてください。デザインが白い囲いに依存している場合、またはエッジの周りに視覚的なアーティファクトが表示される場合は、白に切り替えてください。