Dock を意識したプレビュー
単なる四角いキャンバスではなく、Dock 上での見え方に近い形で確認できます。
Dock プレビューと desktop 出力で macOS 風 App アイコンを作成
ロゴを macOS Dock や desktop の雰囲気に合わせたい場合に向いています。角丸、質感、コントラストを確認しながら仕上げられます。
1つのロゴから各プラットフォーム向けアイコンを生成
favicon、desktop、mobile icon をすぐに確認できます
Browser
Desktop
Mobile
ジェネレーターを試す
macOS Dock、desktop icon サイズ、Apple デスクトップ文脈の見え方を意識したページです。
ライブプレビュー
Dock プレビューにより、デスクトップ上での存在感や仕上がりを確認できます。
ブラウザタブのプレビュー
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
設定と書き出し
Web とモバイルへの互換性を残しつつ、Dock や desktop で映える方向に調整できます。
画像を変更
初期状態ではサンプル画像を表示しています。実際のロゴをアップロードして確認してください。
画像調整
書き出し前にアップロード画像を細かく調整できます。
Standard Rounded
20%
22.5%
0%
中心 = 0
画像の中心を x0 y0 として、X/Y オフセットで位置を微調整します。
0%
0%
Obsidian Glass
ソリッド
グラデーション
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
Apple デスクトップ向けの質感
rounded square、glass、gradient、mesh を使い、デスクトップらしい仕上がりを作れます。
大きな desktop 画像も書き出し
256x256 や 1024x1024 など、プレゼンやランチ素材にも使いやすいサイズを含みます。
macOS アイコンの作り方
1. マークをアップロード
glyph、logo、シンプル化したブランドマークからスタートします。
2. デスクトップ向けに磨く
角丸、glass、gradient、余白を調整して、Dock での印象を整えます。
3. アイコンパックを書き出す
desktop、browser、mobile に展開できる同一方向のアイコンセットを zip で取得します。
macOS アイコン FAQ
Mac App のコンセプトにも使えますか？
はい。Web 用の書き出しだけでなく、Mac App アイコンのコンセプト検討にも役立ちます。
大きな desktop PNG は出力されますか？
はい。デスクトップ向けの大きな PNG サイズが含まれます。
同じ設定で Web アイコンも作れますか？
はい。同じ状態から browser、Apple、Android、desktop 向けのファイルを書き出せます。