Dock プレビューと desktop 出力で macOS 風 App アイコンを作成

ロゴを macOS Dock や desktop の雰囲気に合わせたい場合に向いています。角丸、質感、コントラストを確認しながら仕上げられます。

1つのロゴから各プラットフォーム向けアイコンを生成

favicon、desktop、mobile icon をすぐに確認できます

Original logo
元のロゴ
Browser
Desktop
Mobile
生成後のアイコン

ジェネレーターを試す

macOS Dock、desktop icon サイズ、Apple デスクトップ文脈の見え方を意識したページです。

ライブプレビュー

Dock プレビューにより、デスクトップ上での存在感や仕上がりを確認できます。

ブラウザタブのプレビュー

IconBase
IconBase (Dark)
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
favicon.ico32x32
apple-touch-icon.png180x180
android-chrome-*.png192/512
icon-maskable-*.png512x512
icon-sharp-512x512.png512 / シャープ
desktop-*.png256/1024
site.webmanifestJSON

Dock を意識したプレビュー

単なる四角いキャンバスではなく、Dock 上での見え方に近い形で確認できます。

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 向けのファイルを書き出せます。