logo

Save a provided logo to site/logo.* and apply Navbar, Hero, and Footer placement rules.

Updated Apr 10, 2026

Search Tags:#branding #assets #svg #ui-design #landing-page #logo #wordmark

Ready to run

npx skills add https://github.com/AnanyaBanerjee/front-end-expert --skill logo-ananyabanerjee

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: logo
Source: https://github.com/AnanyaBanerjee/front-end-expert/tree/main/skills/logo
Command: npx skills add https://github.com/AnanyaBanerjee/front-end-expert --skill logo-ananyabanerjee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing branding across landing pages requires consistently acquiring a logo, placing it correctly, and providing a fallback wordmark when none exists.

Core Features & Use Cases

Promptly ask the user for a logo and validate the file (PNG, SVG, or JPG) or provide a clean text-based wordmark if no logo is supplied.
File handling and placement rules: save to site/logo.*; ensure placement in Navbar (top-left, 28–36px height); optional Hero (40–56px height) if helpful; Footer placement (bottom-left or centered, 20–24px height); include favicon support and background contrast considerations.
If no logo is provided, generate a clean SVG wordmark using the product name, font, and color guidelines; save as site/logo.svg and site/logo-light.svg.

Quick Start

Ask the user for a logo, save it to site/logo.* and apply placement rules, or create a clean SVG wordmark if none is provided.

Frequently Asked Questions about logo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add a logo to a landing page navbar and footer?▼

If no logo is supplied, you can generate a fallback wordmark using your product name, font, and color guidelines. This creates a clean text-based SVG wordmark saved as site/logo.svg and site/logo-light.svg.

What image formats are supported for uploading a website logo?▼

For optimal navbar and hero placement, a validated logo file is saved directly to your site directory. If the file lacks sufficient contrast or fails validation, a fallback SVG wordmark is generated instead.

How do I create a text-based wordmark when I don't have a logo file?▼

The generated wordmark ensures your landing page maintains a professional appearance in the navbar, hero section, and footer without requiring a pre-designed graphic asset.

What are the recommended logo sizes for navbar, hero, and footer sections?▼

Applying these specific size constraints prevents the logo from overwhelming the navigation or getting lost in the footer, maintaining a balanced UI design.

Does this logo placement process handle favicon generation and background contrast?▼

If the uploaded logo fails the contrast check or is not provided, the system generates a compliant fallback SVG wordmark using predefined color guidelines.