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

ICOファイル作成ガイド - Windowsアイコンとファビコンの作り方

著者： ImgConvert更新日：
5 min read
ICOファイルファビコン
ICOファイル作成ガイド - Windowsアイコンとファビコンの作り方

ICOファイルはWindowsアプリケーションのアイコンやウェブサイトのファビコンに使われます。一つのファイルに複数のサイズを格納できるため、Windowsやブラウザは表示サイズに近い画像を選べます。ただし、小さなサイズでは細部が不鮮明になることもあります。このガイドでは、ICO形式の基礎とアイコンを作成する手順を説明します。

ICOフォーマットとは？

WindowsとブラウザのコンテキストにWindowsと複数のアイコンサイズを配布するマスターICOファイルの視覚的概要

ICOはMicrosoftがアイコン専用に開発したコンテナフォーマットです。最大の特徴は、一つの.icoファイルが異なるサイズと色深度の複数の画像を格納できることです。

Windowsやウェブブラウザは、ICOファイル内から表示サイズに近い画像を選びます。複数のサイズを用意すると拡大・縮小を減らせますが、小さなサイズでは細部が不鮮明になることがあります。16×16、32×32、256×256など、実際に使うサイズで見え方を確認してください。

ICOの主な特性：

  • 複数の埋め込み画像のコンテナ
  • 各埋め込み画像は異なるサイズと色深度を持てる
  • PNG-32エンコードによる完全な透明度サポート 利用先がICOと用意したサイズに対応するか確認してください。

ICOファイルが必要な理由

Windowsアプリケーション向け

WindowsはオペレーティングシステムのあらゆるところでICOファイルを使用しています：

  • デスクトップのショートカットとアプリケーションアイコン
  • タスクバーのアイコン
  • スタートメニューのアイコン
  • ファイル関連付けアイコン（特定のファイルタイプに表示されるアイコン）
  • Alt+Tabスイッチャーのアイコン

適切なICOファイルがないと、アプリケーションにはWindowsのデフォルトの汎用アイコンが表示されます。

ウェブサイトのファビコン向け

すべてのウェブサイトにはファビコンが必要です。ファビコンは以下の場所に表示されます：

  • ブラウザのタブ
  • ブックマークリスト
  • ブラウザの閲覧履歴
  • ホーム画面ショートカット（モバイルデバイスに保存した場合）
  • アドレスバー

モダンブラウザはPNGファビコンにも対応しています。使用先がICO形式と用意したサイズに対応しているか確認してください。どの形式も、すべてのブラウザやデバイスでの互換性を保証するものではありません。

ICOファイルの作成方法

PNGからサイズを選んで作る場合はPNGからICOへを使います。

  1. 20 MB以下のPNGを1枚アップロードします。
  2. 16、32、48、64、128、256 pxを選びます。初期選択は32、64、128です。
  3. 変換後にicons.zipを保存して解凍します。
  4. 個別サイズか、全選択サイズ入りのfavicon.icoを使います。

長方形は縦横比を保って収められ、余白は透明です。大きく見せたい場合は事前に正方形へ切り抜きます。固定サイズのPNGやマニフェストも必要ならFavicon Generatorを使いますが、こちらにはサイズ選択がありません。

用途別の必要サイズ

使用先に合わせて選びます。当サイトは16、32、48、64、128、256 pxに対応し、24 pxはありません。必要な寸法を含め、最小サイズを確認してください。すべての環境で互換性と鮮明さを保証する組み合わせはありません。

アイコンのデザインベストプラクティス

シンプルさを優先する

アイコンは非常に小さいサイズで表示されます。512×512で詳細で洗練されて見えるデザインも、16×16では認識できないぼやけになることがあります。

  • 強くシンプルな形状を使う — 細かいイラストではなく、大胆な幾何学的形状
  • 高コントラスト — 明るい背景と暗い背景の両方で読みやすくある必要がある
  • 明確なシルエット — 全体の形が色の細部なしでも認識できるべき
  • 限定的な色 — 3〜5色で十分

最小サイズから先にデザインする

よくある間違いは、美しい大きなアイコンをデザインしてから、縮小してうまくいくことを期待することです。代わりに：

  1. 16×16でどのように見えるかを考えてデザインを始める
  2. その制約を念頭に置いてデザインを作成する
  3. 大きいサイズは詳細と磨きを加えるために使用する

細かい詳細を避ける

小さいサイズでは以下の要素が問題になります：

  • 細い線 — 消えるか不明瞭になる；最低2pxのストローク幅を使用する
  • 小さなテキスト — 約32px以下では読めない
  • グラデーション — 大きいサイズでは美しく見えるが、小さいサイズでは平らなブロブになる

既存の画像をICOに変換する

PNGから（最も一般的）

PNGはICO変換に最適なソースフォーマットです：

  • 透明な背景を持つ正方形のPNG
  • 高解像度（512×512以上）
  • クリーンでスムーズなエッジ

JPGから

JPGは使えますが制限があります：

  • 透明度なし — 透明にするつもりの領域は手動で処理する必要がある
  • 正方形にトリミングする

SVGから

SVGは実際には優れた出発点です（無限にスケーラブルなため）：

  • まずSVGを高解像度PNG（512×512以上）にエクスポートする
  • 次にPNGをICOに変換する

ウェブサイトのファビコンHTML実装

基本実装

<link rel="icon" type="image/x-icon" href="/favicon.ico">

モダンなマルチフォーマット実装

<!-- 標準ファビコン -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- モダンブラウザ向けPNGファビコン -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- iOSホーム画面向けAppleTouchアイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

品質のトラブルシューティング

ぼやけたアイコン

原因： ICOファイルに要求されている特定のサイズがないため、最も近いサイズからWindowsがスケールしている

解決策： 一般的に必要なすべてのサイズ（16、32、48、256）を含める

ジャギーまたはエイリアシングされたエッジ

原因： フルアルファ透明度の代わりにバイナリ透明度（1ビット）を使用している

解決策： フルアルファチャンネルを持つPNG-32ソースファイルを使用する

ブラウザでファビコンが表示されない

原因： ブラウザキャッシュ、誤ったHTML、または間違ったファイルパス

解決策：

  1. ブラウザキャッシュをクリアしてハードリフレッシュ（Ctrl+Shift+R）
  2. <link>タグが<head>にあり、hrefパスが正しいことを確認
  3. ファイルが実際にアクセス可能であることを確認

よくある質問

ICOにはどのサイズを含めるべきですか？

使用先に合わせて選びます。当サイトは16、32、48、64、128、256 pxに対応し、24 pxはありません。必要な寸法を含め、最小サイズを確認してください。すべての環境で互換性と鮮明さを保証する組み合わせはありません。

ファビコンにICOの代わりにPNGを使えますか？

はい、モダンブラウザはPNGファビコンをサポートしています。しかし、ICOはより広い互換性を提供します — 特にデフォルトでルートディレクトリのfavicon.icoを探す古いブラウザ、メールクライアント、サードパーティツールとの互換性が高いです。

なぜアイコンがぼやけて見えるのですか？

ICOファイルにWindowsやブラウザが実際に表示しようとしているサイズが含まれていません。必要なすべてのサイズを含めてください。

アイコンは常に正方形であるべきですか？

この変換ツールは長方形を縦横比を保って正方形に収め、余白を透明にします。自動的な切り抜きや引き伸ばしはしません。

透明なアイコンを作るにはどうすればいいですか？

透明部分のあるPNGを使います。元のアルファは別のスイッチなしで保持されます。ZIPを展開して各サイズを確認してください。縮小で細い輪郭が変わる場合があります。

まとめ

適切なICOファイルの作成は、フォーマットが単一の画像ではなく複数のサイズのコンテナであることを理解すれば簡単です。クリーンで正方形の高解像度PNGソースから始め、用途に必要なサイズを含め、異なる表示環境と使用する各サイズで結果を確認してください。小さなサイズでは細部が不鮮明になることもあります。

ICOファイルを作成する →

関連ツール：ファビコンジェネレーター | 画像リサイズ | PNG変換

次の画像作業に使えるツール

ImgConvert の画像変換、PDF、GIF ツールを探せます。

  • 画像形式の変換
  • PDF ツール
  • GIF ツール
すべてのツールを見る