What makes a small logo work
Most small businesses do not need a complicated mark. They need something legible at 32 pixels in a browser tab, recognizable on a van door, and consistent across the website, invoices and social profiles. That is what this tool is built for: a clean lockup of an icon and a wordmark, set in a solid typeface, exported in the formats a website actually uses.
If you later hire a designer, a tidy starter logo is still useful. It sets the color and typography direction and gives the brand something consistent to live with while a bespoke identity is developed.
A practical process
1. Start with type, not the icon
The wordmark carries most of the brand. Try your name in three or four fonts before touching anything else. Geometric sans fonts like Outfit, Sora and Poppins feel modern and friendly. Serif display faces like Fraunces, DM Serif Display and Playfair feel established, which suits law firms, restaurants and boutiques. Condensed caps like Bebas Neue are loud and work for gyms, trades and events.
2. Pick an icon that hints, not explains
A dental practice does not need a dentist in its logo. A single tooth, a shield or even a monogram is enough. Simple line icons scale down cleanly and still look intentional when they are reduced to a favicon. The monogram option uses the first letter of your name inside a ring, which is often the most distinctive choice of all.
3. Limit the palette
Two colors plus a neutral background is plenty. Use the icon color as your accent, and keep the text color dark enough to pass contrast checks on your website. The palette presets are balanced starting points you can tweak.
4. Tune spacing last
Tight letter spacing makes bold wordmarks feel compact and confident. Light weights and all-caps taglines usually need extra tracking to breathe, which is why the tagline option adds it for you.
Using the exports
- SVG for your website header. It is tiny and razor sharp at every size. Inline it or reference it with an
imgtag. - PNG 2x for email signatures, marketplace listings and anywhere that will not accept SVG.
- PNG 4x, icon only as the source for your favicon, app icon and social avatar.
<a href="/" class="logo"> <img src="/images/logo.svg" alt="Northwind Landscape Studio" width="220" height="64"> </a>
Always set width and height on the image so the header does not jump while the page loads, and write the brand name in the alt text rather than the word "logo".
Frequently asked questions
Can I use the logo commercially?
Yes. The icons are original drawings made for this tool and every font in the list is from Google Fonts under the SIL Open Font License, which allows commercial use. Simple marks are hard to trademark, so talk to a lawyer before filing.
Why does my SVG show a different font on another computer?
The SVG keeps your text as live text and imports the Google Font when it is viewed online. Offline apps may substitute a system font. For a fully portable file, open the SVG in Figma, Illustrator or Inkscape and convert the text to outlines.
Which PNG size should I download?
Use 2x for websites so the logo stays crisp on retina screens, and 4x for slides, documents and social profiles. For print, use the SVG after outlining the text.
How do I turn this into a favicon?
Switch the layout to Icon only, download the PNG at 4x, then upload it to the Favicon and Meta Pack tool, which builds every favicon size, the .ico file and the webmanifest for you.