Create a mark the user picks, then turn it into every file the app needs. The user's explicit instructions come first, within host safety rules.
1. Get the brief
Ask only for what's missing:
- product name and one line on what it does
- feel: playful, serious, technical, warm...
- colors to use or avoid
- any existing logo, sketch, screenshot or site URL to build on (upload files with
upload_file)
If the user already has a logo, use it. Don't redesign it unless asked.
2. Explore, then let the user pick
A request for a logo or icon is approval to spend credits on it. Send one compose_project call asking for 4 clearly different concepts:
- 1:1, at least 1024×1024, centered with even padding
- flat, bold shapes that still read at 32 px and in one color
- plain background, no mockups, no extra text unless it's a wordmark
Show the concepts and stop. The user picks. Never choose for them.
3. Make the finals
Continue the same project by passing its project_id to compose_project. Ask for the chosen concept as:
- an SVG, plus a 2048×2048 transparent PNG master
- one-color versions in black and white
- an icon-only square mark, if the concept has a wordmark
- an opaque square version on the brand background color, for app icons
Glif can make SVG. If a result comes back raster-only, a simple flat mark can be traced locally with vtracer or potrace. Check the trace against the PNG.
For wordmarks, check the spelling letter by letter. A crisper option is to set the name in a real font next to the mark, in SVG or HTML.
4. Export the sizes
Download the finals into the repo, for example assets/brand/, with curl -fsSL "<media url>" -o <path>. Make the sizes locally from the master with whatever is installed: sharp, magick, sips or npx png-to-ico. Never upscale.
Web head kit (in public/ or the framework's static folder):
| File | Size | Notes |
|---|---|---|
favicon.ico | 16, 32, 48 | multi-size ICO |
favicon.svg | vector | from the SVG master |
apple-touch-icon.png | 180×180 | opaque, with padding |
icon-192.png, icon-512.png | 192, 512 | listed in site.webmanifest |
icon-maskable-512.png | 512×512 | mark inside the center 80% circle, "purpose": "maskable" |
Add the <link rel="icon">, apple-touch-icon and manifest tags plus <meta name="theme-color">. Look at the favicon at 16 px. If the mark turns to mush, use a simpler glyph or a single letter.
iOS: one 1024×1024 PNG with no transparency and square corners. iOS rounds the corners itself.
Android: adaptive icon with a foreground and a background layer, each 432×432 px at xxxhdpi. Keep the mark inside the center 264 px. The Play Store listing also needs a 512×512 PNG.
5. Optional extras
Offer these after the logo is approved. Each is a separate request.
- Logo animation: a 2 to 4 second reveal or burst, MP4 with a transparent or brand-color background, for splash screens and video intros.
- Restyle: the same mark as glossy 3D, Y2K chrome or another treatment, on a transparent background.
- Brand kit: palette with hex values, font pairing, usage rules and a one-page sheet. Glif can build it from the new logo, or from the user's existing site by its URL. Save the values as CSS variables or Tailwind theme tokens too.
- Mascot: a character sheet with front, side and back views plus expressions, so the mascot looks the same everywhere.
6. Custom icon sets
For standard UI icons like settings, search or close, use the project's icon library (Lucide, Heroicons and so on) or hand-written SVG. Don't spend credits on them.
For illustrated icons, ask for the whole set in one image so the style matches: a grid of 6 to 12 icons, same stroke weight and palette, plain background. Then ask for each one as SVG or as a 256×256 transparent PNG, named by meaning (icon-invoices.svg). Emoji and stickers for Slack or Discord are 128×128 transparent PNGs.
7. Finish
Share the projectUrl. List every file you wrote and the tags you added. Don't change the user's existing brand files unless they asked.
