logo-generator

When the user wants to optimize logo placement, linking, or branding on a website. Also use when the user mentions "logo," "brand logo," "header logo," "logo…

INSTALLATION
npx skills add https://github.com/kostja94/marketing-skills --skill logo-generator
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$27

Optimal: Top-Left

  • Brand recall: Users are 89% more likely to remember logos in top-left vs. right
  • Left-aligned: ~39% brand recall vs. 21% for right-aligned
  • Navigation anchor: Users expect logo to link to homepage; left placement is intuitive
  • Scan pattern: Aligns with left-to-right reading flow

Avoid

  • Centered logos: Users navigating home from centered logos are ~6x more likely to fail
  • Right-aligned: Violates conventions; harms brand recognition

When Center May Work

  • Minimal headers with few elements
  • Brand-heavy landing pages where logo is focal point
  • Ensure logo still links to homepage and is clearly clickable

Implementation

Linking

  • Always link to homepage from logo
  • Use <a href="/"> wrapping logo image
  • Expected behavior; don't break convention

Image

  • Use appropriate format (SVG preferred for scalability)
  • Provide alt text: company/product name, not "logo"
  • Example: alt="Acme Inc." not alt="Logo"

Size &#x26; Clear Space

  • Minimum size: Document in brand guide; prevent illegibility at small sizes (favicon, mobile header).
  • Clear space: Minimum space around logo; no text or graphics within this zone. Defined in brand-visual-generator.
  • Responsive: Ensure readability on mobile; test at 375px, 768px, 1024px.
  • Variants: Primary, secondary, monogram; light/dark backgrounds per brand guidelines.

AI Product Logo Design (Optional)

For AI/SaaS products, Alignify AI Logo Guide offers industry-specific guidance.

Design Trends

Examples are illustrative; no endorsement implied.

Style

Use Case

Examples

Hexagon

Technical platforms, enterprise AI

Common in AI logos (e.g. OpenAI)

Rotation/swirl

Generative AI, creative tools

E.g. DeepMind, Stability AI

Minimalist robot

Assistants, chatbots

E.g. Jasper, Replika

Emoji/symbol

Consumer, friendly AI

E.g. Hugging Face, Zoom AI

Design Process

  • Positioning: B2B (professional, trustworthy) vs B2C (friendly, approachable)
  • Core element: Choose hexagon, rotation, robot, or emoji per product type
  • Color: Tech blue, blue-to-purple gradients, monochrome; consider dark mode
  • Test sizes: Favicon, mobile, header; ensure recognition at small sizes
  • Trademark check: Avoid conflicts with existing marks

Avoid

  • Overly complex; modern AI logos favor minimalism
  • Too similar to competitors; balance industry recognition with uniqueness
  • Overly technical symbols for B2C; use friendlier designs
  • Ignoring mobile display; test at multiple sizes
  • Frequent rebranding; choose a long-term design

SEO

  • Alt text supports accessibility and image SEO
  • Logo link contributes to internal linking (homepage)

Accessibility

Requirement

Practice

Alt text

Descriptive; company name

Contrast

Logo visible against background

Focus

Link receives visible focus state

Touch targets

Adequate size on mobile (>=44x44px)

Output Format

  • Placement recommendation
  • Implementation notes (HTML, alt, link)
  • Accessibility checklist
  • AI products (optional): Design trend and archetype suggestions per positioning

Related Skills

  • branding: Brand strategy; logo rules defined in brand guidelines
  • navigation-menu-generator: Logo typically sits in header with nav
  • hero-generator: Logo appears in hero context on landing pages
  • media-kit-page-generator: Logo assets, brand guidelines, usage rules
  • favicon-generator: Favicon derived from logo; consistent brand in browser tabs
  • brand-visual-generator: Typography, colors, spacing; logo clear space and variants
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card