Shopify App Logo

Core Standard

Use this skill for Shopify App Store app icons and Dev Dashboard icons. Do not use it for feature media images, screenshots, banners, or in-app sidebar icons unless the user explicitly asks for derivative sizes.

• Output size: 1200x1200.
• Format: PNG or JPEG.
• Corners: keep the file square; Shopify rounds the corners automatically.
• Composition: bold, simple, recognizable at small size.
• Safe padding: keep the primary mark away from edges so automatic rounding does not crop it.
• Consistency: icon in Dev Dashboard and app listing must be identical.
• Avoid: text, screenshots, Shopify trademarks/logos, pricing, badges, ratings, rankings, guarantees, noisy detail, edge-to-edge marks.

For the source snapshot and rejection checklist, read references/shopify-app-logo-2026.md when exact standards matter.

Workflow

1. Gather app context: app name, product category, key merchant benefit, brand colors, preferred symbol/metaphor, existing logo/assets, and target output path.
2. Design first: choose one simple icon metaphor, palette, shape language, padding, and contrast before generating.
3. Prefer a vector-like mark that remains legible at 48x48; avoid detailed UI panels or mini screenshots.
4. Generate at 1200x1200 when the image tool supports exact sizing. If it does not, generate square and export/resize to 1200x1200.
5. Validate the final icon with scripts/validateapplogo.py <image-path>.
6. If the user needs app UI assets too, create derivatives after the master icon: 512x512, 256x256, 120x120, favicon, or SVG source when appropriate.

Prompt Pattern

Use this structure for logo/image generation prompts:

Create a Shopify App Store app icon for [APP_NAME], a [APP_TYPE] app for [TARGET_MERCHANT].

Canvas: 1200x1200 square, PNG/JPEG-ready, square corners.
Visual direction: [brand colors], bold simple vector-like mark, premium SaaS, high contrast.
Core metaphor: [single symbol tied to app benefit].
Composition: centered icon mark, generous safe padding, recognizable at small sizes.
Do not include: text, letters unless they are part of a simple brand monogram, screenshots, Shopify logo or bag mark, pricing, badges, ratings, rankings, guarantees, statistics, busy details, rounded-corner mask baked into the image.
Style constraints: clean geometric shape language, no photo realism, no browser/app UI mockups, no edge-to-edge artwork.

Visual Direction Rules

• Use one symbol, not a feature collage.
• Prefer distinctive shapes over generic gradients.
• Use strong silhouette and clear negative space.
• Keep any monogram extremely simple. Avoid spelling the app name inside the icon.
• Leave enough margin for Shopify's automatic rounded corners.
• Avoid thin strokes that disappear at small sizes.
• If brand color is supplied, use it. If not, choose a palette that fits the app category and state the rationale.

Review-Safe Rules

Allowed:

• Abstract symbols tied to the app's core benefit.
• Simple monogram or brand mark if legible without text.
• Product-category metaphors like shield, sync arrows, spark, box, archive, cart, tag, image, chart, or workflow node.

Not allowed:

• "Free", "$9/month", "Sale", "50% off".
• "#1", "best", "only", "most powerful".
• Star ratings, review snippets, testimonial quotes.
• Shopify logo, Shopify bag, or lookalike trademarks.
• Screenshot of the app UI.
• Icon made mostly of text or app name.

Validation Script

Run:

python3 /Users/devhugon/.codex/skills/shopify-app-logo/scripts/validate_app_logo.py /path/to/icon.png

The script verifies file existence, PNG/JPEG format, exact 1200x1200 dimensions, and square ratio. It cannot detect trademark/text/pricing violations, so still apply the checklist manually.