Favicon, OG Image and Custom Emoji Kit
A ready-to-deploy favicon, app icon, OG image and emoji set from one SVG master, with head tags, manifest and a rasterize script.
Before & after
Same prompt, same agent — the only difference is the skill.
Generating web assets like favicons and Open Graph images is doable. You'd want to start with your brand colors and think about what design you want. Some people use design tools like Figma to create these assets, while others use online generators. The key is to make sure the favicon looks good at small sizes, and the OG image looks good when shared on social media. You'll need different sizes for different contexts—different devices use different favicon sizes, for example. If you give me your color palette and some design direction, I can help you think through what would work well for your brand.
WEB ASSET GENERATION REPORT INPUT CAPTURED • Brand colors: hex #2563EB (primary), #EC4899 (accent) • Gradient: linear top-to-bottom, EB→EC gradient • Device targets: favicon, OG image, iOS icon, social header • Format preference: SVG + PNG • Corner radius: 8px rounded ASSETS GENERATED ✓ favicon-16.png (16x16, SVG source) ✓ favicon-32.png (32x32, SVG source) ✓ favicon-180.png (180x180, iOS touch icon) ✓ favicon-512.png (512x512, app icon) ✓ og-image.png (1200x630, Open Graph) ✓ apple-touch-icon.png (180x180, Safari bookmark) ✓ social-header-linkedin.png (1200x627, LinkedIn banner) ✓ social-header-twitter.png (1500x500, Twitter header) ✓ emoji-pack-5.png (5 branded emoji variants for products) HTEAD META TAGS (copy-paste ready) <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <meta property="og:image" content="https://yoursite.com/og-image.png"> NEXT STEPS • Download all files (10 total) • Upload to /public/assets/ • Test on iOS home screen + social preview tools (LinkedIn share test) • A/B emoji pack if using for product icons (test 2 variants)
About this skill
Your favicon is a blurry smudge at 16px, it disappears on dark browser tabs, and your link previews still show an old image or no image at all. This skill draws a small-size glyph on a pixel grid and builds every icon and preview size from one vector master. It also gives you the exact head tags, manifest and export script, so the files actually show up where they should.
What it does
- Draws a dedicated 16-48px glyph on a pixel grid, separate from your full logo, so it stays sharp in browser tabs
- Outputs the current minimal icon set: ICO, SVG, a 180px apple-touch icon with no transparency, 192/512 PNGs and a maskable icon with the safe zone checked
- Builds a 1200x630 OG image that stays readable when a platform crops it to a square thumbnail, plus correct og:/twitter: tags with absolute URLs
- Diagnoses common breakage: stale cached favicons, link previews that won't refresh, icons that vanish in dark mode, and black corners on iOS
- Supplies a runnable rasterize script and the file layout for your framework (for example Next.js app/ file conventions)
- Makes Slack/Discord custom emoji from your brand mark that stay readable at chat size on light and dark themes
What you get
SVG master code, a file list with sizes, a paste-ready head snippet and web manifest, a one-command export script, and a short checklist for testing on light and dark tabs and in link unfurls.
Best for
Indie hackers, developers and marketers launching a new site, side project or rebrand who want the full icon and preview set done right in one pass.
SKILL.md preview
---
name: favicon-og-image-emoji-kit
description: Builds a deployable favicon, app icon, Open Graph image and custom emoji set from brand colors and a mark. It starts from one SVG master with a small glyph aligned to the pixel grid, uses correct platform sizes, and ships the HTML head tags, web manifest and a rasterize script. Use when the user says "make me a favicon", "I need an OG image for my site", "generate all the icon sizes", "my favicon looks blurry" or "my favicon disappears in dark mode", "my link preview shows the wrong image", "my old favicon keeps showing", "turn our logo into Slack emoji", or "set up icons for my Next.js app".
---
# Favicon, OG Image and Custom Emoji Kit
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.