How do I install the Canon Favicons skill?

Run npx skillmds@latest add dragoon0x/canon-favicons in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Canon Favicons safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Canon Favicons?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Canon Favicons free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Canon Favicons?

dragoon0x (@dragoon0x) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Canon Favicons by dragoon0x — Agent Skill

Name: Canon Favicons
Author: dragoon0x

Canon Favicons

Use when implementing favicons, touch icons, web app icons, or browser tab icons — the full set of sizes and formats needed for modern browsers, iOS home screen, Android, and PWA manifests. Trigger when the user mentions favicon, icon, apple-touch-icon, manifest icons, or browser tab icon.

dragoon0x Updated Sep 17, 2026

File contents

CANON · Favicons

Favicons are the smallest piece of branding and the most often botched. Modern browsers need multiple sizes, formats, and declarations.

The minimal set

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Files to generate

File	Size	Format	Purpose
`favicon.ico`	32×32 (can embed 16×16)	ICO	Legacy browsers, bookmarks bar
`icon.svg`	Scalable	SVG	Modern browsers (Chrome, Firefox)
`apple-touch-icon.png`	180×180	PNG	iOS home screen
`icon-192.png`	192×192	PNG	Android home screen, PWA
`icon-512.png`	512×512	PNG	PWA splash screen

SVG favicon with dark mode

SVG favicons can adapt to dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #0a0a0a; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #f5f5f5; }
    }
  </style>
  <rect width="32" height="32" rx="4"/>
</svg>

Web app manifest

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0a0a0a",
  "background_color": "#ffffff",
  "display": "standalone"
}

theme_color affects the browser toolbar color on Android.

Design rules

Simple at 16px. If your logo doesn't read at 16×16, simplify it to a lettermark or geometric shape.
No text at small sizes. Text is illegible below 32px.
High contrast against both light and dark browser chrome. Test on light and dark OS themes.
Square. All favicon slots are square. Don't force a horizontal logo into a square; make a square variant.
No transparency for apple-touch-icon. iOS fills transparent areas with black. Use a solid background.

Anti-patterns

Anti-pattern	Why it fails
Only a 16×16 favicon.ico	Blurry on retina, missing from home screens
Full logo crammed into 32px	Illegible
Transparent apple-touch-icon	Black background on iOS
No manifest for PWA	Missing home-screen icon on Android
favicon.png instead of .ico for legacy	Some browsers only check .ico
No SVG favicon	Missing dark-mode adaptation

Audit checklist

favicon.ico at 32×32
SVG favicon for modern browsers
apple-touch-icon.png at 180×180 (no transparency)
192px and 512px PNG for PWA manifest
manifest.webmanifest linked in <head>
Icon reads clearly at 16×16
Tested on light and dark browser chrome
theme_color and background_color set in manifest

Sources

web.dev · "How to Favicon" (Andrey Sitnik)
Apple · Configuring Web Applications (touch icons)
W3C · Web App Manifest
Real Favicon Generator · comprehensive tool

---name: canon-faviconsdescription: Use when implementing favicons, touch icons, web app icons, or browser tab icons — the full set of sizes and formats needed for modern browsers, iOS home screen, Android, and PWA manifests. Trigger when the user mentions favicon, icon, apple-touch-icon, manifest icons, or browser tab icon.---# CANON · FaviconsFavicons are the smallest piece of branding and the most often botched. Modern browsers need multiple sizes, formats, and declarations.## The minimal set```html<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest">```## Files to generate| File | Size | Format | Purpose ||---|---|---|---|| `favicon.ico` | 32×32 (can embed 16×16) | ICO | Legacy browsers, bookmarks bar || `icon.svg` | Scalable | SVG | Modern browsers (Chrome, Firefox) || `apple-touch-icon.png` | 180×180 | PNG | iOS home screen || `icon-192.png` | 192×192 | PNG | Android home screen, PWA || `icon-512.png` | 512×512 | PNG | PWA splash screen |## SVG favicon with dark modeSVG favicons can adapt to dark mode:```svg<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <style> rect { fill: #0a0a0a; } @media (prefers-color-scheme: dark) { rect { fill: #f5f5f5; } } </style> <rect width="32" height="32" rx="4"/></svg>```## Web app manifest```json{ "name": "My App", "short_name": "App", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#0a0a0a", "background_color": "#ffffff", "display": "standalone"}````theme_color` affects the browser toolbar color on Android.## Design rules- **Simple at 16px.** If your logo doesn't read at 16×16, simplify it to a lettermark or geometric shape.- **No text at small sizes.** Text is illegible below 32px.- **High contrast against both light and dark browser chrome.** Test on light and dark OS themes.- **Square.** All favicon slots are square. Don't force a horizontal logo into a square; make a square variant.- **No transparency for apple-touch-icon.** iOS fills transparent areas with black. Use a solid background.## Anti-patterns| Anti-pattern | Why it fails ||---|---|| Only a 16×16 favicon.ico | Blurry on retina, missing from home screens || Full logo crammed into 32px | Illegible || Transparent apple-touch-icon | Black background on iOS || No manifest for PWA | Missing home-screen icon on Android || favicon.png instead of .ico for legacy | Some browsers only check .ico || No SVG favicon | Missing dark-mode adaptation |## Audit checklist- [ ] `favicon.ico` at 32×32- [ ] SVG favicon for modern browsers- [ ] `apple-touch-icon.png` at 180×180 (no transparency)- [ ] 192px and 512px PNG for PWA manifest- [ ] `manifest.webmanifest` linked in `<head>`- [ ] Icon reads clearly at 16×16- [ ] Tested on light and dark browser chrome- [ ] `theme_color` and `background_color` set in manifest## Sources- web.dev · "How to Favicon" (Andrey Sitnik)- Apple · Configuring Web Applications (touch icons)- W3C · Web App Manifest- Real Favicon Generator · comprehensive tool

Frequently asked questions