なぜ favicon のカバレッジが重要なのか
もはやブラウザのタブだけの話ではありません。なぜアイコンのフルセットが必要なのか、その理由を紹介します。
app icon とは何か
app icon は、スマートフォンでアプリを起動するために押す画像のことです。より高解像度の画面を備えた新しい端末が登場するにつれ、より高解像度の app icon が必要になります。開発者は解像度の低い古い端末のサポートも維持したいので、app icon を作るときには同じ画像を複数のサイズで用意する必要があります。これは iPhone や Android などすべてのスマートフォンに当てはまり、iPad のようなタブレットでも同様です。
このツールは何をするのか
多くのモダンな Web ブラウザは GIF や PNG などの一般的なフォーマットで保存された favicon をサポートしていますが、Internet Explorer のすべてのバージョンは今も favicon を ICO ファイル（Microsoft のアイコンフォーマット）で保存することを要求します。このツールは、あらゆる GIF、PNG、JPEG を、すべてのモダンブラウザがサポートする ICO へ簡単に変換する方法を提供します。また、オンラインエディターで favicon をゼロから作成したり、生成された favicon を手作業で微調整して望む結果を得ることもできます。
favicon を使う
このツールで favicon を生成したら、ダウンロードしてサイトのルートディレクトリに保存します。次に、HTML ドキュメントの head に以下のコードを含めます。
<link href="https://www.example.com/favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.example.com/apple-touch-icon.png" rel="apple-touch-icon">なぜ完全なカバレッジが重要なのか
| 表示面 | カバレッジで得られるもの |
|---|---|
| モバイルのホーム画面 | ユーザーは iOS や Android でサイトをホーム画面に追加することがよくあります。専用の touch icon がないと、あなたのサイトは汎用的なスクリーンショットや既定のプレースホルダーのように見え、ブランドのプロフェッショナルな印象を損ないます。 |
| SEO と検索結果 | Google をはじめとする検索エンジンは、検索結果の横に favicon を表示することがよくあります。鮮明で高品質なアイコンはクリック率を高め、ユーザーがあなたのブランドを瞬時に見分ける助けになります。 |
| ブランドへの信頼 | 一貫性の欠如は信頼を損ないます。アイコンがタブでは鮮明なのにブックマークバーではぼやけていたり、タブレットで欠けていたりすると、細部への配慮が足りないという印象を与えます。完全なカバレッジは、あらゆる場所でピクセルパーフェクトなブランディングを保証します。 |
| プラットフォームとの統合 | Windows のスタートメニューのタイルから、macOS のピン留めタブ、Safari のリーディングリストまで、OS ごとに独自のフォーマットを使います。それらすべてを用意することで、あなたのサイトがユーザーの端末にとってネイティブに感じられます。 |
実例で見る
サイトが適切な favicon のカバレッジを実装していると、そのアイコンはあらゆるプラットフォームと文脈で一貫して表示されます。これらの大手企業の favicon が、ブラウザのタブ、ブックマーク、検索結果、共有時に、リンクを瞬時に見分けられるようにしている様子に注目してください。この視覚的な一貫性がブランド認知と信頼を築きます。ユーザーは、混み合ったリストや検索結果の中でも、ひと目であなたのサイトを見分けられるのです。
適切な favicon のカバレッジがないと、あなたのリンクは汎用的なプレースホルダーや壊れた画像として表示され、ユーザーがブランドを見分けにくくなり、クリック率が下がります。以下は、完全な favicon のカバレッジに投資してきた企業の例です。
netflix.com、apple.com、google.com、microsoft.com、amazon.com、meta.com、x.com、youtube.com、github.com、spotify.com、adobe.com、nvidia.com、tesla.com、uber.com、airbnb.com、stripe.com、shopify.com、notion.so、figma.com、dropbox.com、linkedin.com、instagram.com、tiktok.com、discord.com、slack.com、zoom.us、salesforce.com、oracle.com、ibm.com、intel.com、paypal.com、reddit.com、twitch.tv。
私たちがサポートするアイコン
このツールが生成する各ファイル形式と、その用途の一覧です。
| サイズ | 使われる場所 | 備考 |
|---|---|---|
| 180x180, 120x120, 60x60 | Apple touch icon、iPhone と Retina | さまざまな世代の iPhone で使われ、高密度の Retina ディスプレイでもアイコンが鮮明に見えるようにします。 |
| 167x167, 152x152, 76x76 | Apple touch icon、iPad とタブレット | iPad のホーム画面は、スマートフォンとは異なる寸法でアイコンを表示します。 |
| 57x57, 72x72 | Apple touch icon、レガシー iOS | まだ流通している可能性のある古い端末向けに引き続き含め、互換性を最大化します。 |
| 192x192, 512x512 | Android と Chrome、manifest 経由 | Android 端末は高解像度の PNG に依存し、192x192 はホーム画面のショートカットの標準です。manifest が存在する場合は必ずしも独立したファイルとして生成されるわけではありませんが、このツールは android-icon-192x192.png を直接リンクと manifest への組み込みのために優先し、「ホーム画面に追加」のプロンプトやスプラッシュスクリーンが機能するようにします。 |
| 32x32 | 標準の favicon、モダンなデスクトップブラウザのタブ | 決定版とも言えるサイズ。retina ディスプレイに十分なディテールを持ちつつ、ファイルサイズは小さいままです。 |
| 16x16 | 標準の favicon、アドレスバーとブックマークのリスト | 古典的なサイズ。非 retina 画面や、厳密に 16px の文脈に不可欠です。 |
| 96x96 | 標準の favicon、デスクトップのショートカットと Google TV | より大きなラスター画像を必要とする、一部の特殊なブラウザ文脈でも使われます。 |
| 144x144 | Windows のタイル、ms-icon-144x144.png | ユーザーがサイトを Windows のスタートメニューにピン留めすると、Windows は特定のメタタグと画像を探します。ブランドのパレットに合うよう、タイルの色のメタデータも生成します。 |
同じマークを、重要なサイズで
その他の考慮事項
| 考慮事項 | 詳細 |
|---|---|
| Web app manifest | モダンな PWA（Progressive Web App）の機能は、manifest.json ファイルに大きく依存します。このファイルは、アプリがインストールされたときにどう振る舞うべきか、どのアイコンを使うべきかを含めてブラウザに伝えます。このツールはこれを自動生成します。 |
| Theme color | theme-color メタタグは、モバイル端末でブラウザのツールバーの色をカスタマイズし、サイトのデザインに合った、より没入感のある印象を与えます。 |
| SVG の favicon | 私たちは PNG による幅広い互換性に注力していますが、モダンなブラウザは SVG の favicon（link rel="icon" type="image/svg+xml"）をサポートし始めています。SVG はスケーリングに優れますが、Safari や古いブラウザなど完全なサポートのためには依然として PNG のフォールバックが必要です。 |