ブログに戻る
チュートリアル

あらゆるブラウザで機能するファビコンセット（2026年版）

6つのサイズ、1つの .ico、1つのマニフェスト — 2026年のあらゆるブラウザ、iOS ホーム画面、Windows タスクバーで正しく表示されるファビコンを配信するために実際に必要なすべてのもの。

Admin2026年4月23日1 分で読めます34

ファビコンは単純に見えます。1つ配信すると、100 個のエッジケースが出現します：iOS ホーム画面のアイコンがぼやけている、Android Chrome タブの色が違っている、Windows ピン留めが 16×16 のぼやけた画像を表示している。このガイドはノイズを排除し、2026年に実際に必要なもの、それ以上でもそれ以下でもないものを説明します。

最小限の実行可能セット

6つのアセットがサイトのアイコンを表示するすべてのサーフェスをカバーします：

  • favicon.ico — 内部に 16×16、32×32、48×48 を含むマルチサイズコンテナ（レガシーブラウザ、Windows エクスプローラー、固定タブ）。
  • favicon-16x16.png、favicon-32x32.png — モダンブラウザのタブ。
  • apple-touch-icon.png (180×180) — iOS ホーム画面、Safari リーディングリスト。
  • android-chrome-192x192.png、android-chrome-512x512.png — Android ホーム画面、PWA インストールプロンプト。
  • site.webmanifest — Android アイコンを指し、テーマカラーを定義する PWA 設定。

以上です。その他すべて（Safari ピン留めタブ SVG、古い Apple タッチバリアント、Windows タイル画像）はレガシーです。モダンブラウザは 192 または 512 の PNG に適切にフォールバックします。

2026年でも .ico をまだ使う理由

.ico ファイルは、異なるサイズの複数の PNG 画像を保持できるバイナリコンテナです。ブラウザが /favicon.ico をリクエストするとき（デフォルトではまだそうするものもある）、3つのサイズすべてが 1つのリクエストで提供されます。レンダラーは現在のサーフェスに最適なものを選択します — Windows エクスプローラーの場合は 48×48、ブラウザタブの場合は 16×16。

.ico に名前変更された PNG は 1つのサイズのみを含みます。ブラウザは許容的であるため、ほとんど機能しますが、Windows エクスプローラーと一部のメールクライアントはそれをぼやけてレンダリングするか、表示を拒否します。一貫性を求める場合は、実際の .ico を配信してください。

site.webmanifest の役割

ユーザーがサイトを Android ホーム画面に追加したり、PWA としてインストールしたりすると、ブラウザは site.webmanifest を読んで、インストール済みアプリの外観を確認します。以下を定義します：

  • name / short_name — アイコンの下のラベル。
  • icons — どのサイズでどの PNG を使うか。
  • theme_color — アプリが開いているときのステータスバーの色。
  • background_color — 起動中のスプラッシュスクリーン背景。
  • display — 通常は standalone で、アプリはブラウザクロームなしで開きます。

マニフェストがないと、Android は apple-touch-icon にフォールバックし、サイトをブラウザウィンドウ内に表示します。マニフェストがあると、ネイティブアプリのように見えます。

HTML スニペット

すべてのファイルはウェブルートに入ります。すべてのサイトは <head> にこのブロックが必要です：

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">

16×16 でのデザイン

素晴らしい詳細ロゴは 16 ピクセルで死にます。16 ピクセルで明確に読める可能性を作成するためのルール：

  • 1つの形状。 円、正方形、または強力なモノグラム。複合形態を避けてください。
  • 高コントラスト。 前景と背景は最低でも WCAG AA で分離される必要があります。微妙なグラデーションは消えます。
  • 安全なマージン。 10～20% のパディングを残してください。ブラウザはしばしば独自の 1px ボーダーを追加します。
  • テキスト？ 16px では完全な単語よりも 1つの太字の文字の方が機能が良いです。

aukimi ファビコンジェネレーターは、1つの画像またはレターから 30秒以内に 6つのファイルと HTML スニペットを生成します。Microsoft ICONDIR 仕様に従った実際のマルチサイズ .ico を生成します。名前が変更された PNG ではありません。アップロード、サイズを選択、ダウンロード、スニペットを貼り付け — 完了。

よくある間違い

  • キャッシュヘッダーなしで CDN から .ico を配信する。 ブラウザはファビコンを積極的にキャッシュします。バージョン管理された URL (?v=2) を使用してデザイン変更後に更新を強制します。
  • サブドメインごとに異なるアイコン。 頂点での 1つの favicon.ico は通常ユーザーが期待するもの — アイデンティティを分割しないでください。
  • theme-color メタを忘れる。 モバイル Chrome はブラウザクロームをこの値に合わせて着色します。スキップするとデフォルトのグレーが残ります。

良いファビコンは最高の方法で退屈です — ユーザーはそれが欠落しているか間違っているときに気付き、正しいときは決して気付きません。6つのファイルを配信して先に進みます。

#favicon#web-design#pwa#branding

この記事はいかがでしたか？

ShareHN

関連記事

industry

クリエイティブスタックが崩壊した：2026年4月下旬の1週間のAIツール

2026年4月27日から5月4日の間に、Adobe、Luma、Novi、fal、Figma、Canva、HeyGen、Anthropicが8日間ですべて同じ閾値を超えた。ここではどのようなものがリリースされたか、それが何を意味するのか、そしてそれをすべて統合しようとしているブラウザベースのクリエイティブスイートがどのような立場に置かれているのかについて説明します。

2026年5月4日記事を読む
industry

2026年のAIミュージックとSFX：インディーゲームオーディオで実際に機能するもの

3年前、インディーゲームのオーディオは、ロイヤリティフリーライブラリのライセンス（安価だが汎用的で、すべてのゲームが同じに聞こえる）か、作曲家の雇用（素晴らしいが高額）のどちらかでした。2026年、AIは出荷可能なスコアを生成します。どのツールが機能するのか、そしてヒューマン作曲家がまだ勝つ場所を説明します。

2026年5月2日記事を読む
industry

2026年のAIメッシュ生成：ゲームパイプラインで実際にシップするもの

Image-to-3Dは「不気味なデモ」から「インディープロジェクトでシップ」へ18ヶ月で進化しました。Tripo、Meshy、Rodin、Hyper3Dが本番環境で実際に何をするのか、そして3Dアーティストがモデルに勝つ場面はどこかを説明します。

2026年4月28日記事を読む
ブログに戻る