画像からアイコン&ファビコン一括生成ツール 1枚の画像から favicon.ico と iOS/Android アプリアイコンを瞬時に作成

高解像度のPNGまたはJPGロゴを1枚アップロードするだけで、マルチ解像度の favicon.ico、HTML <head> コード、さらに iOS・Android・macOS・Windows 規格のアプリアイコン一式をブラウザ内で安全にパッケージ化します。

100% ブラウザ内ローカル処理 — ファイルはサーバーに送信されず、プライバシーを完全保護

ここにPNGまたはJPGファイルをドロップしてください

またはクリックしてファイルを選択

最良の結果を得るには、少なくとも512x512ピクセルの正方形の画像をアップロードしてください。

出力サンプル・比較事例

生成されるアイコンパッケージの実例

1024×1024px のマスター画像1枚から、用途に応じたフォルダ構成・バイナリファイル・HTMLタグが自動出力されます。

Webサイト&PWA向け #01

Web用 Favicon.zip 一式 + HTML <head> タグ

入力データ
brand-mark.png • 1024×1024 px • 32bit 透過PNGロゴ
出力結果
favicon.ico (16/32/48px統合) + apple-touch-icon.png (180×180) + Android 192/512px + HTMLコード

1つのファイルに複数解像度を格納した正規バイナリ favicon.ico に加え、iPhoneホーム画面用アイコン、Android Chrome用アイコン、コピペで使えるHTML <link> タグをまとめて出力します。

iOS & Android アプリ開発 #02

Xcode .appiconset & Android Studio mipmap パック

入力データ
saas-app-icon.png • 1024×1024 px • 背景塗りつぶし済み正方形アイコン
出力結果
iOS AppIcon.appiconset (20px〜1024px @1x/@2x/@3x) + Android mipmap-mdpi〜xxxhdpi PNG一式

PhotoshopやFigmaで20種類以上のサイズを手作業で書き出す手間をゼロに。App Store提出用の1024×1024pxから各端末の解像度フォルダまで公式命名規則通りにZIP化します。

Windows & macOS デスクトップ #03

Windows .ICO & macOS .ICNS 実行ファイル用アイコン

入力データ
electron-tool-logo.png • 1024×1024 px • 高コントラストなツールロゴ
出力結果
Windows マルチサイズ .ico (最大256×256px) + macOS Retina対応 .icns ファイル

Electron、Tauri、Flutter、.NET などのデスクトップアプリ開発に最適。コマンドラインツールを使わずにタスクバーやmacOS Dock用の高精細アイコンを作成できます。

1. 解決できる課題と活用シーン

このアイコン・ファビコン生成ツールはどんな課題を解決しますか?

現在のWebサイトやアプリ開発では、16×16pxの小さな画像1枚だけでは対応できません。ブラウザ、iPhone、Android、PCそれぞれに合計25種類以上のサイズと専用フォーマットが求められます。

拡張子を書き換えただけの「偽ICO」ではなく、正規のマルチレイヤー .ico を生成

PNGファイルの拡張子を単純に .ico に変更しただけでは、古いブラウザやWindowsエクスプローラーで表示されないことがあります。当ツールは16×16・32×32・48×48を1ファイルに統合した正規バイナリICOを生成します。

30分かかる手作業のリサイズ・リネームをわずか3秒に短縮

iOSの @1x/@2x/@3x や Android の mdpi〜xxxhdpi フォルダを手動で書き出すとサイズ間違いが起きがちです。1024×1024pxの元画像をドロップするだけで全サイズを自動整理します。

100%ブラウザ内処理だからリリース前の新サービス・社内アプリのロゴも安全

画像のリサイズからバイナリ変換、ZIPアーカイブ作成まですべてお使いのブラウザ内(JavaScript)で完結します。外部サーバーへロゴ画像が送信されることは一切ありません。

2. 準備する入力ファイルと仕様

準備する入力画像と推奨仕様

1024×1024pxのストア用アイコンから16×16pxのブラウザタブまでくっきり表示させるため、以下の条件を満たす元画像をご用意ください。

1:1 の正方形画像(1024×1024 px 推奨)

縦横比が1:1の正方形画像をご用意ください。最低512×512px以上、iOS App Store用アイコンも含める場合は 1024×1024px が必須です。長方形や低解像度の場合は警告が表示されます。

高画質な PNG または JPG(SVGの場合は先にPNG変換)

.png / .jpg / .jpeg に対応しています。元データが .svg ベクターファイルの場合は、先に当サイトの「SVG PNG 変換」で 1024×1024px のPNGとして書き出してからご利用ください。

細かい文字を省いた、シンプルで視認性の高いシンボルマーク

16×16pxのファビコンサイズに縮小されると、長い社名テキストや細い線は潰れて読めなくなります。シンボルマークまたは頭文字のみを大きく中央に配置したデザインが最適です。

用途に応じた「透過背景」と「塗りつぶし背景」の使い分け

ブラウザのタブ用ファビコンやPCアイコンには透過PNGが映えますが、iOSアプリアイコンは透過部分が強制的に黒く塗りつぶされる仕様のため、不透明な背景色をつけておくことをおすすめします。

3. 具体的な操作手順

具体的な操作手順(4ステップ)

1

1. 正方形のPNG/JPG画像をアップロード(またはサンプルを試す)

青いドロップゾーンに画像をドラッグ&ドロップするか、「サンプルアプリアイコンで試す」をクリックします。左側のプレビューで画像サイズと比率が自動チェックされます。

2

2. 「Favicon(Web用)」または「App Icon(アプリ用)」を選択

右側の選択カードから、Webサイト・ブログ・PWA用のファビコン一式を作るか、スマホ・PCアプリ用のアイコンパックを作るかを選びます。

3

3. 対象プラットフォームを選択して生成ボタンを押す

アプリ用アイコンを選んだ場合は、iOS (.appiconset)、Android (mipmap PNGs)、macOS (.icns)、Windows (.ico) の中から必要なOSにチェックを入れて生成ボタンをクリックします。

4

4. ZIPファイルをダウンロード&HTMLコードをコピー

生成された Favicon.zip または App-Icons.zip をダウンロードします。Web用ファビコンの場合は、出力されたHTML <link> タグを「Copy」ボタンでコピーしてサイトの <head> に貼り付けます。

4. 出力結果の活用方法

生成されたアイコン一式の導入・活用方法

ダウンロードしたZIPファイルは、各プラットフォームの標準ディレクトリ構造に沿って整理されています。

Webサイトのルートディレクトリ配置&HTML <head> への記述

Favicon.zip を解凍してサイトの公開ルート(Next.jsやAstroの /public フォルダ、WordPressのルートなど)に配置し、生成された <link> タグを <head> 内に貼り付けるだけで完了です。

Xcode の Assets.xcassets & Android Studio の res フォルダへ直接導入

iOS用の .appiconset フォルダはそのままXcodeのアセットカタログへドラッグでき、Android用の mipmap-* フォルダは app/src/main/res/ にそのままマージできます。

Electron・Tauri・Flutter デスクトップアプリのビルド設定

electron-builder や tauri.conf.json のアイコン設定パスに、生成された Windows用 .ico と macOS用 .icns をそのまま指定してインストーラーをビルドできます。

5. うまくいかないケースと対処法

アイコンがぼやける・崩れるケース(注意点)と対処法

アイコン作成でよくある3つの失敗パターンと、きれいに仕上げるための解決策です。

横長のヘッダー用ロゴ画像(例:800×200 px)をそのままアップロードした場合

原因:

ファビコンやアプリアイコンはすべて1:1の正方形枠に収められます。横長のロゴを16×16pxの正方形に縮小すると、縦幅がわずか3〜4ピクセルになり判別不能になります。

解決策:

アップロード前に文字部分を除いた正方形のシンボルマーク部分だけを切り抜き、1024×1024px の正方形画像として書き出してください。

iPhone(iOS)のホーム画面アイコンの背景が真っ黒になってしまう場合

原因:

AppleのiOSガイドラインではアプリアイコンのアルファ透過が禁止されており、透明なピクセルはOS側で自動的に黒(#000000)で塗りつぶされます。

解決策:

iOSアプリ用アイコンや apple-touch-icon を作成する際は、あらかじめ白やブランドカラーの不透明な正方形背景を敷いた画像をご用意ください。

16×16 px のファビコン表示で細かい線が潰れてぼやけて見える場合

原因:

1024pxの緻密なイラストを16px(面積比4096分の1)まで縮小すると、細い線やグラデーションがアンチエイリアス処理で1ピクセルに混ざり合ってしまいます。

解決策:

ファビコン用の元画像は、線を太くし、要素を絞ったコントラストの高いデザインにすることで16×16pxでもくっきり視認できるようになります。

6. 関連ツールとの違い・比較

当サイト内の関連ツールとの違い・連携ワークフロー

3つのツールを組み合わせることで、ベクターロゴからWeb・アプリ用アイコンの完成まで一貫して処理できます。

比較項目 画像からアイコン生成(当ツール) SVG PNG 変換ツール PNG 圧縮ツール
主な役割 1枚のマスター画像から .ico / .icns / 各OS用アイコンフォルダを一括作成 ベクター .svg を指定ピクセルサイズの透過 .png 画像に変換 ピクセル寸法を変えずに .png のファイル容量だけを最大75%圧縮
対応する入力形式 .png / .jpg / .jpeg(1024×1024px 正方形推奨) .svg ベクターファイル または SVGコード貼り付け .png 画像ファイル(24bit RGB / 32bit RGBA)
出力されるファイル Favicon.zip(+HTMLコード)または App-Icons.zip 高解像度の単一 .png 画像(最大4K・300DPI対応) 解像度維持のまま軽量化された .png 画像
おすすめの連携手順 ステップ2:1024×1024のPNGからファビコン&アプリアイコン一式を生成 ステップ1:ベクターのロゴ.svgを 1024×1024px のPNGに変換 ステップ3:必要に応じて大判PNGアイコンの容量をさらに圧縮
7. よくある質問とトラブルシューティング

よくある質問とトラブルシューティング (FAQ)

手元にあるロゴが .svg ファイルなのですが、どうやって favicon.ico を作ればいいですか?

まずは上部ナビゲーションから「SVG PNG 変換ツール」を開き、カスタムサイズを「1024 × 1024 px」に指定してPNGをダウンロードしてください。そのPNGをこのページにドロップすれば、最高画質のファビコンとアプリアイコン一式が作れます。

Web用の Favicon.zip には具体的にどのサイズのファイルが入っていますか?

16×16・32×32・48×48を内包したマルチレイヤー favicon.ico、favicon-16x16.png、favicon-32x32.png、iPhone/iPad用の apple-touch-icon.png (180×180px)、Android/PWA用の 192×192px および 512×512px のPNG画像がすべて同梱されています。

サーバーの favicon.ico を新しいものに差し替えたのに、ブラウザの表示が変わらないのはなぜですか?

ブラウザはファビコンを非常に強くキャッシュするためです。シークレットウィンドウ(プライベートブラウズ)で確認するか、HTMLのリンクタグを <link rel="icon" href="/favicon.ico?v=2"> のようにクエリパラメータ付きに変更すると即座に反映されます。

アップロードした未公開アプリのロゴ画像が外部に漏れることはありませんか?

一切ありません。画像のリサイズ、.ico/.icns バイナリの生成、JSZipによるZIP圧縮まですべてお使いのブラウザ内だけで処理され、サーバーへの送信や保存は行われません。

なぜ 1024×1024 ピクセルの画像を用意するのがおすすめなのですか?

iOSのApp Store登録用アイコンが 1024×1024px を必須としており、macOSのRetinaアイコンも最大 1024×1024px を使用するためです。大きい元画像から縮小(ダウンサンプリング)することで、すべてのサイズで滲みのないシャープなアイコンが生成できます。

関連する画像・ベクターツール

用途ごとに特化したブラウザ完結型ツールと連携して作業を効率化できます。

このツールを共有

この無料でプライベートなSVGからPNGへのコンバーターを他の人が見つけられるように手伝ってください。