日本語English

favicon・PWA・SNS画像一式生成

1 枚の画像（または文字・絵文字）から、favicon.ico・apple-touch-icon・Android/PWA 用・maskable・OGP 画像と、manifest・head に貼るコードまでまとめて作れます。実寸のぼやけ確認つきで、画像はブラウザの外へ出ません。

端末内で処理・アップロードなし

ファイルや入力内容はお使いの端末（ブラウザ）の中だけで処理され、サーバーへは送信されません。

1. 元になる画像

ファイルをここにドロップ

または

画像はこの端末のブラウザ内で処理され、サーバーへは送信されません。対応形式: PNG / JPEG / WebP / SVG（中身で判定）1 ファイル最大 50 MB貼り付け（Ctrl+V）にも対応

使い方

  1. 「画像から作る」で PNG・JPEG・WebP・SVG をドロップするか、「文字・絵文字から作る」で 1〜2 文字を入力します。「サンプルで試す」ですぐ確認もできます。

  2. 余白・背景（透明／色）・角丸・正方形への収め方（全体を収める／中央を切り抜く）を調整します。プレビューが即座に更新されます。

  3. 16px・32px の実寸と拡大、ブラウザのタブ、iOS／Android のホーム画面、maskable のセーフゾーン、SNS のカードを見て、ぼやけや欠けがないか確認します。

  4. サイト名・短い名前・テーマカラー・ファイルを置くパス・サイト URL（OGP 用）を入力し、OGP 画像に載せるタイトルも必要なら入力します（日本語可）。

  5. 出力ファイルのオン／オフを選び、ZIP（icon_pack.zip）またはファイルごとにダウンロードします。

  6. 「貼り付け用コード」の HTML を <head> に、ファイルをサイトの指定パスに置けば完了です。

できること

必要なファイルを一式で

favicon.ico（16・32・48 px を 1 ファイルに収録）、favicon-16/32/48/96 の PNG、apple-touch-icon（180 px）、android-chrome（192・512 px）、maskable（512 px）、mstile（150 px）と browserconfig.xml、site.webmanifest、og-image.png（1200×630）、head に貼る HTML までを 1 つの ZIP にまとめます。

実寸と拡大でぼやけを確認

16px・32px を実寸と拡大で、ブラウザのタブ風・iOS／Android のホーム画面風・SNS のカード風に並べて表示。プレビューは実際に書き出すファイルそのものです。16px まで縮めて細部が潰れやすい絵には、簡略版を使うよう警告します。

maskable のセーフゾーンを守る

maskable アイコンは、直径 80% のセーフゾーンの円に収まる範囲（一辺 約 57%）に絵を置き、背景は全面を塗ります。点線の円のガイドで、円形・角丸のどのマスクでも欠けないことを確認できます。

縮小の品質を重視

大きな元画像は 1/2 ずつ段階的に縮小し、最後に高品質の補間で仕上げます。細い線やエッジが荒れにくく、SVG は 1024 px のマスターに描画してから各サイズへ縮めます。

選んだファイルに合わせたコード

manifest の icons と head のコードは、ZIP に入れるファイルだけを参照するよう自動で組み立てます。ファイルを置くパス（例: /icons/）や、OGP 用の絶対 URL も反映されます。

日本語の OGP 画像

OGP 画像のタイトルは日本語・絵文字に対応し、文字数に合わせて自動で縮小・折り返し（3 行まで）します。背景色に応じて文字色（白／濃紺）も自動で選びます。

こんなときに

  • 新しく作るサイトに必要な favicon・apple-touch-icon・OGP 画像を、1 回の操作でそろえたい
  • ロゴ SVG から、ICO・PNG・SVG の favicon と PWA 用アイコンを作り直したい
  • 文字 1 つ・絵文字 1 つだけの、簡単なアイコンを個人サイトや社内ツールに付けたい
  • PWA のインストール画面で、Android のマスクにアイコンが欠けないか確認したい
  • リンクを SNS やチャットに貼ったときのカード画像（1200×630）を、タイトル入りで作りたい

対応形式

入力

PNGJPEGWebPSVG（スクリプト等は除去して処理）文字・絵文字（1〜2 文字）

出力

ICO（PNG 埋め込み・16/32/48 px）PNGSVG（SVG 入力時のみ）site.webmanifest（JSON）browserconfig.xmlHTML スニペットZIP（icon_pack.zip）

対応状況

機能対応補足
画像・SVG・文字／絵文字から favicon 一式（ICO・PNG・apple-touch-icon・android-chrome・mstile）対応—
maskable アイコン（セーフゾーン 80% の円に収まる配置）と円形・角丸マスクのプレビュー対応—
site.webmanifest・browserconfig.xml・head 用 HTML の生成（選んだファイルだけを参照）対応—
OGP 画像（1200×630・背景色＋アイコン＋任意の日本語タイトル）対応—
16px・32px の実寸と拡大、ブラウザのタブ・ホーム画面・SNS カードのプレビュー対応—
favicon.svg の出力一部対応SVG 入力のときだけ。スクリプト・イベント属性・foreignObject・文書外を指す参照（外部の画像や CSS の @import / url()）・アニメーション（SMIL と CSS の animation）は除去し、文書内の <use>・グラデーション等の参照は残します。余白・背景・角丸を反映します
絵文字の文字アイコン一部対応お使いの端末の絵文字フォントで描画するため、端末ごとに見た目が変わります
アニメーション画像（GIF・APNG・アニメーション WebP）の入力、アニメーション ICO・アニメーション SVG非対応静止画のみ。アニメーション画像は読み込まず、SVG のアニメーションは除去します
Safari のピン留めタブ用 mask-icon（単色 SVG）の自動生成非対応単色化は絵に依存するため自動では作りません。必要なら単色の SVG を別途用意してください
256 px などほかのサイズの ICO、任意サイズの PNG、iOS の起動画像（apple-touch-startup-image）非対応出力サイズは上記の固定セットです
HEIC・AVIF・GIF・BMP・ICO など PNG／JPEG／WebP／SVG 以外の入力非対応画像形式変換ツールで PNG に変換してからお使いください
画像の回転・トリミング位置の指定・レタッチ非対応切り抜きは中央の正方形のみ。細かな編集は画像トリミングツールで

制限・注意事項

  • 1 回に読み込める画像は 1 枚、50 MB・1 億画素まで。SVG は 5 MB までです。
  • PNG に置く絵の大きさは、android-chrome 512 px（余白 0% のとき 512 px）、apple-touch-icon 180 px、maskable 約 290 px、OGP 画像のアイコン 300〜360 px で、いずれも余白の分だけ小さくなります。元の画像がそれより小さいと、該当のファイルは引き伸ばされてぼやけます（ファイル名と必要な大きさを警告に表示します）。
  • browserconfig.xml は mstile-150x150.png を参照するため、mstile をオフにすると browserconfig.xml も出力しません。
  • favicon.ico に入るのは 16・32・48 px の 3 サイズです。ほかのサイズは出力しません。
  • maskable は、どのマスクでも欠けないように絵を一辺 約 57% の範囲に収めます。余白の設定を小さくしても、この範囲より大きくはなりません。
  • Windows タイル（mstile）は、背景の色に合わせて見やすいよう余白を最低 15% 取ります。
  • apple-touch-icon・maskable・OGP 画像は透明にできないため、背景を「透明」にしていても、指定した背景色で塗りつぶします。
  • 文字・絵文字アイコンのフォントはお使いの端末に入っているものです。Web フォントは読み込みません。

プライバシーと安全性

画像の読み込みから、各サイズの作成・ICO の組み立て・ZIP の作成まで、すべてお使いのブラウザの中で行います。画像・入力した文字・サイト情報がサーバーへ送信・保存されることはありません。SVG は、スクリプトや外部参照を取り除いたうえで、画像として描画します。

よくある質問

favicon は何をそろえればよいですか？
最低限は、サイト直下の favicon.ico と、iOS 用の apple-touch-icon（180 px）です。そこに、拡大しても鮮明な favicon.svg（SVG があれば）と、PWA にする場合の site.webmanifest・android-chrome（192・512 px）・maskable を加えると、現在の主要なブラウザと OS をほぼ網羅できます。このツールは、必要なファイルと head のコードをまとめて出力します。
apple-touch-icon を透明のまま使うとどうなりますか？
iOS は透明な部分を黒などで塗りつぶすことがあり、意図しない見た目になります。そのため apple-touch-icon は透明にせず、指定した背景色で全面を塗って出力します。角丸も iOS 側が付けるので、四角のまま書き出します。
maskable アイコンとは何ですか？
Android などが円形や角丸にマスクして表示するための、全面に背景がある（透明でない）アイコンです。マスクで切り取られても絵が欠けないよう、直径 80% のセーフゾーンの円の内側に重要な部分を置きます。プレビューの点線の円で確認できます。manifest には purpose: "maskable" の別アイコンとして登録されます。
16px にするとぼやけたり、細部が潰れたりします。どうすればよいですか？
16px では、細い線や小さな文字、グラデーションの細かい差はほとんど表現できません。ロゴマークだけ・頭文字だけにする、線を太くする、要素を減らす、といった簡略版を用意するのが確実です。このツールの警告は、16px へ縮めたときの変化から判定しています。プレビューの拡大表示で確かめてください。
OGP 画像のサイズはどれがよいですか？
多くの SNS・チャットアプリで、1200×630 px（約 1.91:1）が推奨されます。このツールの og-image.png はこのサイズで、og:image は絶対 URL（https:// から始まる URL）にする必要があるため、サイトの URL を入力すると head のコードに反映されます。
画像はサーバーへ送られますか？
送られません。読み込み・変換・ZIP の作成はすべてブラウザ内で行い、画像や入力内容は保存されません。

関連ツール

画像一括リサイズ

画像をまとめてドロップして、幅・長辺・枠への切り抜きなど好きな方法で一括リサイズ。1 枚から 320・640・1280 のように複数サイズを一度に作り、srcset の HTML までコピーできます。画像はサーバーへ送信されません。

画像圧縮

画像をドロップするだけで、画質を保ったまま一括で軽量化。WebP・AVIF への変換やリサイズ、圧縮前後の見比べもできます。画像はサーバーへ送信されません。

画像形式変換

先に変換先の形式を選び、画像をドロップするだけで一括変換。形式ごとの画質やロスレス WebP、透過部分の背景色、出力ファイル名まで指定でき、画像はサーバーへ送信されません。

トリミング・余白・キャンバス調整

ドラッグで範囲を決めてトリミングし、回転・傾き補正・余白の追加まで 1 画面で。X ヘッダーや Instagram の推奨サイズにそのまま書き出せます。画像はサーバーへ送信されません。

画像エディター

スクショや写真に注釈を入れ、見せられない部分を確実に隠し、色を整えて書き出すまでを 1 画面で。手順書・不具合報告・SNS 投稿向けです。画像はサーバーへ送信されず、書き出した画像にメタデータは残りません。

EXIF・GPS削除

写真に埋め込まれた撮影場所（GPS）・カメラ・撮影日時などを、画質を一切落とさずに削除します。削除前の中身の確認と、削除後の検証まで、すべてブラウザ内で完結します。

最終更新: