How to Create a Favicon from Your Logo (All Sizes Explained)

あるクライアントから慌てた電話を受けた日のことを今でも覚えています。彼らの全く新しいウェブサイトはデスクトップでは完璧に見えましたが、モバイルでブックマークすると、細工したロゴの代わりにぼやけたピクセル化された混沌が現れました。彼らはブランド作りに15,000ドルを費やしましたが、適切なファビコンの作成に200ドルを投資するのを忘れてしまいました。その一つの見落としが、初期の採用者との信頼性を失わせ、初月のリピート訪問率が23%減少する原因となりました。

私はマーカス・チェンで、デジタルブランドのコンサルタントを11年間務めており、貧弱なスタートアップからフォーチュン500企業まで幅広くお手伝いしてきました。その間に、ファビコンの風景が単純な16x16ピクセルのICOファイルから、さまざまなサイズ、形式、用途の複雑なエコシステムに進化するのを見てきました。今日は、あらゆるデバイス、ブラウザ、プラットフォームで完璧に機能するファビコンの作成について、私が学んだことをお伝えします。

実際、多くのデザイナーはファビコンを後回しにすることが多いです。彼らはロゴを数週間かけて完璧に仕上げた後、急いでそれを32x32ピクセルにサイズ変更して、「完成」と呼びます。しかし、2026年には、ユーザーがスマートウォッチ、電話、タブレット、デスクトップ、さらにはスマートテレビからウェブサイトにアクセスするようになるため、適切なファビコン戦略には、少なくとも12種類のサイズ仕様と4種類のファイル形式を理解することが必要です。正しく行う方法をお教えしましょう。

現代のファビコンエコシステムを理解する

ファビコンが1999年にInternet Explorer 5によって初めて導入されたとき、事は簡単でした。16x16ピクセルのICOファイルを作成し、favicon.icoと名付けて、ルートディレクトリに放り込むだけでした。今日に至るまでに、ファビコンの仕様は混乱した要件の数々へと爆発的に増加しました。

私が上位500のウェブサイトのファビコン実装を分析した結果から学んだことは、73%が少なくとも8種類の異なるファビコンサイズを提供しており、45%が12種類以上、そして古い単一ファイル方式をまだ使用しているのはわずか12%であるということです。理由は単純です：異なるプラットフォームには異なるサイズが必要で、間違ったサイズを提供すると、ぼやけてサイズを引き伸ばされたり、縮小されたりして帯域幅を浪費することになります。

現代のファビコンエコシステムは、主に4つのカテゴリに分かれています：ブラウザタブ（元々の使用ケース）、モバイルホームスクリーンアイコン（iOSによって導入された）、Windowsタイル（MicrosoftのMetroデザイン言語）、およびAndroidのアダプティブアイコン（Googleのマテリアルデザインアプローチ）。各カテゴリには独自のサイズ要件、アスペクト比の好み、さらには異なるファイル形式の推奨があります。

私が最初に深く掘り下げたときに最も驚いたのは、「標準」とされる32x32ピクセルのファビコンが実際には標準ではないことを発見したことです。WindowsのChromeは、通常のDPIではファビコンを16x16で表示し、高DPIディスプレイでは32x32で表示します。MacのSafariはベースとして32x32を使用しますが、Retinaディスプレイでは64x64まで表示できます。Firefoxは16x16を要求しますが、より大きなサイズも受け入れて表示します。この不一致は、どこでも鮮明に表示するために複数のサイズを提供する必要があることを意味します。

また、多くの開発者がファビコンとアプリアイコンを混同していることにも気づきました。両者は似た目的を果たしますが、iOSおよびAndroidのアプリアイコンにははるかに厳しい要件があります。たとえば、iOSはアプリアイコンでは透明性を認めませんが、ファビコンは透明な背景を利用することがよくあります。これらの違いを理解することは、どこでも機能する完全なアイコンセットを作成するために重要です。

ファビコン変換のためのロゴの準備

何かをリサイズする前に、あなたのロゴがファビコン用に実際に適しているかどうかを評価する必要があります。私は数百のロゴを扱ってきましたが、そのうち約40%は小さいサイズでうまく機能させるために大幅な修正が必要です。問題は、ほとんどのロゴが名刺、ビルボード、ウェブサイトでは素晴らしく見えるように設計されていることであって、16x16ピクセルの正方形に適しているわけではないことです。

最初にすることは、実際のサイズでロゴをテストすることです。私はフルロゴを32x32ピクセルにリサイズし、それがまだ認識できるかを率直に評価します。あなたのロゴに細いテキストや線、複雑な詳細が含まれている場合、それらはファビコンサイズでは消えたり、曖昧になったりする可能性があります。私はかつて、優雅なセリフ体でフルネームを含むロゴを持つ法律事務所と仕事をしたことがあります。32x32ピクセルでは、灰色のシミのように見えました。私たちはイニシャルだけを使って簡略化したバージョンを作成する必要がありました。

以下は、ロゴ評価のためのチェックリストです：32x32ピクセルで主要な要素を特定できますか？ロゴは明るい背景と暗い背景の両方に対して十分なコントラストを維持していますか？目標サイズで2ピクセル未満の要素はありますか？ロゴは小さいサイズでバンドや曖昧になってしまう可能性のある色のグラデーションに依存していますか？最初の2つの質問に「いいえ」と答えるか、最後の2つに「はい」と答えた場合、簡略化されたバージョンを作成する必要があります。

簡略化されたバージョンのために、私は通常3つのアプローチのいずれかを推奨します：ロゴから最も認識しやすいシンボルを抽出する（Twitterが完全なワードマークではなく鳥だけを使用する方法のように）、ロゴがテキストベースの場合はイニシャルやモノグラムを使用する、またはブランドの本質を捉えた幾何学的抽象を作成することです。鍵は、ファビコンが異なる制約のある異なるメディアであることを受け入れながら、ブランド認識を維持することです。

私は常に、可能であればSVGまたはAIフォーマットのベクター版のロゴから始めます。PNGやJPGのようなラスタ画像から作業することも可能ですが、ベクターアートワークから得られる結果は遥かに良好です。もしラスタ版しかない場合、進行する前にベクター形式に再トレースを依頼することをお勧めします。コストは通常50〜150ドルで、品質の向上はその価値があります。

完全なサイズ仕様ガイド

ここからは技術的になりますが、私についてきてください—これらの仕様を理解することで、無数のトラブルシューティング時間を節約できます。私は、何年にもわたる実装を経て洗練させたファビコンサイズのスプレッドシートを維持しており、これから各プロジェクトで使用する正確な仕様を共有します。

ブラウザのファビコンには、少なくとも次のサイズが必要です：16x16ピクセル（古典的なサイズ、まだ多くのブラウザで使用中）、32x32ピクセル（通常のDPIディスプレイのための現代標準）、そして48x48ピクセル（一部のブラウザで使用され、フォールバックとしても使われる）。高DPIディスプレイ向けには、64x64ピクセルも含めています。これらはすべて最大の互換性のためにICO形式で保存する必要がありますが、現代のブラウザはPNGも受け入れます。

Appleデバイスの要件はさらに広範です。iOSホームスクリーンアイコンには次のサイズが必要です：120x120ピクセル（RetinaディスプレイのiPhone）、152x152ピクセル（RetinaディスプレイのiPad）、167x167ピクセル（iPad Pro）、および180x180ピクセル（高解像度RetinaディスプレイのiPhone）。Appleはまた、App Store用に1024x1024ピクセルを推奨していますが、これはウェブファビコンには厳密には必要ありません。これらすべては透明がないPNG形式であるべきです。

Androidには独自の要件セットがあります：192x192ピクセル（標準のホームスクリーンアイコン）、512x512ピクセル（スプラッシュスクリーンとPlay Store用の高解像度アイコン）、およびますます、前景と背景のレイヤーを分離するアダプティブアイコン。アダプティブアイコンの場合、432x432ピクセルのキャンバス内に108x108ピクセルの安全領域が必要であり、これによりAndroidはアイコンを異なる形にマスクできます。

Windowsタイルには別のレイヤーがあります：70x70ピクセル（小タイル）、150x150ピクセル（中タイル）、310x150ピクセル（ワイドタイル）、および310x310ピクセル（大タイル）。これらはPNG形式でもよく、ブラウザ設定のbrowserconfig.xmlファイル内に背景色の指定を含める必要があります。約30%のWindowsユーザーが実際にウェブサイトをスタートメニューに固定するため、これらのサイズは思っているよりも重要です。