My Tool Studio
Brand Extractors·4 min read

Making a Simple Logo Online: A Practical Walkthrough

A first logo rarely needs an agency. A new shop, a side project or a community group needs something clean that works on a website header, a favicon and an invoice, and it needs it this week. The Logo Maker builds that kind of logo from open-source icons and Google Fonts, in your browser, with no watermark. This walkthrough covers generating ideas, choosing between them, the checks that separate a usable logo from a pretty one, and the files you should keep.

SVGPNG

Start with the name, not the picture

Words carry most logos.

Type the brand name exactly as it should appear, add a tagline only if it explains something the name does not, and pick an industry. The industry decides which icons the idea generator reaches for: cutlery and coffee cups for food, chips and code brackets for technology, leaves and paw prints for nature.

Click Generate logo ideas and twelve combinations appear, each with its own symbol, container, layout, font and palette. Treat them as a mood board rather than a shortlist. If you like the lettering in one and the colours in another, load one, lock Font or Colours, and click More ideas: the locked part stays put while everything else changes.

Symbol, container and layout

Three choices shape the mark.

The Symbol tab offers 173 icons from the Lucide set, searchable by word and filterable by industry, or initials in any font. Line weight and a solid fill change the icon's character: thin lines read as light and modern, heavier lines and solid fills survive small sizes better.

A container such as a circle, rounded square, hexagon, diamond or shield gives the symbol a fixed outline, which helps as an app icon or profile picture. Filled containers put the icon in a contrasting colour automatically. The Layout tab arranges symbol and name: icon left for headers and signatures, icon on top for packaging and posts, icon right when the name should lead, or name only for a wordmark.

Type and colour

Where logos look homemade or not.

The name and tagline each take any of about 90 Google Fonts with their real weights, letter spacing and case. A common pattern is a confident name in a bold sans serif or a characterful serif, with a small uppercase tagline in a plain sans with wide letter spacing. Script fonts work for names in cafes and weddings, but keep them away from taglines.

Sixteen palettes set background, container, symbol, name and tagline colours in one click, and each colour can be changed by hand. Keep contrast high between the name and the background: a logo is often seen small, on a phone, in bright light.

Test it small and in one colour

The two checks that matter.

Look at the App icon preview under the logo. If the symbol still reads there, it will work as a favicon and a social avatar. If it turns into a smudge, simplify: a bolder line, a solid fill, or initials instead of a detailed icon.

Then look at the black and white previews. Invoices, stamps, embroidery and one-colour print all need a single-colour version, and a logo that relies on two close colours falls apart there. The On dark preview shows the version for dark website footers and slides.

The files to keep

Download once, use everywhere.

SVG is the master file: it scales to any size, and the Logo Maker embeds the fonts inside it, limited to the letters you used, so it looks the same on any computer. PNG at 2048 or 4096 px covers documents, slides and upload forms, with a transparent background when the logo sits on photos.

The Brand kit ZIP collects everything at once: the logo, black, white and on-dark versions and the icon alone as SVG and PNG, favicons from 16 to 512 px, a 400 px profile picture, and text files with the hex codes, font names and a Google Fonts link. Keep that folder with the business documents, not in a downloads folder.

A worked logo in ten minutes

From name to kit.

A bakery called Crumb and Co wants a logo for its new website. Type the name, add the tagline Small batch bakery, and pick Food and drink. The first ideas include a croissant in a filled circle with the name in a bold serif, a cookie icon with a script name, and a wordmark in a condensed display face. The croissant idea reads well, but the colours feel cold, so lock Icon, Font and Layout and click More ideas until a warm palette such as Earth or Sunset appears.

On the Text tab, switch the tagline to uppercase with extra letter spacing, and on the Layout tab widen the gap between symbol and name slightly. The App icon preview still shows a clear croissant and the black version holds up. Download the Brand kit ZIP, use crumb-and-co-logo-2048.png from the png folder on the website, upload social/profile-picture-400.png to the bakery's social accounts, and hand the svg folder to the printer for the shop sign.

Licences, trademarks and when to hire a designer

The icons are released under the ISC licence and the fonts under open licences such as the SIL Open Font License, so the files are free to use for business. The same icons are available to everyone, though, so a logo made from them is not unique. Search your name in your country's trademark register before you print signs, and bring in a designer when the brand needs a distinctive mark, a full identity system or legal protection. Until then, a clean logo you made in ten minutes beats an empty header.

Try it now

Open Logo Maker

The tool is one click away. No sign up, no upload, no payment.

Open Logo Maker