Apple 風の角丸処理
ロゴを描き直さずに、iPhone 向けに見える rounded square スタイルをすばやく検証できます。
Apple 風の角丸とモバイルプレビューで iOS アイコンを作成
iOS App アイコン、Apple touch icon、iPhone ホーム画面用の見せ方を作りたい場合に最適です。余白、角丸、重心を確認しながら調整できます。
1つのロゴから各プラットフォーム向けアイコンを生成
favicon、desktop、mobile icon をすぐに確認できます
Browser
Desktop
Mobile
ジェネレーターを試す
このページは iOS App icon、Apple touch icon、iPhone ホーム画面プレビューに焦点を当てています。
ライブプレビュー
iPhone ホーム画面を中心に、ブラウザとデスクトップの整合性も同時に確認できます。
ブラウザタブのプレビュー
IconBase
IconBase (Dark)
Google Search
iconbase.7-image.com
macOS Dock のプレビュー
App
Windows タスクバーのプレビュー
App
10:00
モバイルホーム画面のプレビュー
9:41
IconBase
App
App
App
10:00
Search...
App
App
App
IconBase
設定と書き出し
ロゴ、余白、角丸を調整して iPhone 上で自然に見える形に整えます。
画像を変更
初期状態ではサンプル画像を表示しています。実際のロゴをアップロードして確認してください。
画像調整
書き出し前にアップロード画像を細かく調整できます。
Standard Rounded
20%
22.5%
0%
中心 = 0
画像の中心を x0 y0 として、X/Y オフセットで位置を微調整します。
0%
0%
Lime Mint
ソリッド
グラデーション
Mesh と Grid
ガラス表現
パターン
グロー
Zip に含まれる内容:
favicon-16x16.png16x16
favicon-32x32.png32x32
apple-touch-icon.png180x180
android-chrome-*.png192/512
icon-maskable-*.png512x512
icon-sharp-512x512.png512 / シャープ
desktop-*.png256/1024
site.webmanifestJSON
iPhone ホーム画面のライブプレビュー
iOS のホーム画面に近いレイアウトで、余白とコントラストの問題を早めに見つけられます。
Apple 向け出力を含む書き出し
apple-touch-icon.png を含み、同時に Web や他プラットフォーム向けのアイコンもまとめて出力できます。
iOS アイコンの作り方
1. ロゴを読み込む
App のグリフやブランドマークをアップロードしてスタートします。
2. 角丸と余白を整える
rounded square 内で視覚的な中心が自然になるように微調整します。
3. Apple 向けに書き出す
Apple touch icon と併用できるファイル群を zip でダウンロードします。
iOS アイコン FAQ
ネイティブ iOS アプリ専用ですか？
いいえ。Apple touch icon、PWA インストール用アイコン、構想段階の App ブランディングにも使えます。
なぜ余白が重要ですか？
iPhone のホーム画面では、ロゴが詰まりすぎると窮屈に見えるため、適切な余白が視認性を高めます。
書き出す前に確認できますか？
はい。モバイル、ブラウザ、デスクトップのプレビューを見ながら調整できます。