skills.rest
AnanyaBanerjee
AnanyaBanerjeeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/AnanyaBanerjee/front-end-expert --skill logo-ananyabanerjee
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
tianhuiltianhuil

search-corporate-logo

Search and retrieve corporate SVG logos from SVGL.app by brand name.

Community
Intermediate
alexica00alexica00

landing-page-generator

Convert repository documentation into a deploy-ready static landing page.

Community
Intermediate
Hans3010Hans3010

landing-page-design

Design landing pages with optimized layout, hero sections, and CTA psychology.

Community
Intermediate
MohammedSaudAlsahliMohammedSaudAlsahli

SVG Logo Designer

Generate scalable SVG logos with multiple concept variations and layout options.

Community
Advanced