高解像度のPNGまたはJPGロゴを1枚アップロードするだけで、マルチ解像度の favicon.ico、HTML <head> コード、さらに iOS・Android・macOS・Windows 規格のアプリアイコン一式をブラウザ内で安全にパッケージ化します。
100% ブラウザ内ローカル処理 — ファイルはサーバーに送信されず、プライバシーを完全保護
またはクリックしてファイルを選択
最良の結果を得るには、少なくとも512x512ピクセルの正方形の画像をアップロードしてください。
すべての最新ブラウザとデバイス用。
iOS、Android、macOS、Windows用。
複数のPNGサイズ、favicon.icoファイル、構成ファイルを含む完全なパッケージが生成されます。
1024×1024px のマスター画像1枚から、用途に応じたフォルダ構成・バイナリファイル・HTMLタグが自動出力されます。
1つのファイルに複数解像度を格納した正規バイナリ favicon.ico に加え、iPhoneホーム画面用アイコン、Android Chrome用アイコン、コピペで使えるHTML <link> タグをまとめて出力します。
PhotoshopやFigmaで20種類以上のサイズを手作業で書き出す手間をゼロに。App Store提出用の1024×1024pxから各端末の解像度フォルダまで公式命名規則通りにZIP化します。
Electron、Tauri、Flutter、.NET などのデスクトップアプリ開発に最適。コマンドラインツールを使わずにタスクバーやmacOS Dock用の高精細アイコンを作成できます。
現在のWebサイトやアプリ開発では、16×16pxの小さな画像1枚だけでは対応できません。ブラウザ、iPhone、Android、PCそれぞれに合計25種類以上のサイズと専用フォーマットが求められます。
PNGファイルの拡張子を単純に .ico に変更しただけでは、古いブラウザやWindowsエクスプローラーで表示されないことがあります。当ツールは16×16・32×32・48×48を1ファイルに統合した正規バイナリICOを生成します。
iOSの @1x/@2x/@3x や Android の mdpi〜xxxhdpi フォルダを手動で書き出すとサイズ間違いが起きがちです。1024×1024pxの元画像をドロップするだけで全サイズを自動整理します。
画像のリサイズからバイナリ変換、ZIPアーカイブ作成まですべてお使いのブラウザ内(JavaScript)で完結します。外部サーバーへロゴ画像が送信されることは一切ありません。
1024×1024pxのストア用アイコンから16×16pxのブラウザタブまでくっきり表示させるため、以下の条件を満たす元画像をご用意ください。
縦横比が1:1の正方形画像をご用意ください。最低512×512px以上、iOS App Store用アイコンも含める場合は 1024×1024px が必須です。長方形や低解像度の場合は警告が表示されます。
.png / .jpg / .jpeg に対応しています。元データが .svg ベクターファイルの場合は、先に当サイトの「SVG PNG 変換」で 1024×1024px のPNGとして書き出してからご利用ください。
16×16pxのファビコンサイズに縮小されると、長い社名テキストや細い線は潰れて読めなくなります。シンボルマークまたは頭文字のみを大きく中央に配置したデザインが最適です。
ブラウザのタブ用ファビコンやPCアイコンには透過PNGが映えますが、iOSアプリアイコンは透過部分が強制的に黒く塗りつぶされる仕様のため、不透明な背景色をつけておくことをおすすめします。
青いドロップゾーンに画像をドラッグ&ドロップするか、「サンプルアプリアイコンで試す」をクリックします。左側のプレビューで画像サイズと比率が自動チェックされます。
右側の選択カードから、Webサイト・ブログ・PWA用のファビコン一式を作るか、スマホ・PCアプリ用のアイコンパックを作るかを選びます。
アプリ用アイコンを選んだ場合は、iOS (.appiconset)、Android (mipmap PNGs)、macOS (.icns)、Windows (.ico) の中から必要なOSにチェックを入れて生成ボタンをクリックします。
生成された Favicon.zip または App-Icons.zip をダウンロードします。Web用ファビコンの場合は、出力されたHTML <link> タグを「Copy」ボタンでコピーしてサイトの <head> に貼り付けます。
ダウンロードしたZIPファイルは、各プラットフォームの標準ディレクトリ構造に沿って整理されています。
Favicon.zip を解凍してサイトの公開ルート(Next.jsやAstroの /public フォルダ、WordPressのルートなど)に配置し、生成された <link> タグを <head> 内に貼り付けるだけで完了です。
iOS用の .appiconset フォルダはそのままXcodeのアセットカタログへドラッグでき、Android用の mipmap-* フォルダは app/src/main/res/ にそのままマージできます。
electron-builder や tauri.conf.json のアイコン設定パスに、生成された Windows用 .ico と macOS用 .icns をそのまま指定してインストーラーをビルドできます。
アイコン作成でよくある3つの失敗パターンと、きれいに仕上げるための解決策です。
ファビコンやアプリアイコンはすべて1:1の正方形枠に収められます。横長のロゴを16×16pxの正方形に縮小すると、縦幅がわずか3〜4ピクセルになり判別不能になります。
アップロード前に文字部分を除いた正方形のシンボルマーク部分だけを切り抜き、1024×1024px の正方形画像として書き出してください。
AppleのiOSガイドラインではアプリアイコンのアルファ透過が禁止されており、透明なピクセルはOS側で自動的に黒(#000000)で塗りつぶされます。
iOSアプリ用アイコンや apple-touch-icon を作成する際は、あらかじめ白やブランドカラーの不透明な正方形背景を敷いた画像をご用意ください。
1024pxの緻密なイラストを16px(面積比4096分の1)まで縮小すると、細い線やグラデーションがアンチエイリアス処理で1ピクセルに混ざり合ってしまいます。
ファビコン用の元画像は、線を太くし、要素を絞ったコントラストの高いデザインにすることで16×16pxでもくっきり視認できるようになります。
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アイコンの容量をさらに圧縮 |
まずは上部ナビゲーションから「SVG PNG 変換ツール」を開き、カスタムサイズを「1024 × 1024 px」に指定してPNGをダウンロードしてください。そのPNGをこのページにドロップすれば、最高画質のファビコンとアプリアイコン一式が作れます。
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画像がすべて同梱されています。
ブラウザはファビコンを非常に強くキャッシュするためです。シークレットウィンドウ(プライベートブラウズ)で確認するか、HTMLのリンクタグを <link rel="icon" href="/favicon.ico?v=2"> のようにクエリパラメータ付きに変更すると即座に反映されます。
一切ありません。画像のリサイズ、.ico/.icns バイナリの生成、JSZipによるZIP圧縮まですべてお使いのブラウザ内だけで処理され、サーバーへの送信や保存は行われません。
iOSのApp Store登録用アイコンが 1024×1024px を必須としており、macOSのRetinaアイコンも最大 1024×1024px を使用するためです。大きい元画像から縮小(ダウンサンプリング)することで、すべてのサイズで滲みのないシャープなアイコンが生成できます。
用途ごとに特化したブラウザ完結型ツールと連携して作業を効率化できます。