2026-06-28 · 2026-07-10 更新
画像からファビコンを作成：あらゆる画像でウェブサイトのアイコンを生成
任意の画像をウェブサイト用のfaviconに変換できます。ICO、PNG、SVG、Apple Touch iconサイズに対応し、各プラットフォームが期待する正確なサイズや、16pxで鮮明さを保つための具体的な手順を詳しく解説します。
最終更新日: July 10, 2026. faviconのサポートは進化しています。ここでのコアサイズとフォーマットは、現在の状況を網羅しています。
ファビコンとは、ブラウザのタブやブックマークリスト、スマートフォンなどのホーム画面に表示される小さなアイコンです。画像をファビコンに変換するということは、そのアイコンがどこに表示されてもシャープに見えるように、適切なファイルタイプとサイズを作成することを意味します。これは、16ピクセルのブラウザタブから180ピクセルのApple Touch iconに至るまで、あらゆる場面に対応する必要があります。本ガイドでは、各プラットフォームが期待するサイズ、生成すべきファイルフォーマット、そして小さなサイズでもアイコンを認識可能に保つ方法について解説します。
クイックアンサー：画像からファビコンを作成する方法は？
まず正方形のソース画像を用意するか（画像切り抜きツールで切り抜く）、標準的なファビコンサイズ（16px、32px、180px、512px）にresizeします。その後、PNGとしてエクスポートし、レガシーブラウザ用にICOファイルも作成します。これらを適切なリンクタグを使ってHTMLの<head>内に参照します。必ず16px版をブラウザタブでテストしてください。なぜなら、このサイズで見分けがつかない場合、どれだけ大きなバージョンを用意しても解決しないからです。また、ロゴがベクター形式の場合は、高DPIスクリーンでの鮮明なレンダリングのためにSVG版も保持することをお勧めします。
ファビコンに必要なサイズは？
ファビコンは様々なコンテキストで異なるサイズで表示されるため、適切なサイズを提供することがどこでもシャープに見えるための鍵となります。
| Size | File | Used for |
|---|---|---|
| 16x16 | ICO / PNG | ブラウザタブ（レガシー） |
| 32x32 | ICO / PNG | ブラウザタブ（retina） |
| 180x180 | PNG | Apple Touch icon |
| 192x192 | PNG | Androidホーム画面 |
| 512x512 | PNG | PWA / splash |
| 任意 | SVG | モダンブラウザ、高DPI |
- 16px版が最も重要です。これがほとんどの人がタブ上で目にするものです。
- Apple Touch iconは、iOSでのホーム画面表示のために180pxが必要です。
- SVGは複数のファイルを必要とせず、あらゆる解像度のモダンブラウザに対応します。
- ICOファイル一つで複数のサイズをバンドルし、レガシーサポートを行います。
16pxでも機能するファビコンのデザイン方法は？
ファビコンの課題は、それがわずか16ピクセルという非常に小さなサイズで見分けがつく必要がある点です。512pxで見栄えの良いディテールも、16pxでは消えてしまうため、デザインはシンプルでなければなりません。
- 単一の、大胆な形状を使用してください。文字、ロゴマーク、シンプルなアイコンなどが適しています。
- 細い線や小さなテキストは避けてください。16pxでは消えてしまいます。
- 高コントラストを使用して、背景に対して形が際立つようにします。
- 納品前に必ず16px版を実際のサイズでテストしてください。
よくある間違いは、ロゴ全体とテキストを使用することです。16pxでは文字が判読できず、ファビコンがぼやけたシミのように見えてしまいます。対策は、最も認識しやすい単一の要素（アイコンまたは頭文字）を抽出し、それをファビコンとして使用することです。SVG to PNG guideでは、必要なサイズでベクターマークをエクスポートする方法を解説しています。
どのようなファイルフォーマットを生成すべきか？
ブラウザのサポートが時間とともに進化してきたため、ファビコンは複数のフォーマットに及びます。これらすべてをカバーすることで、どこでもアイコンが機能することが保証されます。
- ICO — レガシーフォーマットで、複数のサイズをバンドルし、すべてのブラウザでサポートされています。
- PNG — モダンな標準であり、サイズごとにファイルが必要です。
- SVG — ベクター形式で、あらゆるサイズにスケーリングでき、モダンブラウザでサポートされています。
- Apple Touch PNG — iOSのホーム画面アイコン専用の180x180です。
| Format | When to use |
|---|---|
| ICO | レガシーブラウザ対応、複数サイズをバンドル |
| PNG | モダンブラウザ、サイズごとのファイル |
| SVG | モダンブラウザ、単一のスケーラブルファイル |
| Apple Touch PNG | iOSホーム画面 |
レガシー互換性のためにICOを、幅広いサポートのために各サイズでPNGを、そしてソースがベクターの場合はSVGを生成してください。ファビコンジェネレーターがフォーマットの生成を処理し、画像切り抜きツールが最初にソースを正方形に切り抜きます。
HTMLでファビコンを参照する方法は？
生成されたファイルは、ブラウザに見つけられるようにページの<head>内で参照する必要があります。リンクタグは、どのコンテキストにどのファイルを使用するかをブラウザに伝えます。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
- ICOは、バンドルされたサイズでレガシーブラウザをカバーします。
- SVGは、あらゆる解像度のモダンブラウザに対応します。
- Apple Touch iconは、iOSのホーム画面での保存に対応します。
- 互換性を最大化するために、ファイルをサイトルートに配置してください。
Mozilla favicon guideではリンクタグとブラウザの動作が文書化されており、Web.dev app icons guideではAndroid向けのマスク可能アイコン標準について解説されています。デプロイ後に実際のブラウザタブやスマートフォンホーム画面で結果をテストしてください。レンダリングの不具合は、実際のコンテキストでのみ現れるからです。
ライトモードとダークモードのためのファビコンデザイン
モダンなブラウザやOSはライトモードとダークモードを切り替えるため、ライトなタブで見栄えの良いファビコンが、ダークなタブでは見えなくなってしまうことがあります。透過背景のPNGまたは適応色を持つSVGを使用することで、アイコン自体に背景を持たせるのではなく、周囲のChrome（枠）に適応させることで、両方のコンテキストに対応できます。
| Mode challenge | Solution |
|---|---|
| 暗いタブで暗いアイコンが消える | 控えめなアウトラインを追加するか透明を使用 |
| 明るいタブで明るいアイコンが消える | 同様 — アウトラインまたは適応色 |
| 16pxで読みにくい | 形を単純化、コントラストを向上 |
SVGファビコンの場合、SVG内にprefers-color-schemeメディアクエリを使用することで、ライトモードとダークモードのコンテキストで異なる色を提供でき、これが最もクリーンな解決策です。PNGの場合は、十分な内部コントラストを持つ透過背景の形状が両方で許容されます。目標は、ユーザーがライトモードまたはダークモードのどちらを実行しているかに関わらず、ファビコンがタブ内で読み取れるようにすることであり、これは例外ではなく、ますますデフォルトになりつつあります。
一般的なファビコンの間違い
- ディテールが多すぎる — 16pxではアイコンが認識できません。シンプルにしてください。
- 非正方形のソース — まず正方形に切り抜くか、アイコンが歪みます。
- Apple Touch iconの欠落 — iOSでの保存時に一般的なスクリーンショットが表示されます。
- SVGがない — 高DPIスクリーンでは、鮮明なベクターではなくぼやけたPNGがレンダリングされます。
- 16pxでテストし忘れる — ほとんどの人が目にするサイズでありながら、最も忘れられがちな点です。
ファビコンは小さいですが、サイトが表示されるあらゆる場所（タブ、ブックマーク、ホーム画面、検索結果）に登場します。すべてのサイズでシャープで認識可能なアイコンはブランドを瞬時に強化しますが、ぼやけたり欠落しているファビコンは、洗練されていない印象を与えます。16px版を完璧にする時間、そして全サイズのフォーマットセットを生成する時間を費やすことで、そのアイコンはどこに表示されてもサイトをきれいに表現します。この投資はわずかです（デザインとエクスポート作業で半日程度）が、ユーザーがタブやブックマーク、ホーム画面であなたのサイトを見るたびに報われます。これはほとんどのチームが認識しているよりも遥かに頻繁な回数なのです。
よくある質問
ファビコンに必要なサイズは？
モダンなセットとしては：16×16、32×32、48×48（クラシック）、さらに180×180（Apple touch icon）と192×192 / 512×512（Android）が必要です。マスターイメージ一つで全セットを生成できます。ブラウザがコンテキストごとに適切なサイズを選択します。
16pxでも機能するファビコンのデザイン方法は？
シンプルに保ちましょう。大胆な形状一つ、高いコントラスト、細かいディテールや文字は避けてください。16pxでは複雑なものはすべてシミになってしまいます。コミットする前にデザインを16pxでテストしてください。そこで読み取れない場合、それは複雑すぎます。
ファビコンにはどのようなファイルフォーマットを使用すべきか？
レガシー互換性のためにはICO、モダンブラウザおよびApple/AndroidアイコンのためにはPNG、そしてサポートされている場合は解像度に依存しないバージョンとしてSVGが必要です。全セットを生成してください。一つのフォーマットではすべてのデバイスをカバーできません。
HTMLでファビコンを参照する方法は？
各サイズとフォーマットを指す<link rel="icon">タグと、iOS用の<link rel="apple-touch-icon">を使用します。ブラウザが最適なものを選択します。完全なセットのリンクタグがすべてのプラットフォームをカバーします。
すべてのファビコンサイズに一つの画像を使えますか？
はい。単一の正方形マスター（512×512以上）から、16×16から512×512までの全セットを生成できます。最小サイズでも機能するように、マスター画像を16pxで読み取れるようにデザインしてください（大胆な形状一つ）。マスターは一つ、サイズは多数です。
ファビコンのテスト方法は？
サイトをブラウザタブで開き、16px（タブサイズ）、32px（ブックマーク）、および180px（Apple touch）でアイコンを確認します。もし16px版で見分けがつかない場合、デザインが複雑すぎます。大胆な形状一つにシンプル化してください。ファビコンは小さいですがどこにでも表示されるため、すべてのサイズでシャープで認識可能なアイコンはブランドを瞬時に強化します。
ICOファイルとは何ですか？
古いブラウザ（特に古いInternet Explorer）で使用される、異なるサイズの1つ以上のラスタ画像を含むレガシーコンテナフォーマットです。モダンなブラウザはPNGとSVGを使用するため、ICOは主に後方互換性レイヤーとしての役割を果たします。すべてのブラウザが利用できるように、PNG/SVGセットと一緒にICOを生成してください。
続けて読む
2026-07-26
HEICからJPGへの変換：無料ツールとバッチ処理方法を比較
Web、Mac、Windows、iPhone、コマンドラインなど、様々な環境で利用できる無料のツールを使ってHEIC形式のiPhone写真をJPGに変換する方法を徹底比較します。速度やバッチサポート機能、最適な使用シーンごとに詳細な情報を提供します。
2026-07-26
JPGからPDFへの変換方法：無料で使える手順と用途ガイド
JPG写真をPDFに変換し、フォーム作成やポートフォリオ、印刷物など様々な用途に使用できます。デバイスごとの具体的な操作手順、最適な解像度の選び方、そして品質を維持するための無料ツールをご紹介します。
2026-07-26
PNGからJPGへの変換：いつ切り替えるべきか、正しい手順とは？
PNGをJPGに変換することで、ファイルサイズを80%以上削減できます。PNGの透明度を維持する方法、背景の処理方法、そして品質を保ちながらバッチで変換する手順について詳しく解説します。