FavGen — Premium Favicon Generator for VS Code

FavGen is a production-ready, feature-rich, and 100% offline favicon generator built directly inside Visual Studio Code. Quickly generate high-quality favicon packages for your web applications from Images, Text, Emojis, or SVG Icons with a sleek, interactive modern UI.

✨ Features

1. 🖼️ Image to Favicon

• Convert any standard image format (PNG, JPG, JPEG, SVG, WebP) into a complete favicon set.
• Supports transparency, background shapes, padding adjustment, and custom background colors/gradients.

2. ✍️ Text to Favicon

• Generate initials or text-based logos (up to 4 characters).
• Advanced Customizations: Font family, font weight, sizes, letter spacing, shape masking, corner radius, borders, and premium drop shadows.
• Smart auto-initials suggestion when typing application names.

3. 😀 Emoji to Favicon

• Renders high-definition emojis based on your system font engine.
• Supports solid or gradient background shapes, corner radius, and scale adjustments.

4. 🔍 SVG Icon to Favicon

• Access hundreds of Lucide Icons completely offline.
• Full-text search and preview of icons.
• Control stroke widths, colors, sizes, shapes, and background gradients.

5. 🎨 Gradient Generator

• Support solid backgrounds, linear gradients, and radial gradients.
• Customize start color, end color, and linear angles (0° to 360°).
• Randomize color button to instantly generate stunning gradient palettes.

6. 📱 Real-time Live Previews & Mockups

• View changes instantly (sub-millisecond rendering).
• Includes realistic interactive mockups:
  • Browser Tab: Shows your 16x16 favicon in a mock address bar tab.
  • iOS Home Screen: Shows your 180x180 Apple Touch Icon on a mock iPhone layout.
  • Grid View: Previews 32x32, 64x64, 192x192, and 512x512 resolutions simultaneously with a transparency checkerboard.

7. 🤖 Smart Framework & Path Detection

• Automatically scans your workspace directory for React, Next.js, Vite, Vue, Angular, Svelte, or Astro structures.
• Recommends the correct target public assets folder (e.g., public/, static/, src/assets/).
• Prompts with a clean dropdown if multiple output targets exist.

8. 📝 Auto Manifest & HTML Generator

• Generates a compliant site.webmanifest file with customizable app metadata.
• Generates a favicons.html integration guide containing copyable <link> and <meta> tags.

9. 📂 Workspace Integration

• Right-click any image in the VS Code file explorer to select "FavGen: Generate Favicons" and pre-load it.
• Full Command Palette support.
• Automatically refreshes the project explorer after generating files.
• Safe-overwrites and historical backups (saved to .favgen-backup/).
• Export as a complete ZIP package.

⚙️ Extension Settings

Configure your default generator behavior under Settings > Extensions > FavGen:

• favgen.defaultOutputFolder: The default folder name to save favicons (default: "public").
• favgen.defaultFramework: Framework mode. Set to "auto" for auto-detection.
• favgen.defaultBackground: Default background color for text/icon favicons (default: "#1e1e2e").
• favgen.defaultTextColor: Default text/icon color (default: "#ffffff").
• favgen.defaultFont: Default font family (default: "sans-serif").
• favgen.defaultRadius: Default corner radius percentage (default: 8).
• favgen.autoOverwrite: Overwrite existing favicons without asking (default: false).
• favgen.autoBackup: Backup overwritten files in .favgen-backup/ (default: true).
• favgen.generateManifest: Generate a site.webmanifest (default: true).
• favgen.generateHtml: Generate a favicons.html helper page (default: true).

🛠️ Development & Compilation

To build and run this extension locally:

1. Prerequisites

Ensure you have Node.js and npm installed.

2. Installation

Clone or open this repository, and run:

npm install

3. Compilation

Compile the TypeScript code and bundle webview assets with Webpack:

• Development Build:

  npm run compile
  

• Development Watcher:

  npm run watch
  

• Production Build (Minified):

  npm run package
  

4. Running the Extension

1. Open this project folder in VS Code.
2. Press F5 to launch a new Extension Development Host window.
3. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and run FavGen: Open Generator.

📦 Packaging & Publishing

To package the extension into a .vsix file for distribution or publishing:

1. Install vsce globally:

   npm install -g @vscode/vsce
   

2. Build the production package:

   npm run package
   

3. Package the extension:

   vsce package
   

   This will output a favgen-1.0.0.vsix file.
4. To publish to the marketplace, create a publisher profile and run:

   vsce publish
   

📜 License

This extension is licensed under the MIT License.