MeDo

AI Logo Generator.

A logo in a real product is not one image file — it is a small system: a wordmark, a symbol, the lockup that combines them, and rules for dark backgrounds, tight corners, and 16-pixel tabs. Describe your brand and MeDo generates a logo component that swaps variants, respects clearspace, and stays crisp from navbar to favicon.

Logo
L

Identity Is a System, Not a File

A wordmark in a navbar, a symbol on a mobile splash screen, a single letter in a 16-pixel favicon tab — every surface asks something different of your identity, and exporting one PNG answers none of it. The failures are familiar: a dark logo that vanishes in dark mode, a lockup stretched out of proportion, a full wordmark turned to mush at favicon size. The fix is structural rather than artistic. Ship identity as a small variant system — symbol, wordmark, and the lockup that combines them — from one SVG source, with clearspace, minimum sizes, and theme swaps built into the component, so every placement is a prop instead of a re-export. One boundary keeps the concept honest: a logo is your own mark asserting who made this, while a logo cloud arranges other companies' marks as borrowed evidence. Identity is owned; proof is lent. The two share assets with nothing.

4 個模板

可以產生的 Logo 模板

每個模板都是真實的提示詞，而非截圖。複製到任何 AI 編輯器，或在 MeDo 中執行，直接取得 React + Tailwind 程式碼。

Text-firstWordmark

Name-Only Mark Without a Symbol

Plenty of strong brands are just a name set well. This variant inherits color and never needs a second file to change context.

Create a wordmark-only logo component for a brand without a symbol: the name set at 600 weight with -0.02em letter-spacing, rendered as styled HTML text or inline SVG text so it inherits color through currentColor. Provide sm and md sizes with 20px and 24px cap heights, and a reversed variant for dark backgrounds that swaps to white via the dark: class. Add a rule in a comment: the wordmark never sits inside a colored chip — its contrast comes from the background it is placed on. Include a truncated single-letter fallback for extremely narrow containers.

在 MeDo 中試試
Full lockupSymbol + Wordmark

Horizontal Lockup With Clearspace

The complete identity: mark and name baseline-aligned, with the degradation path to symbol-only already built in.

Create a horizontal lockup logo component: a 24px symbol on the left and the wordmark to its right at a 20px cap height, baseline-aligned, with a 12px gap and total clearspace of half the symbol height around the whole lockup. Props include withWordmark so the same component degrades to symbol-only in tight slots like a mobile navbar, and the symbol ships as a separate export too. Below a 24px rendered height, hide the wordmark automatically and note the reason in a comment — a scaled-down lockup becomes illegible rather than merely small.

在 MeDo 中試試
Dark modeAdaptive Theme

Auto-Swapping Light and Dark Artwork

Full-color on light, a designed reversed version on dark, currentColor for tinted contexts — chosen by the component, not the caller.

Create an auto-theming logo component that picks artwork per context: the full-color mark on light surfaces, a dedicated reversed version — not a CSS invert — on dark surfaces, and a single-color currentColor version for placement inside buttons or tinted banners. Theme detection checks a dark ancestor class first, then prefers-color-scheme. Ship all three artworks as separate SVG files plus the switching component, and add a preview row showing the mark on white, zinc-900, brand indigo, and over a photo, so wrong-context placement is visible instantly.

在 MeDo 中試試
Tiny sizesFavicon Set

Symbol-Only Icon Exports

The smallest surface, treated as its own design problem: symbol-only marks at every OS-required size with a mask-safe zone.

Create a favicon and app-icon export page for the brand: symbol-only artwork — never the lockup — at 16, 32, and 48 pixels as SVG, plus a 180px apple-touch-icon and 192 and 512px maskable PNGs with the mark inside an 80% safe zone so Android's circular mask cannot clip it. Render a live preview strip showing the symbol at each size next to a simulated browser tab, and include the complete link-tag snippet for the document head. If the symbol loses legibility at 16px, generate a simplified single-letter variant and show both.

在 MeDo 中試試

如何自訂你的 Logo

Name the variants before the visuals

Wordmark, symbol, and lockup are different assets with different jobs. The symbol must survive 16px, the wordmark carries the name for text-first brands, the lockup is for generous surfaces. Tell the prompt which exist — it will not invent the set for you, and scaling one lockup to every size is how wordmarks turn to mush.

Bake clearspace into the component

Ask for a built-in margin of at least half the symbol height around every variant, so nobody crowds the mark in a navbar or pins a badge over it. Clearspace enforced by markup survives every future edit; clearspace written in a brand PDF does not.

Swap themes with dedicated artwork, never a filter

A CSS invert on a full-color mark produces mutant hues and broken contrast on mid-dark surfaces. Require a designed reversed version for dark contexts plus a single-color currentColor version for tinted ones, and let the component choose instead of the caller.

Decide when the logo is a link

In a navbar the logo is usually the home link: an anchor to / with an aria-label of the brand name. Standalone, it is an image with empty alt when adjacent text names the brand, or role img with a label when nothing else does. Say which in the prompt — the markup differs.

誰在使用 Logo 組件

Product navbars and app shells

A 32px lockup left of the navigation that degrades to symbol-only below a width threshold, wrapping a home link with an accessible brand label.

Marketing footers and dark sections

The reversed artwork on zinc-950, sized one step larger than the navbar mark — footers are seen from farther away and with less light than the top of the page.

Browser tabs, favicons, and app icons

The symbol alone at 16px in the tab, plus 180px apple-touch and maskable 192/512px icons with a safe zone, so operating-system masks never clip the mark.

Press pages and brand kits

Downloadable SVGs per variant alongside do-and-don't spacing examples, so partners stop reconstructing clearspace from screenshots of your navbar.

不同網站的 Logo 方案

同一個 logo 組件，針對它所在網站的類型作調整。

01 / 04

Product Navbars and App Shells

The workhorse placement: 32px lockup beside navigation, home-link semantics, automatic degradation to the symbol when the viewport narrows. Clearspace is what keeps it from colliding with the menu.

Logo 的風格與變體

挑選與頁面其餘部分相襯的變體，然後產生它。

01 / 04

Monochrome currentColor Mark

A single-color mark rendered with currentColor so it inherits whatever text color surrounds it. The most adaptable option — one asset serves light, dark, and tinted contexts without any swapping logic.

在 React、Next.js、Vue 與 Svelte 中使用 Logo

React、Next.js、Vue 3、SvelteKit、Astro 或純 HTML —— 同一個 logo，六種接入方式。

01 / 03

React Logo Component

One SVG source serves all three variants, and currentColor lets the mark follow the surrounding text color — so the dark swap is one Tailwind class instead of a second file.

src/components/Logo.tsx

export function Logo({
  variant = 'lockup',
  size = 32,
  label = 'Acme',
}: {
  variant?: 'symbol' | 'wordmark' | 'lockup'
  size?: number
  label?: string
}) {
  return (
    <svg role="img" aria-label={label} height={size}
         viewBox="0 0 120 32" className="text-zinc-900 dark:text-white">
      {variant !== 'wordmark' && <use href="#acme-symbol" />}
      {variant !== 'symbol' && (
        <text x="40" y="23" fontWeight="600" letterSpacing="-0.5"
              fill="currentColor">Acme</text>
      )}
    </svg>
  )
}

如何把 Logo 加入專案

四個步驟，從挑選 logo 模板到推上生產環境。

01~2min

Inventory Every Surface the Mark Touches

Navbar, footer, mobile splash, favicon, email header, dark sections. Note the size and background at each one — the smallest size and the darkest surface define which variants you actually need.

02~1min

Name Your Variants and Minimums

Decide which of wordmark, symbol, and lockup exist, and the minimum size each must survive. Say both in the prompt — 'symbol legible at 16px, lockup from 120px' — so the generated component enforces them.

03~2min

Generate, Then Test the Extremes

Check the mark at 16px on a dark navbar and inside a tinted button before admiring it at hero size. Failures live at the extremes; fix them with follow-up prompts about variants, not by stretching the one you got.

04~2min

Retire the Loose Files

Search the project for hardcoded logo PNGs and replace each with the component. Every surviving copy is a future drift — a footer showing last year's mark is how rebrands stall for months.

關於 Logo 的常見問題

Wordmark, symbol, or lockup — which variant do I actually need?

Most products need all three, at different sizes. The wordmark is the name set as type — enough for a text-first brand and any surface wider than about 120px. The symbol is the pictorial mark that must stay legible at 16px in a tab or favicon. The lockup combines them for generous surfaces like marketing headers and splash screens. Generate all three from one component with a variant prop; the common failure is shipping a single lockup and scaling it down until the wordmark is unreadable.

How do I make my logo work on dark backgrounds?

Design a dedicated reversed version rather than running a CSS invert on the full-color mark — inversion turns brand hues into wrong colors and kills contrast on mid-dark surfaces. The reversed artwork usually renders the mark in white or a light tint at adjusted weights, and the component picks it via a dark ancestor class or prefers-color-scheme. Tinted contexts such as buttons and colored banners get a third, single-color currentColor version that inherits the surface's text color.

What is clearspace, and how much does a logo need?

Clearspace is the guaranteed empty margin around the mark — the working rule of thumb is at least half the symbol's height on all sides. It exists because a logo wedged against nav links, badges, or other logos reads as clutter and loses distinctiveness. Enforce it by baking the margin into the component so every usage inherits it; a spacing rule that lives only in a brand PDF gets violated the first time someone drops a PNG into a navbar by hand.

Why use SVG instead of PNG for a logo?

One SVG stays crisp from a 16px favicon to a retina billboard, weighs a fraction of a PNG set, and recolors through currentColor or CSS variables — which is exactly what makes theme variants cheap. PNGs lock in a size, a background, and a color, so every new context becomes another export and another file drifting out of date. Inline SVG also avoids a network request in the navbar, where the logo is often among the first things painted. Keep PNGs only where a format demands them, such as maskable app icons and some email clients.

What sizes do favicons and app icons actually need?

Ship the symbol alone — never the full lockup — at 16 and 32px for browser tabs, 48px for shortcuts, 180px as the apple-touch-icon, and 192 plus 512px as maskable PNGs with the mark inside an 80% safe zone so Android's circular mask cannot clip it. If the full symbol turns to noise at 16px, generate a simplified variant: one letter or one reduced shape. The favicon is the smallest place your identity works and among the most seen — it deserves its own artwork, not a scaled-down afterthought.

Can I put my logo next to my customers' logos?

Your mark asserts identity; theirs endorse — and arranging many marks is a different object: a logo cloud, built for social proof with its own rules about grayscale, uniform height, and permission to display. Keep the two apart. Your logo component should not render inside a logo cloud, and a cloud should not contain your own mark except in a framing you can defend. And before displaying any customer's logo anywhere, get the permission — an endorsement you cannot defend is a liability, not proof.

立即用 MeDo 生成你的 logo。

試試任何提示詞 — 免費，無需註冊。

免費開始構建查看定價
Logo Cloud

Logo Cloud

A logo cloud is borrowed trust: six or eight recognizable marks, rendered small, grayscale and quiet, saying "companies like these already chose you". Describe whose logos you display and how, and MeDo generates the section — a static row that never moves, a responsive grid, or a slow marquee — with proper alt text and mobile wrapping, in React + Tailwind.

相關元件
導覽列

導覽列

描述您的網站，獲得完全響應式導覽列 — 包含Logo、導覽連結、下拉選單和行動裝置漢堡選單 — 從一個提示詞生成。無需範本，無需繁瑣調整。

相關元件
頁腳

頁腳

描述您需要的頁腳 — 欄位、連結、法律文字、社交圖示 — MeDo在數秒內生成生產級程式碼。永遠告別複製貼上樣板程式碼。

相關元件
頭像

頭像

從一句提示詞生成可上線的頭像。6 個開源模式 — 照片、Notion 風格插畫、首字母備援、在線狀態徽章、疊加頭像組、上載器 — 全部採用 Tailwind + shadcn，符合無障礙標準、可換主題並以 MIT 授權。直接複製程式碼，或把其中任何一個重新生成到你的 Lovable、Bolt、v0 或 Cursor 專案中。

相關元件