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

Open this project folder in VS Code.
Press F5 to launch a new Extension Development Host window.
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:

Install vsce globally:
```
npm install -g @vscode/vsce
```
Build the production package:
```
npm run package
```
Package the extension:
```
vsce package
```
This will output a favgen-1.0.0.vsix file.
To publish to the marketplace, create a publisher profile and run:
```
vsce publish
```

📜 License

This extension is licensed under the MIT License.

FavGen