{"id":"2a4455e5-6ec3-4128-854c-50d0c4cb145d","shortId":"tuP438","kind":"skill","title":"favicon","tagline":"Generate favicons from a source image","description":"Generate a complete set of favicons from the source image at `$1` and update the project's HTML with the appropriate link tags.\n\n## When to Use\n- You need to generate a complete favicon set from a single source image.\n- The task includes placing the assets in the correct framework-specific static directory and updating HTML link tags.\n- You want one workflow that validates the source image, detects the project type, and writes the right favicon outputs.\n\n## Prerequisites\n\nFirst, verify ImageMagick v7+ is installed by running:\n```bash\nwhich magick\n```\n\nIf not found, stop and instruct the user to install it:\n- **macOS**: `brew install imagemagick`\n- **Linux**: `sudo apt install imagemagick`\n\n## Step 1: Validate Source Image\n\n1. Verify the source image exists at the provided path: `$1`\n2. Check the file extension is a supported format (PNG, JPG, JPEG, SVG, WEBP, GIF)\n3. If the file doesn't exist or isn't a valid image format, report the error and stop\n\nNote whether the source is an SVG file - if so, it will also be copied as `favicon.svg`.\n\n## Step 2: Detect Project Type and Static Assets Directory\n\nDetect the project type and determine where static assets should be placed. Check in this order:\n\n| Framework | Detection | Static Assets Directory |\n|-----------|-----------|------------------------|\n| **Rails** | `config/routes.rb` exists | `public/` |\n| **Next.js** | `next.config.*` exists | `public/` |\n| **Gatsby** | `gatsby-config.*` exists | `static/` |\n| **SvelteKit** | `svelte.config.*` exists | `static/` |\n| **Astro** | `astro.config.*` exists | `public/` |\n| **Hugo** | `hugo.toml` or `config.toml` with Hugo markers | `static/` |\n| **Jekyll** | `_config.yml` with Jekyll markers | Root directory (same as `index.html`) |\n| **Vite** | `vite.config.*` exists | `public/` |\n| **Create React App** | `package.json` has `react-scripts` dependency | `public/` |\n| **Vue CLI** | `vue.config.*` exists | `public/` |\n| **Angular** | `angular.json` exists | `src/assets/` |\n| **Eleventy** | `.eleventy.js` or `eleventy.config.*` exists | Check `_site` output or root |\n| **Static HTML** | `index.html` in root | Same directory as `index.html` |\n\n**Important**: If existing favicon files are found (e.g., `favicon.ico`, `apple-touch-icon.png`), use their location as the target directory regardless of framework detection.\n\nReport the detected project type and the static assets directory that will be used.\n\n**When in doubt, ask**: If you are not 100% confident about where static assets should be placed (e.g., ambiguous project structure, multiple potential locations, unfamiliar framework), use `AskUserQuestionTool` to confirm the target directory before proceeding. It's better to ask than to put files in the wrong place.\n\n## Step 3: Determine App Name\n\nFind the app name from these sources (in priority order):\n\n1. **Existing `site.webmanifest`** - Check the detected static assets directory for an existing manifest and extract the `name` field\n2. **`package.json`** - Extract the `name` field if it exists\n3. **Rails `config/application.rb`** - Extract the module name (e.g., `module MyApp` → \"MyApp\")\n4. **Directory name** - Use the current working directory name as fallback\n\nConvert the name to title case if needed (e.g., \"my-app\" → \"My App\").\n\n## Step 4: Ensure Static Assets Directory Exists\n\nCheck if the detected static assets directory exists. If not, create it.\n\n## Step 5: Generate Favicon Files\n\nRun these ImageMagick commands to generate all favicon files. Replace `[STATIC_DIR]` with the detected static assets directory from Step 2.\n\n**Important**: The `-background none` flag must come BEFORE the input file to properly preserve transparency when rendering SVGs. Placing it after the input will result in a white background.\n\n### favicon.ico (multi-resolution: 16x16, 32x32, 48x48)\n```bash\nmagick -background none \"$1\" \\\n  \\( -clone 0 -resize 16x16 \\) \\\n  \\( -clone 0 -resize 32x32 \\) \\\n  \\( -clone 0 -resize 48x48 \\) \\\n  -delete 0 -alpha on \\\n  [STATIC_DIR]/favicon.ico\n```\n\n### favicon-96x96.png\n```bash\nmagick -background none \"$1\" -resize 96x96 -alpha on [STATIC_DIR]/favicon-96x96.png\n```\n\n### apple-touch-icon.png (180x180)\n```bash\nmagick -background none \"$1\" -resize 180x180 -alpha on [STATIC_DIR]/apple-touch-icon.png\n```\n\n### web-app-manifest-192x192.png\n```bash\nmagick -background none \"$1\" -resize 192x192 -alpha on [STATIC_DIR]/web-app-manifest-192x192.png\n```\n\n### web-app-manifest-512x512.png\n```bash\nmagick -background none \"$1\" -resize 512x512 -alpha on [STATIC_DIR]/web-app-manifest-512x512.png\n```\n\n### favicon.svg (only if source is SVG)\nIf the source file has a `.svg` extension, copy it:\n```bash\ncp \"$1\" [STATIC_DIR]/favicon.svg\n```\n\n## Step 6: Create/Update site.webmanifest\n\nCreate or update `[STATIC_DIR]/site.webmanifest` with this content (substitute the detected app name):\n\n```json\n{\n  \"name\": \"[APP_NAME]\",\n  \"short_name\": \"[APP_NAME]\",\n  \"icons\": [\n    {\n      \"src\": \"/web-app-manifest-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable\"\n    },\n    {\n      \"src\": \"/web-app-manifest-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable\"\n    }\n  ],\n  \"theme_color\": \"#ffffff\",\n  \"background_color\": \"#ffffff\",\n  \"display\": \"standalone\"\n}\n```\n\nIf `site.webmanifest` already exists in the static directory, preserve the existing `theme_color`, `background_color`, and `display` values while updating the `name`, `short_name`, and `icons` array.\n\n## Step 7: Update HTML/Layout Files\n\nBased on the detected project type, update the appropriate file. Adjust the `href` paths based on where the static assets directory is relative to the web root:\n- If static files are in `public/` or `static/` and served from root → use `/favicon.ico`\n- If static files are in `src/assets/` → use `/assets/favicon.ico`\n- If static files are in the same directory as HTML → use `./favicon.ico` or just `favicon.ico`\n\n### For Rails Projects\n\nEdit `app/views/layouts/application.html.erb`. Find the `<head>` section and add/replace favicon-related tags with:\n\n```html\n<link rel=\"icon\" type=\"image/png\" href=\"/favicon-96x96.png\" sizes=\"96x96\" />\n<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n<link rel=\"shortcut icon\" href=\"/favicon.ico\" />\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\" />\n<meta name=\"apple-mobile-web-app-title\" content=\"[APP_NAME]\" />\n<link rel=\"manifest\" href=\"/site.webmanifest\" />\n```\n\n**Important**:\n- If the source was NOT an SVG, omit the `<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />` line\n- Remove any existing `<link rel=\"icon\"`, `<link rel=\"shortcut icon\"`, `<link rel=\"apple-touch-icon\"`, or `<link rel=\"manifest\"` tags before adding the new ones\n- Place these tags near the top of the `<head>` section, after `<meta charset>` and `<meta name=\"viewport\">` if present\n\n### For Next.js Projects\n\nEdit the detected layout file (`app/layout.tsx` or `src/app/layout.tsx`). Update or add the `metadata` export to include icons configuration:\n\n```typescript\nexport const metadata: Metadata = {\n  // ... keep existing metadata fields\n  icons: {\n    icon: [\n      { url: '/favicon.ico' },\n      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },\n      { url: '/favicon.svg', type: 'image/svg+xml' },\n    ],\n    shortcut: '/favicon.ico',\n    apple: '/apple-touch-icon.png',\n  },\n  manifest: '/site.webmanifest',\n  appleWebApp: {\n    title: '[APP_NAME]',\n  },\n};\n```\n\n**Important**:\n- If the source was NOT an SVG, omit the `{ url: '/favicon.svg', type: 'image/svg+xml' }` entry from the icon array\n- If metadata export doesn't exist, create it with just the icons-related fields\n- If metadata export exists, merge the icons configuration with existing fields\n\n### For Static HTML Projects\n\nEdit the detected `index.html` file. Add the same HTML as Rails within the `<head>` section.\n\n### If No Project Detected\n\nSkip HTML updates and inform the user they need to manually add the following to their HTML `<head>`:\n\n```html\n<link rel=\"icon\" type=\"image/png\" href=\"/favicon-96x96.png\" sizes=\"96x96\" />\n<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n<link rel=\"shortcut icon\" href=\"/favicon.ico\" />\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\" />\n<meta name=\"apple-mobile-web-app-title\" content=\"[APP_NAME]\" />\n<link rel=\"manifest\" href=\"/site.webmanifest\" />\n```\n\n## Step 8: Summary\n\nReport completion with:\n- Detected project type and framework\n- Static assets directory used\n- List of files generated\n- App name used in manifest and HTML\n- Layout file updated (or note if manual update is needed)\n- Note if any existing files were overwritten\n\n## Error Handling\n\n- If ImageMagick is not installed, provide installation instructions and stop\n- If the source image doesn't exist, report the exact path that was tried and stop\n- If ImageMagick commands fail, report the specific error message\n- If the layout file cannot be found for HTML updates, generate files anyway and instruct on manual HTML addition\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["favicon","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity-skills"],"capabilities":["skill","source-sickn33","skill-favicon","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/favicon","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34793 github stars · SKILL.md body (9,394 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T00:50:55.746Z","embedding":null,"createdAt":"2026-04-18T21:37:05.753Z","updatedAt":"2026-04-24T00:50:55.746Z","lastSeenAt":"2026-04-24T00:50:55.746Z","tsv":"'/apple-touch-icon.png':588,898 '/assets/favicon.ico':768 '/favicon-96x96.png':574,885 '/favicon.ico':561,760,780,883,896 '/favicon.svg':636,891,916 '/site.webmanifest':646,900 '/web-app-manifest-192x192.png':601,665 '/web-app-manifest-512x512.png':614,673 '0':544,548,552,556 '1':19,118,122,132,394,542,567,581,594,607,633 '100':339 '16x16':535,546 '180x180':576,583 '192x192':596,667 '2':133,185,412,501 '3':148,380,421 '32x32':536,550 '4':432,458 '48x48':537,554 '5':477 '512x512':609,675 '6':638 '7':716 '8':992 '96x96':569,887 'ad':833 'add':863,960,984 'add/replace':793 'addit':1089 'adjust':730 'alpha':557,570,584,597,610 'alreadi':690 'also':179 'ambigu':349 'angular':273 'angular.json':274 'anyway':1083 'app':260,382,386,454,456,653,657,661,903,1010 'app/layout.tsx':858 'app/views/layouts/application.html.erb':788 'appl':824,897 'apple-touch-icon':823 'apple-touch-icon.png':305,575 'applewebapp':901 'appropri':28,728 'apt':114 'array':714,924 'ask':334,370,1123 'askuserquestiontool':358 'asset':52,191,201,212,325,344,401,461,469,497,739,1003 'astro':232 'astro.config':233 'background':504,530,540,565,579,592,605,683,701 'base':720,734 'bash':94,538,563,577,590,603,631 'better':368 'boundari':1131 'brew':109 'cannot':1075 'case':448 'check':134,205,282,397,464 'clarif':1125 'clear':1098 'cli':269 'clone':543,547,551 'color':681,684,700,702 'come':508 'command':484,1064 'complet':10,39,995 'confid':340 'config':225 'config.toml':239 'config.yml':245 'config/application.rb':423 'config/routes.rb':215 'configur':870,947 'confirm':360 'const':873 'content':649 'convert':443 'copi':181,629 'correct':55 'cp':632 'creat':258,474,641,931 'create/update':639 'criteria':1134 'current':437 'delet':555 'depend':266 'describ':1102 'detect':75,186,193,210,316,319,399,467,495,652,723,855,957,972,997 'determin':198,381 'dir':492,560,573,587,600,613,635,645 'directori':60,192,213,250,293,312,326,363,402,433,439,462,470,498,695,740,776,1004 'display':686,704 'doesn':152,928,1050 'doubt':333 'e.g':303,348,428,451 'edit':787,853,955 'eleventi':277 'eleventy.config':280 'eleventy.js':278 'ensur':459 'entri':920 'environ':1114 'environment-specif':1113 'error':164,1034,1069 'exact':1055 'exist':127,154,216,220,226,230,234,256,271,275,281,298,395,405,420,463,471,691,698,813,877,930,943,949,1030,1052 'expert':1119 'export':866,872,927,942 'extens':137,628 'extract':408,414,424 'fail':1065 'fallback':442 'favicon':1,3,13,40,83,299,479,488,795 'favicon-96x96.png':562 'favicon-rel':794 'favicon.ico':304,531,783 'favicon.svg':183,615 'ffffff':682,685 'field':411,417,879,939,950 'file':136,151,174,300,374,480,489,512,624,719,729,749,763,771,857,959,1008,1018,1031,1074,1082 'find':384,789 'first':86 'flag':506 'follow':986 'format':141,161 'found':99,302,1077 'framework':57,209,315,356,1001 'framework-specif':56 'gatsbi':222,224 'gatsby-config':223 'generat':2,8,37,478,486,1009,1081 'gif':147 'handl':1035 'href':732 'html':25,63,288,778,799,953,963,974,989,990,1016,1079,1088 'html/layout':718 'hugo':236,241 'hugo.toml':237 'icon':663,713,816,820,826,869,880,881,923,937,946 'icons-rel':936 'imag':7,17,46,74,121,126,160,1049 'image/png':669,677,889 'image/svg':893,918 'imagemagick':88,111,116,483,1037,1063 'import':296,502,800,905 'includ':49,868 'index.html':253,289,295,958 'inform':977 'input':511,524,1128 'instal':91,106,110,115,1040,1042 'instruct':102,1043,1085 'isn':156 'jekyl':244,247 'jpeg':144 'jpg':143 'json':655 'keep':876 'layout':856,1017,1073 'limit':1090 'line':810 'link':29,64,814,817,821,828 'linux':112 'list':1006 'locat':308,354 'maco':108 'magick':96,539,564,578,591,604 'manifest':406,830,899,1014 'manual':983,1023,1087 'marker':242,248 'maskabl':671,679 'match':1099 'merg':944 'messag':1070 'metadata':865,874,875,878,926,941 'miss':1136 'modul':426,429 'multi':533 'multi-resolut':532 'multipl':352 'must':507 'my-app':452 'myapp':430,431 'name':383,387,410,416,427,434,440,445,654,656,658,660,662,709,711,904,1011 'near':840 'need':35,450,981,1026 'new':835 'next.config':219 'next.js':218,851 'none':505,541,566,580,593,606 'note':167,1021,1027 'omit':808,913 'one':68,836 'order':208,393 'output':84,284,1108 'overwritten':1033 'package.json':261,413 'path':131,733,1056 'permiss':1129 'place':50,204,347,378,520,837 'png':142 'potenti':353 'prerequisit':85 'present':849 'preserv':515,696 'prioriti':392 'proceed':365 'project':23,77,187,195,320,350,724,786,852,954,971,998 'proper':514 'provid':130,1041 'public':217,221,235,257,267,272,752 'purpos':670,678 'put':373 'rail':214,422,785,965 'react':259,264 'react-script':263 'regardless':313 'rel':815,818,822,829 'relat':742,796,938 'remov':811 'render':518 'replac':490 'report':162,317,994,1053,1066 'requir':1127 'resiz':545,549,553,568,582,595,608 'resolut':534 'result':526 'review':1120 'right':82 'root':249,286,291,746,758 'run':93,481 'safeti':1130 'scope':1101 'script':265 'section':791,845,968 'serv':756 'set':11,41 'short':659,710 'shortcut':819,895 'singl':44 'site':283 'site.webmanifest':396,640,689 'size':666,674,886 'skill':1093 'skill-favicon' 'skip':973 'sourc':6,16,45,73,120,125,170,390,618,623,803,908,1048 'source-sickn33' 'specif':58,1068,1115 'src':664,672 'src/app/layout.tsx':860 'src/assets':276,766 'standalon':687 'static':59,190,200,211,227,231,243,287,324,343,400,460,468,491,496,559,572,586,599,612,634,644,694,738,748,754,762,770,952,1002 'step':117,184,379,457,476,500,637,715,991 'stop':100,166,1045,1061,1121 'structur':351 'substitut':650,1111 'success':1133 'sudo':113 'summari':993 'support':140 'svelte.config':229 'sveltekit':228 'svg':145,173,620,627,807,912 'svgs':519 'tag':30,65,797,831,839 'target':311,362 'task':48,1097 'test':1117 'theme':680,699 'titl':447,902 'top':842 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touch':825 'transpar':516 'treat':1106 'tri':1059 'type':78,188,196,321,668,676,725,888,892,917,999 'typescript':871 'unfamiliar':355 'updat':21,62,643,707,717,726,861,975,1019,1024,1080 'url':882,884,890,915 'use':33,306,330,357,435,759,767,779,1005,1012,1091 'user':104,979 'v7':89 'valid':71,119,159,1116 'valu':705 'verifi':87,123 'vite':254 'vite.config':255 'vue':268 'vue.config':270 'want':67 'web':745 'web-app-manifest-192x192.png':589 'web-app-manifest-512x512.png':602 'webp':146 'whether':168 'white':529 'within':966 'work':438 'workflow':69 'write':80 'wrong':377 'xml':894,919","prices":[{"id":"de37f071-8973-447b-9d51-97eab33c06e6","listingId":"2a4455e5-6ec3-4128-854c-50d0c4cb145d","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:37:05.753Z"}],"sources":[{"listingId":"2a4455e5-6ec3-4128-854c-50d0c4cb145d","source":"github","sourceId":"sickn33/antigravity-awesome-skills/favicon","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/favicon","isPrimary":false,"firstSeenAt":"2026-04-18T21:37:05.753Z","lastSeenAt":"2026-04-24T00:50:55.746Z"}],"details":{"listingId":"2a4455e5-6ec3-4128-854c-50d0c4cb145d","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"favicon","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34793,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T00:28:59Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"06c7608d463bec990dcfb4724d446e0dbb1bd5f4","skill_md_path":"skills/favicon/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/favicon"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"favicon","description":"Generate favicons from a source image"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/favicon"},"updatedAt":"2026-04-24T00:50:55.746Z"}}