favicon.ico(マルチサイズ)をPNGまたはSVGから作成する方法

faviconは、ブラウザタブ、ブックマーク、履歴リスト、アドレスバーに表示される小さなアイコンです。これは、ユーザーがサイトについて最初に気付く視覚的要素の1つであり、それを正しく設定することは、ほとんどの開発者が認識しているよりも重要です。ぼやけた、欠落している、または不適切なサイズのfaviconは、サイトを未完成でプロフェッショナルでないものに見せます。

ICO形式は、複数の画像サイズを単一のファイルにバンドルできるため、faviconに最も信頼性の高い選択のままです。ブラウザがタブバー用の16x16アイコンを必要とする場合、ICOファイルから16x16画像を取得します。オペレーティングシステムがタスクバーショートカット用の32x32アイコンを必要とする場合、32x32バージョンを取得します。これにより、faviconが単一の解像度から拡大または縮小されるのではなく、常にすべてのサイズでシャープに見えることが保証されます。

このガイドでは、ソース画像を準備し、Any2ICOを使用してマルチサイズICOファイルに変換し、適切なfaviconサイズを選択し、ブラウザがアイコンを見つけて表示できるように正しいHTMLタグを追加します。プロセス全体は2分もかからず、変換はブラウザで直接行われます。

ステップ1:ソース画像を準備

素晴らしいfaviconは、素晴らしいソース画像から始まります。入力の品質は出力の品質を直接決定するため、何かを変換する前にこれを正しく行うために少し時間を費やす価値があります。

正方形の画像を使用してください。faviconは常に正方形として表示されるため、ソースは正方形またはそれに非常に近いものである必要があります。ロゴが高さよりも幅が広い場合は、正方形の部分にトリミングするか、完全なワードマークではなく簡略化されたマークを使用することを検討してください。Any2ICOは、画像が完全に正方形でない場合、containとcoverスケーリングモードの両方を提供します。Containは、オプションの背景フィルで正方形内に画像全体を収めます。Coverは、エッジをクロップして画像をスケーリングして正方形を完全に埋めます。

利用可能な最高解像度から始めてください。少なくとも256x256ピクセルの画像は、16x16から256x256までのすべてのfaviconサイズに対してAny2ICOにクリーンなソースデータを提供します。ソースが32x32のみの場合、ツールはダウンスケーリングして小さいサイズを作成できますが、小さな元の画像からシャープな256x256バージョンを生成することはできません。迷った場合は、より大きくしてください。

PNGは理想的な入力形式です。PNGは透明度を保持し、ロスレスであるため、アイコン変換の最良の出発点です。ロゴに透明な背景がある場合、PNGはその透明度をICO出力に完璧に引き継ぎます。JPGも機能しますが、透明度をサポートせず、ソースに圧縮アーティファクトを導入する可能性があります。

SVGは機能しますが、注意事項があります。SVGは、理論的には任意の解像度にスケーリングできるベクター形式であり、faviconには理想的に聞こえます。Any2ICOはSVGファイルを受け付け、変換中にラスタライズします。ただし、外部フォント参照、リンクされた画像、または複雑なCSSを持つSVGは、ブラウザでラスタライズされるときに期待どおりにレンダリングされない場合があります。SVGがウェブブラウザで正しく見える場合、ほぼ確実に正しく変換されます。

ステップ2:Any2ICOでマルチサイズICOに変換

ソース画像の準備ができたら、Any2ICOに向かって、適切に構造化されたマルチサイズICOファイルに変換します。プロセスは簡単で、数回のクリックで完了します。

画像をアップロードします。PNG、SVG、JPG、WebP、GIF、BMP、AVIFファイルをコンバーターエリアにドラッグ&ドロップします。クリップボードから画像を直接貼り付けたり、URLからインポートしたり、Google DriveまたはOneDriveに接続することもできます。Any2ICOは最大10 MBのファイルを受け付けます。これは、faviconソースが必要とするよりもはるかに大きいです。

ICOサイズを選択します。Any2ICOでは、ICOファイルに埋め込むサイズを選択できます:16、32、48、64、128、256ピクセル。ほとんどのウェブサイトでは、16、32、48を選択すると、必須のユースケースがカバーされます。Windowsアプリケーションアイコンや高DPIディスプレイを含む完全なカバレッジが必要な場合は、64、128、256も追加してください。選択された各サイズは、単一のICOファイル内に個別の画像レイヤーを追加します。

スケーリングモードを選択します。ソースが完全に正方形でない場合は、containを選択して完全な画像を正方形の境界内に収めます(空の領域の背景フィルを使用)、またはcoverを選択してクロップして正方形全体を埋めます。ほとんどのロゴでは、containは何も切り取らないため、より安全な選択です。

背景を設定します。ソースに透明度があり、それを保持したい場合は、透明な背景を選択します。単色の背景を希望する場合は、白を選択します。透明な背景は、最新のブラウザとオペレーティングシステムで最高に見えますが、非常に薄いまたは明るい要素を持つロゴがダークタブバーに対して消える場合に白い背景が役立つ場合があります。

ICOをダウンロードします。変換ボタンをクリックして、生成されたfavicon.icoファイルをダウンロードします。変換は、ブラウザのCanvas APIによって直接実行されます。Any2ICOがインポートと変換中にファイルをどのように処理するかを正確に理解するには、aboutページにアクセスしてください。

ステップ4:faviconタグをサイトに追加

favicon.icoファイルができたら、サーバーに配置して、ブラウザにそれがどこにあるかを伝える必要があります。

ファイルをドメインのルートに配置します。favicon.icoファイルをウェブサーバーのルートディレクトリに保存して、https://yourdomain.com/favicon.icoでアクセスできるようにします。ほとんどのブラウザは、それを指すHTMLタグがなくても、この正確なパスでファイルを自動的に探します。この慣例はfaviconの最も初期の時代に遡り、最も信頼性の高い方法のままです。

HTMLヘッドにリンクタグを追加します。ファイルをルートに配置するだけで十分な場合が多いですが、<head>セクションに明示的な<link>タグを追加すると、ルート以外のパスまたはサブドメインを見るブラウザを含むすべてのブラウザが確実に見つけることができます。必要な最小限のスニペットは次のとおりです。

<link rel="icon" href="/ja/favicon.ico" sizes="any">

sizes="any"属性は、ICOファイルに複数のサイズが含まれており、ブラウザが現在のコンテキストに最適なものを選択する必要があることをブラウザに伝えます。どのサイズが含まれているかを明示したい場合は、それらをリストできます。

<link rel="icon" href="/ja/favicon.ico" sizes="16x16 32x32 48x48">

ほとんどのサイトでは、sizes="any"を含む単一行バージョンが完全に十分です。ブラウザは、マルチサイズICOファイルから適切なサイズを選択することに優れています。faviconリンクタグ、属性値、エッジケースの完全なリファレンスについては、favicon HTMLタグに関するガイドをご覧ください。

機能することを確認します。ブラウザでサイトを開き、タブアイコンを確認します。古いfaviconが表示されるか、faviconがまったく表示されない場合は、ブラウザキャッシュをクリアする必要がある可能性があります。faviconはすべての主要なブラウザによって積極的にキャッシュされるため、ハードリフレッシュ(Ctrl+Shift+RまたはCmd+Shift+R)またはシークレットウィンドウでページを開くことが、新しいアイコンが正しくロードされることを確認する最速の方法です。

まとめ

適切なマルチサイズfavicon.icoを作成するのは、4ステップのプロセスです。高品質の正方形ソース画像(できればPNGまたはSVGで256x256以上)を準備し、Any2ICOで適切なサイズでICOに変換し、オーディエンスに一致するサイズを選択します(最低16、32、48)、HTMLヘッドにシンプルな<link>タグを追加します。プロセス全体は2分もかからず、すべてのブラウザタブ、ブックマークバー、デスクトップショートカットで鮮明に見えるfaviconが生成されます。

マルチサイズICOファイルは、ブラウザとオペレーティングシステム全体で依然として最も普遍的にサポートされているfavicon形式です。最新のブラウザはPNGおよびSVG faviconも受け付けますが、ICO形式はInternet Explorerに遡る互換性を保証し、Windowsデスクトップショートカットとシームレスに機能します。単一のファイルに複数のサイズをバンドルすることにより、各コンテキストに個別のファイルをダウンロードすることなく、ブラウザが常に適切な解像度を利用できるようにします。

faviconを作成する準備はできましたか? Any2ICOに向かい、ロゴをアップロードし、サイズを選択して、数秒で完成したfavicon.icoをダウンロードします。サインアップなし、透かしなし、変換はブラウザで直接行われます。