ブランドキットを作る

ロゴを1つ入れれば、必要なファイルがすべて手に入ります。Webサイトとアプリ用のアイコン、そしてよく求められるサイズと形式のロゴそのもの。

ブランドキットを作る

SVG, PNG, JPG, WebP, HEIC · 最大8MB · プレビュー無料 · 1キット2クレジット・再ダウンロード込み

ロックを解除した結果を使うにはログインしてください。
カスタマイズブランド名、短い名前、色、余白
45文字まで。空欄の場合はファイル名を使います。アプリ名になり、キット内のすべてのファイルとリソースの名前にも使われます。 12文字まで。ホーム画面でアイコンの下に表示されるラベルです。空欄の場合はブランド名を短くして使います。
背景色はアプリアイコン、Apple touchアイコン、maskableアイコンの塗りに使われ、余白でロゴが端にかからないようにします。タブのfaviconとPNGは正方形いっぱいに使います。

このツールでできること

ロゴに必要なファイルをまとめて作り、種類ごとにフォルダーに分けます。HTMLタグ付きのfaviconとWebアプリアイコン、AndroidとiOSのアプリアイコン、Xcodeのimage set、AndroidのVectorDrawable、256〜2,048pxの透過PNG、そしてWeb向けに最適化したSVGを元のSVGと一緒に。ブランド名はアプリ名とすべてのファイル名に使われ、各フォルダーの説明はREADMEにあります。SVGならキットのすべて、PNG、JPG、WebP、HEICなら画像ファイルだけが作られます。このツールは画像をトレースしないためです。

安全のため、スクリプト、アニメーション、埋め込みWebコンテンツ、リンク、ほかのファイルを読み込む要素は削除されます。アートワークと、埋め込まれたPNG、JPEG、WebP画像は残ります。削除したものは結果に一覧で表示されます。

含まれるもの

  • favicon/ faviconとWebアプリアイコンfavicon.ico、PNG・SVGのfavicon、Apple touchアイコン、maskableアイコン、site.webmanifest、サイト用のHTMLタグ。
  • app-icons/ Android・iOSアプリアイコン従来のサイズとPlayストア用画像を含むAndroidのアダプティブランチャーアイコンと、1,024pxのiOS AppIconセット。
  • ios/ Xcode image setiOSアプリ用の画像アセット形式のロゴ:ベクター、または1×・2×・3×のPNG。
  • android/ Android VectorDrawableAndroidアプリ用のVectorDrawable形式のロゴ。
  • png/ 透過PNG長辺256, 512, 1,024・2,048px。
  • svg/ SVGファイルWeb向けに最適化したロゴと、元の精度のままのオリジナル。
  • README.txt 各フォルダーの用途各ファイルの置き場所と、サイト用のHTMLタグ。

入力・出力・制限

入力

ロックを解除した結果、またはSVG、PNG、JPEG、WebP、HEIC

出力

favicon/、app-icons/、ios/、android/、png/、svg/の各フォルダーと、それぞれを説明するREADMEが入った1つのZIP

制限

ファイルは最大8MB。PNG、JPG、WebP画像は最大24メガピクセルで、書き出し前に1,536pxに縮小されます。SVGからは長辺256、512、1,024、2,048pxのPNGを、ラスター画像からは解像度の範囲内のサイズを作ります。iOSとAndroidのベクターファイルは、単色のシンプルなパスを最大2,000個まで扱えます。処理の上限:60秒。

使い方

1

ロゴを選ぶ

ロックを解除した結果を選ぶか、SVGをアップロードするとキット全体が作られます。PNG、JPG、WebP、HEICの場合は、favicon、アプリアイコン、iOS用ファイル、PNGファイルが作られます。

2

初期設定のまま、またはカスタマイズ

ブランド名はファイル名から取られます。「カスタマイズ」で、ブランド名、ホーム画面用の短い名前、テーマカラーと背景色、余白を変更できます。

3

プレビューしてからダウンロード

明るいタブと暗いタブでのアイコン、小さいサイズのアプリアイコン、キットのすべてのファイルを確認してから、ZIPをダウンロードします。各フォルダーの置き場所はREADMEに書いてあります。

トラブルシューティング

各ツールを個別に使うのと同じですか?

はい。各フォルダーの中身は、同じロゴからfavicon作成、アプリアイコン作成、iOS・Android書き出し、SVGをPNGに変換、SVG最適化の各ツールで作るものとまったく同じです。パスのプレフィックスや別のサイズなど、ほかの設定にしたい場合は、各ツールを個別に使ってください。

android/とsvg/がないのはなぜですか?

ベクターのアートワークが必要です。PNG、JPG、WebP、HEICからは、favicon、アプリアイコン、iOS用ファイル、PNGファイルが作られます。それ以外も作るには、先に画像をSVGにトレースしてください。

ios/にベクターではなくPNGが入っているのはなぜですか?

iOSとAndroidのベクターファイルは、単色のシンプルな図形しか扱えません。グラデーション、テキスト、エフェクトを含むアートワークは、iOS用にはPNGが作られ、Android用のベクターは作られません。その理由は結果に表示されます。

2,048pxのPNGがないのはなぜですか?

PNG、JPG、WebP、HEICからは、画像の解像度で足りるサイズだけを作ります。それより大きくしてもぼやけるだけだからです。SVGならすべてのサイズを作れます。

利用条件と料金

このツールの実行とプレビューは無料です。 出力のダウンロードには、ログインしたアカウントで2クレジットかかります。請求は1回だけで、失敗した実行には請求されません。再ダウンロードは無料です。 新しいキットはどれも同じ料金で、アップロードしたファイルからでも、ロックを解除済みの結果からでも作れます。 ファイルの保存期間は、ゲストは24時間、アカウントは30日です。料金をご覧ください。

キットに含まれるファイルのガイド

faviconの形式の違い:SVG・PNG・ICOの使い分けPWAのmaskableアイコン:セーフゾーンと設定方法SVGをAndroidのXML(VectorDrawable)に変換する方法1枚の画像からAndroid・iOSのアプリアイコンを作るXcodeの画像アセットはSVGとPNGのどちらにする?

関連ツール

favicon・PWAアイコン作成ICO、SVG、Apple touch、maskableアイコンアプリアイコンを作るAndroid・iOS用リソースパッケージSVGをPNGに変換SVGをPNGに書き出し(最大4,096px)SVG最適化SVGを見た目そのままで軽量化