Back to marketplace

Web Asset Generator (Favicon, OG, Emoji)

Produce favicons, Open Graph images, and custom emoji from a URL plus brand color inputs.

Designp4
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Generate favicon, OG image, and social assets for my new site”
Beforegeneric AI agent
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.
Afterwith Web Asset Generator (Favicon, OG, Emoji)
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

name: web-asset-generator-favicon-og description: Produce favicons, Open Graph images, and custom emoji from a URL plus brand color inputs. Use when working on web asset generator.

Web Asset Generator (Favicon, OG, Emoji)

Interviews for hex colors, gradient preference, and device targets, then emits SVG or PNG assets sized for real-world uses (favicon, OG, iOS icon, social header). Iterates conversationally to tweak details like gradient direction or corner radius. Use every time you spin up a new domain or micro-site.

What you get

  • Favicon set (16, 32, 180, 512)
  • OG image (1200x630)
  • Branded emoji pack
  • Matching device icons
  • Apple touch icon
  • Social header (LinkedIn, Twitter)

Customize your output

  • Hex colors: palette
  • Gradient direction: linear top-bottom, radial, angular, off
  • Assets needed: favicon, OG, emoji, all
  • Sizes: default, custom list
  • File format: SVG, PNG, both
  • Rounded corners: on, off

Example output

'A pink-to-purple gradient SVG favicon plus matching OG image and 5 emoji for a personal site.'

Best for

Indie hackers, marketers launching micro-sites.

Note: High confidence. Kills the annoying favicon-only task.

SKILL.md preview

SKILL.md
---
name: web-asset-generator-favicon-og
description: Use this skill when producing favicons, Open Graph images, or custom emoji from a URL and brand color inputs for a new site or micro-site.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - p4
---

# Web Asset Generator (Favicon, OG, Emoji)

Interviews for brand colors and device targets, then produces a coordinated set of favicon, Open Graph, and icon assets sized correctly for real deployment.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill