skills.rest
deomiarn
deomiarnCOMMUNITY
Explore all skills by this author →
GitHub

favicon-pwa

Generate favicon variants, apple-touch-icon, and PWA manifest from brand colors.

Updated Nov 18, 2025
Search Tags:#manifest#pwa#icon#favicon#web-app
One-click install
npx skills add https://github.com/deomiarn/website-template --skill favicon-pwa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon-pwa
Source: https://github.com/deomiarn/website-template/tree/main/.claude/skills/favicon-pwa
Command: npx skills add https://github.com/deomiarn/website-template --skill favicon-pwa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures a professional, recognizable brand presence in browser tabs and supports modern web capabilities through a PWA manifest.

Core Features & Use Cases

  • Favicon Set: Creates multi-size favicon files (ico/png) for browser compatibility.
  • Apple Touch Icon: Generates apple-touch-icon for iOS devices.
  • PWA Manifest: Builds site.webmanifest with app details and icons.
  • Layout Integration: Updates Next.js layout metadata to reference icons and manifest.

Quick Start

Generate favicon and manifest assets, then update app/layout.tsx metadata to include the manifest and icons, and verify the favicon loads in the browser tab.

Frequently Asked Questions about favicon-pwa

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

FAQPage Schema
How do I set up a favicon and PWA manifest for my Next.js website?▼

A favicon setup automates generation of multi-size icon files (16x16, 32x32, 48x48 ico formats, plus PNG variants) and a site.webmanifest file from a 512x512 source image and brand colors in globals.css. The Skill integrates these assets into app/layout.tsx metadata, ensuring your site displays consistently across browser tabs, bookmarks, and PWA installations.

What files do I need before generating favicon and PWA assets?▼

You need a 512x512 PNG or SVG source favicon and brand color values defined in globals.css. These inputs feed the generation process to create favicon variants, apple-touch-icon.png, icon-192.png, icon-512.png, and site.webmanifest with correct app metadata and icon references.

Can I use a PWA manifest with my existing Next.js layout?▼

Yes. A PWA manifest integrates directly into Next.js app/layout.tsx metadata tags, linking your favicon set, apple-touch-icon, and manifest file. This enables PWA capabilities like installability and offline support while maintaining existing layout structure.

Why do I need apple-touch-icon and multiple favicon sizes?▼

Different platforms and contexts require different icon formats: browsers use favicon.ico and 32x32 PNG for tabs, iOS devices use apple-touch-icon.png, and PWA installations use icon-192.png and icon-512.png. Generating the full set ensures professional appearance and proper PWA functionality across devices.

What's the difference between favicon.ico and a PWA manifest?▼

favicon.ico is a static image file displayed in browser tabs and bookmarks. A PWA manifest is a JSON file that describes your app metadata, lists all icon variants, and enables progressive web app features like home-screen installation and offline caching on modern browsers.

Can I automate favicon generation from brand colors?▼

Yes. By extracting brand color values from globals.css and processing a 512x512 source image, the Skill generates all favicon variants and integrates them with manifest metadata, eliminating manual icon resizing and format conversion.

Related Skills

Explore More Design & Creative Skills→
ThomashighbaughThomashighbaugh
1

icon-generator

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

Community
Intermediate
sayali-ingle-pdlsayali-ingle-pdl

public

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

Community
Intermediate
DexploarerDexploarer
6

app-icon-generator

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

Community
Intermediate
erfianugraherfianugrah
1

favicons-and-icons

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

Community
Intermediate