skills.rest
erfianugrah
erfianugrahCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

favicons-and-icons

Generate favicon, app icon, and PWA manifest artifacts from SVG or PNG.

1|Updated Mar 18, 2024
Search Tags:#app icon#comfyui#webmanifest#pwa icons#favicon generation#svg branding#html head snippet
One-click install
npx skills add https://github.com/erfianugrah/dotfiles --skill favicons-and-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicons-and-icons
Source: https://github.com/erfianugrah/dotfiles/tree/main/.pi/agent/skills/favicons-and-icons
Command: npx skills add https://github.com/erfianugrah/dotfiles --skill favicons-and-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the manual, error-prone work of creating complete favicon and app icon sets across browsers and devices by generating a ready-to-use PWA artifact bundle from a single SVG or a single master raster image.

Core Features & Use Cases

  • Vector-first SVG pipeline: write an SVG inline for geometric marks and monograms, tuned to remain readable at small favicon sizes (e.g., 16×16).
  • Raster workflow via ComfyUI: generate a high-quality 1024×1024 icon with richer gradients/materials and then convert it into the full favicon/PWA set.
  • One convergence toolchain: both input paths feed into a single build step that produces favicon.ico, multiple PNG sizes, apple-touch-icon.png, icon-maskable.png, site.webmanifest, and a correct HTML <head> snippet for immediate integration.

Quick Start

Tell the agent to generate a favicon set from your brand by providing either an SVG you wrote inline or a path to your master PNG, plus the PWA name/short name and theme colors, and then paste the returned HTML snippet into your page’s <head>.

Frequently Asked Questions about favicons-and-icons

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

FAQPage Schema
How do I generate a complete favicon and PWA icon set from a single SVG?▼

To generate a favicon and PWA icon set from an SVG, route the SVG file into the build step along with your PWA name, short name, and theme colors to output favicon.ico, multiple PNGs, apple-touch-icon, maskable icons, site.webmanifest, and an HTML head snippet.

What's the best way to create maskable PWA icons and a webmanifest for my web project?▼

Creating maskable PWA icons and a webmanifest requires providing a master image and theme colors to a build tool, which processes the inputs to output a ready-to-use PWA artifact bundle including icon-maskable.png and site.webmanifest for immediate multi-device branding.

Can I use a ComfyUI generated PNG to build my website's apple-touch-icon and favicon.ico?▼

Yes, you can use a ComfyUI generated 1024x1024 master PNG as input for the raster workflow, feeding it into the build step to produce favicon.ico, apple-touch-icon.png, and the full PWA manifest artifact set.

How do I add the correct HTML head snippet for favicons and PWA icons to my webpage?▼

Adding the correct HTML head snippet involves pasting the generated code returned by the build process directly into your page's head section, ensuring the browser correctly references the favicon.ico, apple-touch-icon, and PWA manifest artifacts.

Do I need to manually resize images for different PWA icon sizes?▼

No, you do not need to manually resize images for PWA icon sizes because the pipeline takes a single source SVG or 1024x1024 master PNG and automatically generates the complete set of required multi-device PNG sizes.

Why does my favicon SVG look unreadable at 16x16 pixels?▼

An SVG favicon may look unreadable at 16x16 pixels if the geometric marks or monograms are not specifically tuned for small sizes, which is why the vector-first pipeline includes adjustments to maintain readability at low resolutions.

Related Skills

Explore More Design & Creative Skills→
GhostScientistGhostScientist
3

ios-app-icon-generator

Generate a complete iOS app icon set from a single design concept.

Community
Advanced
sayali-ingle-pdlsayali-ingle-pdl

public

Generate PWA favicons, icons, and site.webmanifest in the public/ directory.

Community
Intermediate
rmjamesrmjames
1

image-processor

Resize and crop raster and SVG images with ImageMagick and SVGO.

Community
Advanced
MohamedAbdallah-14MohamedAbdallah-14
16

favicon

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

Community
Intermediate