nicetool.dev logo

PWAアセットジェネレータ - アプリアイコンとマニフェスト作成

ブラウザでローカルにPWAアイコンとマニフェストを生成します。画像がデバイスから離れることはありません。

画像をアップロード

画像をここにドラッグ&ドロップまたはクリックしてファイルを選択

PNG/JPEGをサポート、最小512x512px

マニフェスト設定

アイコンプレビュー

192x192

192x192px

Android / Chrome

512x512

512x512px

スプラッシュ画面

180x180

180x180px

iOS ホーム画面

512x512

512x512px

マスカブル (適応型)

マニフェストプレビュー

HTMLヘッドリンク

💡 すべての処理はクライアント側で行われ、プライバシーと速度が保証されます。

PWA資産ジェネレーターとは?

PWA資産ジェネレーターは、1つのソース画像からプログレッシブウェブアプリ(PWA)に必要なすべての資産を作成するのに役立つ無料ツールです。このツールは、favicon.ico、apple-touch-icon、さまざまなサイズのアイコン(16x16、32x32、192x192、512x512...)、および完全なmanifest.jsonファイルを自動的に生成します。すべての処理はクライアント側で行われるため、画像の高速処理と絶対的な安全性が保証されます。

標準PWAアイコンサイズ

このツールは、PWAおよびAppleの標準に従ってアイコンを自動的に生成します。

ファビコン

favicon.ico (32x32) - ブラウザのタブに表示されるアイコン

モバイル&タブレット

192x192, 384x384, 512x512 - Androidおよびホーム画面用のアイコン

Appleタッチアイコン

180x180 - ホーム画面に追加されたときのiOS用アイコン

さまざまなサイズ

16x16, 32x32, 48x48, 72x72, 96x96, 120x120, 144x144, 152x152, 167x167

Manifest.json - PWAの心臓部

manifest.jsonファイルは、PWAの最も重要な構成ファイルであり、以下の情報を含んでいます。

  • •アプリ名(name, short_name) - インストール時に表示されます
  • •アイコン - サイズと目的を持つすべてのアイコンのリスト
  • •テーマカラー - アプリバーとアドレスバーのメインカラー
  • •開始URL - ホーム画面からアプリを開くときの起動URL
  • •表示モード - 表示モード(スタンドアロン、フルスクリーン...)

主な機能

1

HD画像のアップロード

最高品質のために最低512x512pxのPNG/JPEGをサポート

2

マルチサイズアイコン生成

PWAおよびAppleのガイドラインに従って、13以上のアイコンサイズを自動的にリサイズして作成

3

自動Manifest.json

完全なメタデータとアイコン参照を含む標準のmanifest.jsonを生成

4

Favicon.ico

SEOおよびブラウザタブ表示用の標準favicon.icoを作成

5

クライアントサイド処理

100%ブラウザベースの処理、画像はサーバーにアップロードされません

6

ZIPダウンロード

すべてのファイルを1つの便利な.zipファイルにパッケージ化

実際のアプリケーション

1

PWA開発

プログレッシブウェブアプリプロジェクトの資産を迅速に生成し、手作業の時間を節約

2

ウェブサイトブランディング

ウェブサイト用のプロフェッショナルなファビコンとタッチアイコンを作成し、ブランド認知度を向上

3

モバイルアプリランディング

モバイルでネイティブアプリのように機能するインストール可能なウェブページの資産を準備

SEOとUXのメリット

✓

ファビコンはSERPでのCTRを向上させます - ユーザーはあなたのウェブサイトをより簡単に認識します

✓

PWAはCore Web Vitalsを改善します - Googleランキングの向上

✓

Appleタッチアイコン - iOSホーム画面に追加されたときのネイティブ体験

✓

完全なmanifest.json - Googleはあなたのアプリをよりよくインデックスし、理解します

重要な注意点

  • •ソース画像は最低512x512px、推奨1024x1024pxである必要があります
  • •最良の結果を得るために透明な背景(PNG)の画像を使用してください
  • •すべての処理はローカルで行われ、画像はサーバーにアップロードされません
  • •ZIPファイルには以下が含まれます:favicon.ico、アイコン(13サイズ)、manifest.json

PWAアセットジェネレーターの使い方

  1. 1

    512 x 512 ピクセル以上の正方形の PNG または JPEG ロゴをアップロードします。周囲に余白のあるシンプルな図形ほど小さなサイズでもきれいに見えます。

  2. 2

    マニフェストの項目を入力します。アプリ名、短い名前(ホーム画面のアイコン下に表示)、説明、開始 URL、テーマカラー、背景色です。

  3. 3

    丸いアイコンにしたい場合は円形マスクをオンにし、Android、iOS、スプラッシュ画面、マスカブルアイコンのプレビューを確認します。

  4. 4

    Generate & Download を押すと、全サイズのアイコンと manifest.json を含む ZIP がダウンロードされます。下に表示される HTML の link タグをサイトの <head> にコピーします。

活用例

サイトをインストール可能にする

Chrome や Edge は、192 と 512 ピクセルのアイコンを含む有効なマニフェストがある場合にだけ「アプリをインストール」を表示します。生成されたファイルはこの条件を満たします。

iOS のホーム画面アイコン

Safari はマニフェストのアイコンを無視して apple-touch-icon を使います。ZIP には 180 x 180 のアイコンと対応する link タグが含まれます。

Android 向けマスカブルアイコン

Android は端末によってアイコンを円形や角丸の四角に切り抜きます。マスカブルアイコンならロゴがセーフゾーン内に収まり、欠けることがありません。

ブランド変更への素早い対応

ロゴが変わっても新しいファイルを1回アップロードするだけでアイコン一式を差し替えられ、デザインツールから十数サイズを手作業で書き出す必要がありません。

よくある質問

Web アプリマニフェストとは?+

manifest.json は、Web アプリの名前、アイコン、色、開始 URL をブラウザに伝える小さな JSON ファイルです。これによりサイトをネイティブアプリのようにインストール・起動できます。

本当に必要なアイコンサイズは?+

インストール可能にするには、Chrome では最低 192 x 192 と 512 x 512 が必要です。iOS は 180 x 180 の apple-touch-icon を使います。その他のサイズは一部のランチャーや古い端末での表示を鮮明にします。

theme_color と background_color の違いは?+

theme_color はブラウザのツールバーやタスク切り替え画面の色、background_color はアプリ読み込み中のスプラッシュ画面の背景色です。最初の画面の背景に合わせましょう。

画像はアップロードされますか?+

いいえ。リサイズと ZIP の作成はブラウザの Canvas API で行われるため、未発表のロゴやブランド素材が端末から出ることはありません。