skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

favicon-gen

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

Updated Mar 26, 2026
Search Tags:#imagemagick#favicon-gen#brand icons#favicon package#logo to favicon#pwa manifest#ios app icons
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill favicon-gen-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon-gen
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/favicon-gen
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill favicon-gen-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Produces a full set of favicons from your logo, initials, or brand colors so your site displays the correct icons everywhere (browser tabs, iOS, Android/PWA) without missing-manifest or iOS “black square” issues.

Core Features & Use Cases

  • Full favicon package generation: Creates favicon.svg, favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png, and a site.webmanifest.
  • Multiple input approaches: Extract icon paths from an SVG logo, create a monogram from initials, or use branded shape templates.
  • Practical troubleshooting guidance: Covers common failure modes like unreadable 16x16 rendering, transparent iOS icons, and absent/incorrect manifest assets.

Quick Start

Tell the favicon-gen skill to generate all required favicon files and HTML <head> integration tags using your brand primary color and the logo icon (or your initials).

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 for a website, PWA, and iOS?▼

To generate a complete favicon package, you need SVG, ICO, apple-touch-icon, 192/512 PNGs, and a valid web manifest. This ensures consistent cross-platform rendering across browser tabs, iOS, and Android without missing-manifest issues.

Why does my iOS apple-touch-icon display as a black square with transparency?▼

Your iOS apple-touch-icon displays as a black square because transparent backgrounds render incorrectly on iOS. Applying iOS solid-background rules during favicon generation prevents this transparent icon display issue.

Can I create a favicon from initials or brand colors instead of a full logo?▼

You can create a favicon from initials or brand colors by generating a monogram icon. This approach extracts brand elements or uses branded shape templates to build a complete favicon asset set.

How do I convert an SVG logo to an ICO favicon using ImageMagick?▼

To convert an SVG logo to an ICO favicon using ImageMagick, follow ImageMagick-compatible conversion steps to transform the vector SVG into the required favicon.ico format for browser tabs.

What is the best way to fix unreadable 16x16 favicon rendering in browser tabs?▼

The best way to fix unreadable 16x16 favicon rendering is to optimize the source icon paths during favicon package generation. Troubleshooting guidance helps adapt complex SVG logos for clear small-resolution display.

Related Skills

Explore More Design & Creative Skills→
evolv3aievolv3ai
3

favicon-gen

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

Community
Intermediate
GLaDO8GLaDO8

favicon

Generate a complete favicon set and update project HTML references.

Community
Advanced
AshleyHollisAshleyHollis

azure-cli-operations

Manage Azure resources via Azure CLI for ACR, AKS, Storage, and Key Vault.

Community
Intermediate
DexploarerDexploarer
6

app-icon-generator

Generate multi-size app icons for iOS, Android, and PWA from a single source image.

Community
Intermediate