web-asset-generator

🥈Silver

Generates favicons, app icons, and social media images from logos, text, or emojis. Supports emoji suggestions, validation, and framework auto-integration. Benefits operations teams by automating asset creation and ensuring consistency across web properties.

302120Updated Today

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/alonw0/web-asset-generator.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Define your asset requirements. Specify the [ASSET_TYPE] (favicon, app icon, or social media image), [BRAND_NAME], and either a [LOGO_OR_TEXT_OR_EMOJI] to base the design on. Include any [STYLE_OR_COLOR_SCHEME] preferences (e.g., gradient, monochrome, or brand palette).","tip":"Use your brand’s primary color or a high-contrast palette to ensure visibility across platforms. Tools like Coolors.co can help generate palettes if you don’t have one."},{"step":"Specify the platforms and use cases. Mention [PLATFORM_OR_USE_CASE] (e.g., 'for a SaaS product landing page' or 'for a mobile app store listing'). Include required resolutions (e.g., 16x16 for favicons, 1024x1024 for app icons).","tip":"Check platform guidelines (e.g., Apple’s Human Interface Guidelines for app icons or Facebook’s Open Graph specs for social media images) to ensure compliance."},{"step":"Request validation and emoji suggestions. Ask the AI to validate the design for [RESOLUTIONS] and suggest emoji alternatives if the current design lacks contrast or memorability.","tip":"Emoji suggestions work best when the logo or text is abstract or lacks a clear symbolic representation. For example, a text-based logo like 'TechHub' could use 🏢 or 💻 as alternatives."},{"step":"Review the generated files and download links. Test the favicon.ico in multiple browsers and the social media image on platforms like LinkedIn or Twitter to ensure proper rendering.","tip":"Use browser dev tools or online validators like RealFaviconGenerator to test favicons across devices. For social media images, use Facebook’s Sharing Debugger to preview how the image will appear when shared."},{"step":"Integrate the assets into your project. Replace outdated assets in your codebase, update app store listings, or upload the new images to your CMS (e.g., WordPress, Shopify).","tip":"For frameworks like React or Next.js, place the favicon.ico in the `/public` folder and reference the social media image in your `<head>` meta tags. For static sites, use tools like Hugo or Jekyll to automate asset deployment."}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/alonw0/web-asset-generator

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a [ASSET_TYPE] for [BRAND_NAME] using the following specifications: [LOGO_OR_TEXT_OR_EMOJI]. The asset should be [STYLE_OR_COLOR_SCHEME] and optimized for [PLATFORM_OR_USE_CASE]. Include a favicon.ico file for web browsers and a square PNG for social media. Validate the design for visual clarity at [RESOLUTIONS]. Provide download links for the generated files and suggest emoji alternatives if the current design lacks contrast or memorability.

Example Output

Generated assets for **Acme Corp** using their logo (a stylized lightning bolt) and the emoji ⚡. The design features a vibrant blue (#0066FF) lightning bolt on a white background, optimized for both light and dark mode. Three files were created:

1. **favicon.ico** (16x16, 32x32, 48x48, 64x64) – Compatible with all major browsers and desktop shortcuts. The smallest size (16x16) was tested in Chrome, Firefox, and Safari, ensuring clarity even at low resolution.
2. **app_icon.png** (1024x1024) – High-resolution icon for app stores, featuring a subtle drop shadow for depth. The design maintains the brand’s lightning bolt motif while ensuring scalability.
3. **social_media.png** (1200x630) – Optimized for LinkedIn, Twitter, and Facebook. The lightning bolt is centered with ample white space to avoid cropping issues on mobile devices.

**Validation Notes:**
- Contrast ratio between the blue (#0066FF) and white background is 8.59:1 (WCAG AA compliant for normal text).
- The emoji alternative ⚡ was tested and retained due to its strong association with speed and energy, aligning with Acme Corp’s branding.

**Download Links:**
- [favicon.ico](https://example.com/acme-favicon.ico)
- [app_icon.png](https://example.com/acme-app-icon.png)
- [social_media.png](https://example.com/acme-social-media.png)

**Recommendations:**
- For dark mode, consider a slight glow effect around the lightning bolt to improve visibility on dark backgrounds.
- Test the favicon.ico in Safari’s private browsing mode to ensure it renders correctly in all contexts.