skills.rest
MohamedAbdallah-14
MohamedAbdallah-14COMMUNITY
Explore all skills by this author →
GitHub

favicon

Generate a complete favicon bundle from a brand mark or prompt.

16|Updated Apr 20, 2026
Search Tags:#branding#ui#assets#icon#favicon#web
One-click install
npx skills add https://github.com/MohamedAbdallah-14/prompt-to-asset --skill favicon-mohamedabdallah-14
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon
Source: https://github.com/MohamedAbdallah-14/prompt-to-asset/tree/main/.cursor/skills/favicon
Command: npx skills add https://github.com/MohamedAbdallah-14/prompt-to-asset --skill favicon-mohamedabdallah-14

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating the full set of favicons for web apps manually is tedious and error-prone; this skill automates the production of a complete bundle from a brand mark or prompt, ensuring consistency across platforms.

Core Features & Use Cases

  • Favicon set generation: favicon.ico in 16/32/48, icon.svg, and icon-dark.svg for dark mode.
  • Platform coverage: apple-touch-icon.png (180×180 opaque) and PWA icons (192.png, 512.png, 512-maskable.png).
  • Output parity: head-snippet.html and meta.json ready for integration in web projects.

Quick Start

Provide your brand mark or prompt and run the favicon skill to generate the full bundle and assets.

Frequently Asked Questions about favicon

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

FAQPage Schema
How do I generate a complete favicon bundle for a web app?▼

To generate a favicon bundle, provide a brand mark or prompt to automate the creation of favicons in multiple sizes, SVGs with dark-mode support, Apple touch icons, and PWA assets. This outputs a ready-to-use package with all required web icons.

What sizes and formats are needed for modern web favicons and PWA icons?▼

Modern web favicons and PWA icons require favicon.ico in 16, 32, and 48 pixel sizes, icon.svg, apple-touch-icon.png at 180×180, and PWA icons at 192 and 512 pixels. Generating this complete favicon set ensures proper platform coverage.

How can I create favicons that support dark mode?▼

Favicons supporting dark mode are generated as distinct icon.svg and icon-dark.svg files. By providing your brand mark, you can automate the creation of these dark-mode assets alongside standard icons for visual consistency across user preferences.

Can I use a text prompt to generate PWA assets and Apple touch icons?▼

Yes, you can use a text prompt to generate PWA assets and Apple touch icons. The process automates the creation of apple-touch-icon.png, 192.png, 512.png, and 512-maskable.png directly from your provided brand mark or prompt.

How do I add favicon meta tags to my HTML head section?▼

To add favicon meta tags to your HTML head section, use the generated head-snippet.html file. This output provides ready-to-use HTML markup that links all generated favicons, Apple touch icons, and PWA assets correctly.

What is the best way to automate favicon generation across multiple platforms?▼

The best way to automate favicon generation across multiple platforms is using a tool that outputs a complete bundle from a single brand mark. This ensures icon consistency and provides a meta.json file for integration across web projects.

Related Skills

Explore More Design & Creative Skills→
qruiqaiqruiqai

qruiq-icon-generator

Generate a brand mark and icon asset bundle from a codebase.

Official
Advanced
mtmatteimtmattei
5

uno-wasm-pwa

Configure and deploy Uno Platform WebAssembly PWAs with service workers and manifests.

Community
Advanced
kozyszookozyszoo
1

logo-design

Coordinate six AI agents to design logos and output SVG assets.

Community
Advanced
ThomashighbaughThomashighbaugh
1

icon-generator

Generate favicon, PWA, and Unreal Engine icon sets from a single PNG or SVG source.

Community
Intermediate