ファビコンを、設定ファイルまで。
画像でも、文字でも。タブの小さなアイコンからスマートフォンのホーム画面まで、必要な一式をまとめて作れます。
仕上がりプレビュー
設定に合わせて更新ここに画像をドロップ
まとめて追加して、同じ仕上がりに。
SVG・PNG・JPEG・WebP・AVIFに対応。
端末のマスクは表示イメージです。iOSは角丸を画像に焼き込まず、Android adaptive・PWA maskableは安全領域に収まるよう追加の余白を取ります。
素材
画像・動画はこのタブのメモリに保持します。画像20MB／動画100MB、合計24素材・120MBまで。
作成結果
作成したファイルと設定がここに表示されます。確認してから保存できます。
加工レシピを保存・読み込み
同じ設定を繰り返し使えます。素材そのものは含めません。
{
"version": 1,
"width": 1200,
"height": 630,
"fit": "contain",
"format": "webp",
"quality": 85,
"rotation": 0,
"flipX": false,
"flipY": false,
"background": "#123d43",
"positionX": 50,
"positionY": 50,
"brightness": 100,
"contrast": 100,
"saturation": 100,
"grayscale": 0,
"sepia": 0,
"blur": 0,
"preset": "favicon",
"padding": 12,
"radius": 0,
"appName": "My App",
"foreground": "#ffffff",
"watermark": "",
"text": "知"
}画像・動画はブラウザ内で加工します。MCP接続時は、このPC上のアダプターと素材・結果を受け渡します。
AIエージェントから使うWebMCP 試験対応
このブラウザではWebMCPが有効になっていません。通常のツール操作と下の実行テストはそのまま使えます。
「「知」の文字でファビコンを作って。背景は深い青緑、文字は白。必要な設定ファイルもZIPにまとめて。」
WebMCPは試験中のWeb標準です。利用には対応ブラウザと対応エージェントが必要です。MCPサーバーの接続URLではありません。AIサービスへ渡す内容は、そのサービスのデータ方針も確認してください。対応状況と使い方
入力仕様を見る · chinouken_media_process
{
"type": "object",
"properties": {
"preset": {
"type": "string",
"enum": [
"favicon",
"ios",
"android",
"macos",
"all-icons",
"social",
"custom"
],
"default": "favicon"
},
"sourceIds": {
"type": "array",
"maxItems": 24,
"uniqueItems": true,
"items": {
"type": "string",
"maxLength": 100
},
"description": "Image IDs from media_session. Omit to use all loaded images. Exclusive with text."
},
"text": {
"type": "string",
"maxLength": 16,
"description": "1–4 characters for an icon. No image upload required. Emoji use the OS font."
},
"appName": {
"type": "string",
"maxLength": 60,
"default": "My App"
},
"foreground": {
"type": "string",
"pattern": "^#[0-9a-fA-F]{6}$",
"default": "#ffffff"
},
"background": {
"type": "string",
"pattern": "^(transparent|#[0-9a-fA-F]{6})$",
"default": "transparent"
},
"width": {
"type": "integer",
"minimum": 1,
"maximum": 8192,
"default": 1200
},
"height": {
"type": "integer",
"minimum": 1,
"maximum": 8192,
"default": 630
},
"format": {
"type": "string",
"enum": [
"webp",
"jpeg",
"png"
],
"default": "webp",
"description": "Custom/social output format. Platform icons always PNG + ICO."
},
"quality": {
"type": "number",
"minimum": 1,
"maximum": 100,
"default": 85
},
"fit": {
"type": "string",
"enum": [
"contain",
"cover"
],
"default": "contain"
},
"padding": {
"type": "number",
"minimum": 0,
"maximum": 40,
"default": 12
},
"radius": {
"type": "number",
"minimum": 0,
"maximum": 50,
"default": 0
},
"rotation": {
"type": "integer",
"enum": [
0,
90,
180,
270
],
"default": 0
},
"flipX": {
"type": "boolean",
"default": false
},
"flipY": {
"type": "boolean",
"default": false
},
"positionX": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 50
},
"positionY": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 50
},
"brightness": {
"type": "number",
"minimum": 0,
"maximum": 200,
"default": 100
},
"contrast": {
"type": "number",
"minimum": 0,
"maximum": 200,
"default": 100
},
"saturation": {
"type": "number",
"minimum": 0,
"maximum": 200,
"default": 100
},
"grayscale": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 0
},
"sepia": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 0
},
"blur": {
"type": "number",
"minimum": 0,
"maximum": 20,
"default": 0
},
"watermark": {
"type": "string",
"maxLength": 80,
"description": "Bottom-right label on custom/social images only."
}
},
"required": [],
"additionalProperties": false
}通常のMCPクライアントと接続
ローカルのMCPアダプターを起動し、media_connectが返す接続コードを入力してください。このPC上のMCPクライアントから素材を受け取り、加工結果を同じPCへ返します。接続するまで待機します。
アダプターのセットアップ方法この4つのメディアツール間では素材と結果を引き継げます。ページの再読み込み・タブ終了で消去されます。通常のMCP接続・ブラウザAPIの使い方
ファビコンを作って、サイトに設定する
- 画像を追加するか、1〜4文字の文字・絵文字を入力します。
- 余白と背景を調整し、16pxの表示で判別できるか確認します。
- 「アイコン一式を作る」からZIPを保存します。
- ZIPのwebフォルダの中身をサイトの公開フォルダへ置き、head.htmlのタグを追加します。
ICOだけでなく、スマートフォンの表示も
16・32・48pxを含むICO、16・32・48・96pxのPNG、180pxのApple Touch Icon、192・512pxのPWAアイコン、maskableアイコンを作ります。site.webmanifestとHTMLの設定例も含みます。
背景を透過にしていても、Apple Touch Iconとmaskable用は白い背景にします。PWAの名前、開始URL、配置先のパスはサイトに合わせて確認してください。
画像・文字・SVGから無料で作成
登録やAPIキーは不要です。文字は端末にあるフォントを使用するため、絵文字の形は環境によって変わります。読み込んだSVGはPNGへ描画します。元のベクターを変換後も保持する機能はありません。
SVGはスクリプト・外部画像・参照・アニメーションを含まない図形に対応します。素材の拡大は可能ですが、細部の情報は増えません。
エージェントから一度に作る
{"preset":"favicon","text":"知","background":"#123d43"}のような短い入力で作れます。返却するのはZIPへの一時リンクとファイル数です。画像のバイト列を会話へ戻す必要はありません。
AIエージェントへの頼み方
Claude CodeやCodexなど、MCPやWebMCPに対応したエージェントに、このページのURLを添えて次のように頼めます。ファイルは会話に添付せず、手元のパスや条件を伝えます。
- 「知能圏のファビコン作成ツールで、logo.png からICOとApple Touch Icon、PWA用の一式を作って、HTMLの設定ごとZIPで保存して。」
- 「漢字1文字の知だけを置いた正方形アイコンから、32pxで見て潰れないファビコンを作って。背景は白で。」