Favicon Creator Pro

Help Documentation

← Back to Home

Help Documentation

Complete Guide to Favicon Creator Pro v3.0

Learn how to create professional favicons for your website

Getting Started

What is a Favicon?

A favicon (short for "favorite icon") is the small icon that appears in:

  • Browser tabs next to your website's name
  • Bookmarks
  • Mobile home screens when you save a website
  • Search engine results

Example: When you visit Google.com, you see the colorful "G" icon in your browser tab. That's a favicon!

How Favicon Creator Pro Works

This app offers 6 different ways to create favicons:

  1. Upload: Use your existing logo or image
  2. Text: Create from letters or words
  3. Emoji: Use any emoji character
  4. Icon: Choose from built-in icon library
  5. URL: Load an image from a web address
  6. Batch: Process multiple images at once

🔒 Your Privacy is Protected

100% client-side processing: All image processing happens in your browser. Your images are never uploaded to any server. This app works entirely offline!

6 Input Methods

Choose the method that works best for you. All methods produce the same high-quality output.

1. Upload Image (Recommended)

Best for: Existing logos, photos, or custom graphics

How to use:

  1. Click the "Upload" tab (default)
  2. Drag and drop your image onto the upload area, OR
  3. Click "Browse Files" to select from your computer
  4. Your image preview will appear instantly

Supported formats: PNG, JPG, WebP, SVG
Recommended size: 512×512 pixels or larger
Max file size: 5MB

Tip: PNG files with transparent backgrounds work best!

2. Text Method

Best for: Simple letter-based favicons (like "A" for Acme Corp)

How to use:

  1. Click the "Text" tab
  2. Type 1-3 characters in the text box
  3. Choose a font family (8 professional fonts available)
  4. Select font weight (Light to Black)
  5. Pick a text color and background color
  6. Click "Generate from Text"

Tip: Keep it short! 1-2 characters look best at small sizes.

3. Emoji Method

Best for: Fun, playful favicons using emoji characters

How to use:

  1. Click the "Emoji" tab
  2. Browse through emoji categories
  3. Click any emoji to select it
  4. Adjust size using the slider (50% to 100%)
  5. Fine-tune position with horizontal and vertical offset sliders
  6. Choose background color
  7. Click "Generate from Emoji"

Note: Emoji appearance varies by device/browser

4. Icon Library

Best for: Professional icons from curated library

How to use:

  1. Click the "Icon" tab
  2. Browse categories or use search
  3. Select rendering mode:
    • Outline: Hollow/stroke icons
    • Filled: Solid icons (when available)
  4. Click an icon to select it
  5. Choose icon color and background color
  6. Click "Generate from Icon"

Tip: Not all icons support both modes!

5. URL Method

Best for: Loading images from the web

How to use:

  1. Click the "URL" tab
  2. Paste an image URL (must start with http:// or https://)
  3. Click "Load from URL"
  4. Wait for the image to load

⚠ī¸ CORS Warning: Some websites block external access to their images. If you see a CORS error, download the image and use the Upload method instead.

6. Batch Processing

Best for: Processing multiple images at once

How to use:

  1. Click the "Batch" tab
  2. Drag and drop multiple image files at once
  3. Review the file list with status indicators
  4. Configure settings (applies to all images)
  5. Click "Process All"
  6. Track progress as each image is processed
  7. Download a single ZIP containing all favicon sets

Output: One ZIP file with folders for each image

Image Editor

After uploading or creating an image, you can edit it before generating favicons!

Opening the Editor

  • Click the "Edit Image" button (appears after you have an image loaded)
  • Or press Ctrl+E (Windows) or Cmd+E (Mac)

1. CROP Tab - Trim Your Image

What it does: Cut your image to the exact area you want

How to use:

  1. Click the "Crop" tab
  2. You'll see a blue rectangle overlay on your image
  3. Resize the crop: Drag the 8 handles (small squares) on corners and edges
  4. Move the crop: Click and drag the center of the rectangle
  5. Choose aspect ratio:
    • Free: Any shape you want
    • 1:1 (Square): Perfect square - recommended for favicons!
    • 16:9, 4:3, 3:2, 9:16: Standard photo/video ratios
  6. Toggle Show Grid checkbox for alignment help
  7. Click "Apply Crop" to keep changes
  8. Click "Reset Crop" to start over

⚠ī¸ Crop Protection System:

When you adjust the crop, the app protects your work:

  • ⚠ī¸ The "Apply Crop" button pulses to remind you to save
  • đŸšĢ Other tabs are dimmed - you can't switch tabs
  • đŸšĢ "Apply & Continue" button is disabled
  • ✅ You must click "Apply Crop" or "Reset Crop" before continuing

Why? This prevents accidentally losing your carefully positioned crop!

Tip: For favicons, always use 1:1 (Square) aspect ratio!

2. ADJUST Tab - Fix Colors & Brightness

What it does: Make your image brighter, more colorful, or adjust contrast

Six sliders available:

1. Brightness (-100 to +100)

Makes image lighter or darker. Example: +30 for a lighter look

2. Contrast (-100 to +100)

Makes darks darker and lights lighter. Example: +20 for more "pop"

3. Saturation (-100 to +100)

Color intensity. -100 = black & white, +50 = vibrant colors

4. Hue Rotation (0-360°)

Changes all colors. 180° turns blue to orange, red to cyan

5. Exposure (-100 to +100)

Similar to brightness but affects midtones differently

6. Vibrance (-100 to +100)

Like saturation but smarter (doesn't oversaturate vivid colors)

Tip: Make small changes! Usually Âą20 is enough.

3. TRANSFORM Tab - Rotate & Flip

What it does: Change the orientation of your image

Rotate:

  • Click "Rotate Left" (â†ē) to turn 90° counter-clockwise
  • Click "Rotate Right" (â†ģ) to turn 90° clockwise
  • Each click rotates another 90°

Flip:

  • Click "Flip Horizontal" (↔) to mirror left-right
  • Click "Flip Vertical" (↕) to mirror top-bottom
  • Click again to flip back

Note: Changes apply immediately - no "Apply" button needed!

4. FILTERS Tab - One-Click Effects

What it does: Apply instant professional effects

1. Grayscale - Black & white

Classic, timeless look

2. Sepia - Vintage brown tone

Old photograph effect

3. Invert - Reverse colors

Creates striking effects

4. Sharpen - Crisp edges

Good for blurry images

5. Blur - Soften image

Dreamy effect

6. Vintage - Old film look

Faded with warm tones

7. High Contrast - Bold B&W

Graphic look

8. Auto-Enhance - Auto fix

Good starting point!

Tip: Try "Auto-Enhance" first, then fine-tune with Adjust tab!

5. BACKGROUND Tab - Change Background

What it does: Replace or modify the background behind your image

⚠ī¸ Important Note: Backgrounds work best with images that have transparent areas. If your image has a solid background, it will cover the applied background.

Background types available:

  1. Transparent: No background (see-through)
  2. Solid Color: One color
  3. Gradient: Two colors blending (Horizontal, Vertical, Diagonal, Radial)
  4. Pattern: Repeating design (Dots, Stripes, Grid)

✅ You can change backgrounds as many times as you want!

Apply Red → Don't like it? Change to Blue → Click "Apply Background" again. Each new background replaces the previous one. No need to reset!

The Editor Always Opens Fresh! 🆕

Every time you open the Image Editor, it starts with a completely clean slate:

  • ✅ All sliders at 0 (no adjustments)
  • ✅ No filters selected
  • ✅ No rotation or flips
  • ✅ Background Type set to "Transparent"
  • ✅ Crop tab is active
  • ✅ All previous session settings are cleared

Why? This prevents confusion from previous edits carrying over!

Editor Buttons Explained

"Reset All Changes" (left side, gray)

Undoes ALL edits back to original image. Use when starting over.

"Cancel" (bottom right, gray)

Closes editor WITHOUT saving. Previous image remains.

"Apply & Continue" (bottom right, green)

Saves ALL edits and closes editor. Use when you're happy!

Advanced Settings

Click "Advanced Options" to reveal powerful customization settings.

Background Settings

Background Transparency

Toggle ON for see-through background (recommended). OFF for solid color.

Background Color (when transparency is OFF)

White: Clean & professional. Black: Bold & modern. Your brand color: Match your website.

Tip: iOS favicons look best with solid white backgrounds. Android works great with transparent!

Padding

What it does: Adds space around your logo inside the favicon

Slider: 0% to 30%

0%: Logo fills entire space

10%: Small breathing room (recommended)

20%: Generous space

30%: Logo appears smaller with lots of space

Border Radius

What it does: Rounds the corners of your favicon

Slider: 0% to 50%

0%: Sharp, square corners

10-15%: Slightly rounded (subtle, modern)

22%: iOS icon style (recommended for Apple)

50%: Perfect circle

Warning: High values (over 30%) may cut off parts of your logo at the corners.

Image Quality

What it does: Controls file size vs. image quality

Slider: 50% to 100%

95%: Best quality (default, recommended)

85%: Good quality, smaller files

70%: Noticeable quality loss (not recommended)

50%: Very compressed (only if file size critical)

Format Selection

What it does: Choose which favicon sizes to generate

  • ☑ Android 512×512 - Large Android icon
  • ☑ Android 192×192 - Standard Android icon
  • ☑ Apple Touch 180×180 - iOS home screen
  • ☑ Favicon 32×32 - Standard browser tab
  • ☑ Favicon 16×16 - Small browser tab
  • ☑ Favicon ICO - Legacy format

Default: All formats checked (recommended)

PWA Manifest Customization

A PWA manifest file makes your website installable on mobile devices and desktops, like a native app!

What you'll customize:

8 important settings that define how your web app appears when installed.

1. Application Name (full name)

The complete name of your app. Appears in app stores, installation prompts.

Example: "My Awesome Portfolio"

2. Short Name (abbreviated)

Shortened version for limited space. Appears on home screen icon label.

Example: "Portfolio" (max 12 characters recommended)

3. Description

Brief explanation of what your app does.

Example: "Professional portfolio showcasing web development projects"

4. Start URL (opening page)

The page users see when they open your installed app.

💡 Special Feature - UTM Tracking:

You can add UTM parameters to track PWA installations!

/?utm_source=pwa&utm_medium=homescreen

Know how many users installed your PWA and track mobile vs desktop installations!

5. Theme Color (brand color)

Primary color for your app. Appears in address bar, taskbar, splash screen.

Default: #6366f1 (indigo blue)

6. Display Mode (how it opens)

Options:

  • standalone: Looks like a native app - Recommended!
  • fullscreen: Full screen, hides everything
  • minimal-ui: Minimal browser controls
  • browser: Opens in normal browser

7. Orientation (screen direction)

Options:

  • any: Adapts to phone rotation - Recommended!
  • portrait: Always vertical (like Instagram)
  • landscape: Always horizontal (like games)

8. Categories (app classification)

Keywords describing your app type. Used by app stores for categorization.

Examples: "business, productivity" or "education, reference"

Why Customize These?

  • ✅ Professional appearance when users install your site
  • ✅ Better branding and user experience
  • ✅ Track PWA installations with analytics
  • ✅ Helps app stores categorize your app correctly
  • ✅ Makes your website feel like a native app

Generating Your Favicons

The Generate Button

  1. Click the big "Generate Favicons" button
    • Or press Enter key when image is loaded
    • Or press Ctrl+G (Windows) / Cmd+G (Mac)
  2. Processing happens:
    • You'll see a progress bar
    • Each favicon size is generated one by one
    • Takes 2-5 seconds depending on your computer
    • You can click "Cancel" to stop
  3. Generation complete:
    • 🎉 Confetti animation (celebration!)
    • All favicon previews appear below
    • Quality score is calculated
    • Platform previews show how it looks

After Generation: What You'll See

1. Success Message

Green notification: "Favicons generated successfully!"

2. Generated Previews

6 preview cards showing each size with file size and individual download button

3. Download Options

"Download All as ZIP" or individual downloads

4. Additional Information

HTML code, quality score, platform previews

Regenerate with Different Settings

Want to try different settings?

  1. Click "Regenerate" button (appears after generation)
  2. Or press Ctrl+G again
  3. The same image is reprocessed with new settings

Perfect for: Testing different padding amounts, trying rounded vs. square corners, comparing transparent vs. colored backgrounds

Professional Features

Advanced features to work faster and more professionally.

Export Presets (Quick Settings)

Pre-configured settings optimized for different platforms

1. iOS Optimized

White background, 22% border radius, 10% padding

2. Android Optimized

Transparent background, Material Design, 15% padding

3. Web Standard

Balanced settings, works great on all browsers

4. High Contrast

Black background, maximum contrast, accessibility-focused

Brand Kits (Save Your Settings)

What it is: Save your color schemes and settings to reuse later

How to save a brand kit:

  1. Set up your perfect settings
  2. Scroll to "Brand Kits" section (in Advanced Options)
  3. Click "Save Current Settings as Brand Kit"
  4. Enter a name (e.g., "Company Blue Theme")

Benefits:

  • Consistent branding across multiple projects
  • Save time on repeated projects
  • Perfect for agencies managing multiple clients

Undo & Redo (History)

What it does: Go back to previous settings if you make a mistake

How to use:

  • Undo: Press Ctrl+Z (Windows) or Cmd+Z (Mac)
  • Redo: Press Ctrl+Y (Windows) or Cmd+Y (Mac)
  • Last 20 changes are remembered

What gets tracked:

All setting changes (padding, radius, colors, quality), background changes, format selections

Keyboard Shortcuts

Speed up your workflow with keyboard shortcuts!

Shortcut Action When to Use
Ctrl+S / Cmd+S Download or Generate Quick save after generation
Ctrl+G / Cmd+G Generate Favicons Faster than clicking button
Ctrl+E / Cmd+E Open Image Editor Quick edit access
Ctrl+Z / Cmd+Z Undo Made a mistake with settings
Ctrl+Y / Cmd+Y Redo Want to restore what you undid
Ctrl+V / Cmd+V Paste Image Paste from clipboard
Enter Generate or Confirm When image is loaded or in modals
Esc Close / Cancel Close any modal or dismiss toasts
D Toggle Dark Mode Switch between light/dark theme
O Toggle Advanced Options Show/hide advanced settings
? Show Help See all shortcuts and tips

Mac users: Replace Ctrl with Cmd (Command key)

Single keys (D, O, ?) work when not typing in a text field

Tips & Best Practices

Creating Great Favicons

1. Start with Quality

  • ✅ Use images at least 512×512 pixels
  • ✅ Use PNG files with transparent backgrounds
  • ✅ Ensure your logo is centered

2. Keep It Simple

  • ✅ Simple designs work better at small sizes
  • ✅ Avoid fine details that disappear at 16×16
  • ✅ Use bold shapes and clear symbols

3. Use Contrasting Colors

  • ✅ High contrast between logo and background
  • ✅ Test both light and dark backgrounds
  • ⚠ī¸ Avoid low-contrast combinations

4. Consider All Platforms

  • ✅ Check all platform previews
  • ✅ Make sure it's recognizable at 16×16
  • ✅ Test on both light and dark themes

5. Add Appropriate Padding

  • ✅ 10-15% padding for most logos
  • ✅ More padding for complex logos
  • ✅ Less padding for circular logos

6. Use Rounded Corners Wisely

  • ✅ 22% for iOS-style icons
  • ✅ 10-15% for subtle modern look
  • ⚠ī¸ Over 30% may cut off logo corners

Quick Workflow for First-Time Users

  1. Upload your logo (drag and drop)
  2. Click "Edit Image" if needed (crop to square)
  3. Set padding to 10-15%
  4. Click "Generate Favicons"
  5. Check quality score (aim for 80+)
  6. Download ZIP
  7. Copy HTML code
  8. Upload files to your website

Testing Your Favicons

After downloading:

  1. Extract the ZIP file
  2. Look at each file to ensure quality
  3. Check the ICO file specifically (works in older browsers)
  4. Upload to your website
  5. Clear browser cache
  6. Visit your website to see the favicon
  7. Check on mobile (save to home screen)

Browser cache: Sometimes browsers cache old favicons. Clear cache to see new one!

Quick Start Checklist

  • ✅ Upload or create an image
  • ✅ Edit if needed (crop to square)
  • ✅ Set advanced settings
  • ✅ Generate favicons
  • ✅ Check quality score (aim for 80+)
  • ✅ Review platform previews
  • ✅ Download ZIP file
  • ✅ Copy HTML code
  • ✅ Upload files to your website
  • ✅ Paste HTML in <head> section
  • ✅ Test on your website
  • ✅ Test on mobile devices

Enjoy creating beautiful favicons!

Need more help? Check out our FAQ page