Skip to content

Designing a logo for your app with Draftlytic's logo generator

Robert Boylan8 min read

You've written the spec. You know what the app does, who it's for, and how it's built. You have features sorted into priorities. Everything is ready for Cursor, Lovable, or Bolt.

And then you stop for four days to design the logo.

This is one of the more reliable ways indie devs lose momentum. The app isn't real until it has a name you can say out loud and a mark you can stick on a tab. So the logo starts to feel urgent, and urgent things eat time. A week later, you've tested 30 Figma concepts and haven't written a single line of code.

This post is about a faster, more honest approach: using the logo generator built into Draftlytic to get a mark that's good enough to ship, without letting the logo become the reason the app ships late or not at all.

Why your logo matters less than you think right now (and then suddenly matters a lot)

In the months before launch, nobody sees the logo. It lives in a Figma file or a Notion doc, and exactly one person has an opinion about it: you. During this phase, almost any mark will do.

The day you launch is different. The logo is the first thing someone sees when they share a link. It's the favicon in their tab bar. It's the icon on their phone's home screen if they add it as a PWA. It gets screenshotted in "built this with Lovable" posts. Suddenly the logo is public and it represents the thing you made.

The goal, then, isn't to skip the logo entirely. It's to spend proportionate time on it: not four days before you write a line of code, but not zero minutes before you post the Product Hunt launch either.

The practical target is a mark you'd be comfortable with in a screenshot. One you could swap out in a later sprint if the product evolves. One that, if someone asked "what does your app do?", the logo wouldn't contradict the answer.

That's achievable in a session or two with a good prompt and a few rounds of generation.

The four-prompt inputs that actually change the output

Most AI logo generators will take any prompt and return something. The difference between "give me a logo for my app" and "give me a logo that looks right for my app" comes down to four inputs, in order of impact.

Industry and function. What the app actually does. "A habit tracker" and "a client invoice tool" and "a local event discovery app" generate very different visual vocabularies. The more specific you are, the less the generator has to guess. "A habit tracker for gym-goers who want to log workouts on their phone" gets a more useful result than "a fitness app."

Mood and visual weight. This is where people skip a step. Should the logo feel technical and precise, or warm and approachable? Minimal, or detailed? Bold enough to read at 32px, or fine-grained enough to work at banner size? If you don't say, the generator picks the average. The average is fine, but it's also what every other app got.

Palette constraints. One or two anchor colours is enough. You don't need to hand over a full brand system. "Deep green on white" or "a warm amber accent against dark backgrounds" gives the generator a constraint that immediately limits the option space in a useful direction.

Simplicity instruction. Add an explicit note about complexity: "flat, minimal, works at small sizes" is a real instruction, not a vague preference. Logos that look great at 512px sometimes fall apart at 32px (the favicon). Logos that are busy at full size look like static in a tab.

These four inputs together take about three minutes to write. They also, not coincidentally, overlap with what Draftlytic already knows about your project.

How Draftlytic's design fields seed the generator automatically

When you create a project in Draftlytic, the guided question flow asks about design style and theme colours (among other things). If you answered those questions, the logo generator already has your answers.

When you open the logo generator inside a project, it pre-seeds the prompt with design_style and theme_colors from the project's spec. The AI uses these to anchor the generation: if your project's design style is "editorial" and your theme colours include a warm ochre, that's the starting point before you've typed a word.

This means if you've done the spec work, you're not starting from zero. You're starting from a colour palette and visual direction that already matches the product. The logo generator is an output of the spec, not a separate exercise.

If you haven't filled in those fields, or you want to override them for the logo specifically, you can write a prompt directly. The generator accepts a free-text description (up to 200 characters) that sits alongside the project's design context. The two feed into the same generation pass.

If you're new to speccing out design fields and find your app looking generic, the post on why vibe-coded apps look AI-generated covers exactly this problem and gives you a way to fix it before you generate anything.

When to regenerate, when to pick, and what the 10-round cap is telling you

Each generation round produces a set of logo options. If none of them are right, you can adjust the prompt and generate again. Each round costs 60 credits and the generator is capped at 10 rounds per project.

That cap is not arbitrary. It's the right shape for what you're trying to do.

If you're six or seven rounds in and haven't picked anything, the issue is almost never the generator. It's usually one of two things: the prompt is too vague to constrain the output meaningfully (so each round returns something different but nothing lands), or you're optimising for a logo you'll love rather than a logo that works. Those are different problems.

A logo that works is: readable at small sizes, not misleading about the product's nature, visually consistent with the colour palette, and distinctive enough not to be confused with a direct competitor. That's the bar.

A logo you love is a higher bar that also includes: feels exactly right, would survive a brand refresh five years from now, passes the test where you show it to someone and they immediately get it. That bar is worth aiming for in the long run. It's a bad reason to delay launch.

The 10-round cap forces a useful choice before you hit it: either the prompt needs refining (in which case the next round should use materially different inputs), or you need to pick the least-bad option and ship.

If you're a shared editor on a project, you and the owner share the same 10-round counter. Plan the generation sessions accordingly, especially if multiple people want to experiment.

Using the logo in your AI coding tool

Once you've picked a logo and downloaded it, you'll get files with underscores in the name, not spaces (so my_habit_tracker_logo.png, not my habit tracker logo.png). This matters when you're referencing the file in prompts.

When you hand a logo file to Cursor, Lovable, Bolt, or any other AI coding tool (or Figma Make if you're working from a design), the way you describe it in the prompt affects what happens. Referencing it by name means the tool knows exactly which asset you mean and can wire it to the right place in the app.

A few practical notes:

  • PNG for general use. Works everywhere, imports cleanly, good for quick testing in the app.
  • SVG if you have it. Scales without degrading, smaller file size, and some AI tools can modify SVG paths directly if you want minor adjustments.
  • Favicon explicitly. Tell the tool "use project_name_logo.png as the favicon at 32x32 and 16x16." Don't assume it'll infer this from the presence of the file.
  • State it's the brand mark. "This is the primary brand logo, place it in the nav bar at 40px height" is more useful than "add the logo." The AI coding tool will infer less and do more.

The filename convention also matters in code. If you tell Lovable "the logo is in public/my_habit_tracker_logo.png" and the actual file is my-habit-tracker-logo.png, you'll get a broken image at runtime. Underscores, not spaces, not hyphens: check the downloaded filename before you paste it into a prompt.

What to lock in before you share the link

The logo is one item on a short list of things that, if wrong, make the first impression harder to recover from. The vibe-coded app launch checklist covers the full list, but for the logo specifically:

Check it at favicon size (16x16 and 32x32) before you announce anything. Some marks that look great at 200px read as a dark smudge at tab size. If yours does, a simpler variant, or a single-letter monogram, is a quick fix.

Check it on a dark background if your app has a dark mode. A logo that works perfectly on white can disappear or look wrong on dark grey.

Make sure the alt text on the <img> element in the app says what it is. "Company logo" is technically correct but useless to a screen reader. "[Your app name] logo" takes three seconds to fix.

The good news is that none of this requires the logo to be final. Ship with what you have, note the logo as a "nice-to-improve" item in the backlog, and move on. The app is the product. The logo is the handshake before anyone finds out what the product does.

Draftlytic's logo generator is built to get you to that handshake without a week of Figma tabs. Generate a few rounds from your spec's design fields, pick the one that works, and ship the thing you actually built.