skills.rest
dennislee928
dennislee928COMMUNITY
Explore all skills by this author →
WebsiteGitHub

favicon-gen

Generate SVG, ICO, PNG, and Web App Manifest favicon packages from brand assets.

54|Updated Nov 19, 2025
Search Tags:#branding#web design#pwa#icon#favicon#logo
One-click install
npx skills add https://github.com/dennislee928/Ethic-Latex --skill favicon-gen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon-gen
Source: https://github.com/dennislee928/Ethic-Latex/tree/main/.claude/skills/favicon-gen
Command: npx skills add https://github.com/dennislee928/Ethic-Latex --skill favicon-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and agents (resource) components.

What problem does it solve?

This Skill prevents the common branding mistake of launching with default CMS favicons by generating complete, custom favicon packages from logos, text, or brand colors.

Core Features & Use Cases

  • Logo to Favicon: Extract and simplify icons from existing logos.
  • Monogram Favicons: Create professional lettermark favicons from business names.
  • All Formats: Generates SVG, ICO, PNGs (180x180, 192x192, 512x512), and web app manifests.
  • Use Case: You're launching a new website and need to replace the default WordPress favicon with a custom one derived from your logo's icon element.

Quick Start

Use the favicon-gen skill to create a favicon package from the attached logo file 'brand-logo.svg'.

Frequently Asked Questions about favicon-gen

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

FAQPage Schema
How do I generate a complete favicon package from an existing logo?▼

Generate a complete favicon package by providing your logo file to extract and simplify the icon element, producing SVG, ICO, PNGs (180x180, 192x192, 512x512), and a web app manifest to prevent default CMS branding errors.

What formats do I need for a website favicon to work on all devices?▼

A website favicon requires SVG, ICO, and PNG formats (180x180, 192x192, 512x512) alongside a web app manifest to ensure proper display across desktop browsers, iOS devices, and PWA installations while avoiding transparency bugs.

Can I create a favicon from text initials instead of a full logo?▼

You can create professional lettermark favicons from text initials or business names, generating a complete package of SVG, ICO, and PNG files that remain legible at small sizes without needing a full logo asset.

Why does my favicon look illegible at small sizes on mobile devices?▼

Favicons become illegible at small sizes when complex logo details are not simplified, which is why generating optimized lettermark favicons or extracting simplified icon elements ensures clarity across iOS and other mobile displays.

Does favicon generation include files needed for a PWA web app manifest?▼

Favicon generation includes creating the 192x192 and 512x512 PNG files along with a web app manifest, providing the exact icon assets required for Progressive Web App installation and preventing common mobile display issues.

Do I need a specific image format to start generating favicons?▼

You can start generating favicons using various brand assets including SVG logo files, text initials, or color palettes, which are then processed into all required formats like ICO and PNGs to replace default CMS icons.

Related Skills

Explore More Design & Creative Skills→
moughamirmoughamir

favicon-gen

Generate SVG, ICO, PNG, and web manifest favicon assets from logo, initials, or brand colors.

Community
Intermediate
evolv3aievolv3ai
3

favicon-gen

Generate complete favicon packages with SVG, ICO, PNGs, and web manifest.

Community
Intermediate
smithisrealdevsmithisrealdev

SVG Logo Designer

Generate SVG logos from text descriptions with multiple layouts and color options.

Community
Advanced
GLaDO8GLaDO8

favicon

Generate a complete favicon set and update project HTML references.

Community
Advanced