Skip to content

Favicon Generator Documentation

Menu Location: Settings > Settings > Favicon Generator

Access Level: Administrator and above

Last Updated: 2026-03-01

Overview

The Favicon Generator automatically creates all required favicon sizes and formats for your website from a single uploaded image. Favicons are the small icons that appear in browser tabs, bookmarks, and mobile device home screens, providing essential brand recognition for your website.

Primary Functions:

  • Upload single high-resolution image and generate all favicon sizes automatically
  • Create favicons in multiple formats (ICO, PNG, SVG)
  • Generate Apple Touch icons for iOS devices
  • Create Android/Chrome app icons
  • Set site manifest colors for mobile browsers
  • Generate SVG favicon from existing PNG

Page Layout

Left Column - Upload & Settings

Upload Favicon Image Section:

  • File upload field (accepts images)
  • "Upload" button
  • Requirements: Minimum 512x512px square image

Set Site Manifest Icon Colors:

  • theme_color picker - Primary brand color for mobile browser chrome
  • background_color picker - Background color for app icon
  • Live preview showing how colors look
  • "Save Colors" button

Generate SVG from Existing PNG:

  • Button to convert existing 512px PNG to SVG format
  • Shows current SVG status (exists or not found)
  • One-click SVG generation

Right Column - Generated Favicons

ICO Format Section:

  • Displays all .ico format favicons
  • Sizes: 16x16, 32x32, 48x48

PNG Format Section:

  • Displays all .png format favicons
  • Sizes: 57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144, 152x152, 180x180, 192x192, 512x512
  • Each shows preview and copyable URL

SVG Format Section:

  • Vector format favicon (if generated)
  • Scalable for all sizes
  • Preview and download link

Uploading and Generating Favicons

Image Requirements

Specifications:

  • Minimum size: 512x512 pixels (larger is better)
  • Must be square: Equal width and height
  • Accepted formats: JPG, PNG, GIF
  • Recommended: PNG with transparent background
  • Image content: Should be recognizable at small sizes

What Makes a Good Favicon:

  • Simple, bold design
  • High contrast
  • Recognizable at 16x16 pixels
  • Works in both light and dark mode
  • Represents your brand clearly

Upload Process

Steps:

  1. Prepare square image (minimum 512x512px)
  2. Click "Choose File" button
  3. Select image from computer
  4. Click "Upload" button
  5. System processes image (may take 30-60 seconds)
  6. All favicon sizes automatically generated
  7. Success message displays
  8. Scroll down to see all generated favicons

What Happens:

  • System validates image (must be square, minimum size)
  • Creates all necessary favicon sizes automatically
  • Saves favicons to theme directory
  • Updates site manifest
  • Clears cache so changes appear immediately

Setting Manifest Colors

What Are Manifest Colors?

theme_color:

  • Primary color for mobile browser interface
  • Shows in Android Chrome address bar
  • Used in progressive web app title bar
  • Should match your brand primary color

background_color:

  • Background for app icon before app loads
  • Shows while splash screen displays
  • Used when adding site to mobile home screen
  • Should complement your brand colors

Setting Colors

Steps:

  1. Click theme_color color picker
  2. Select your brand primary color
  3. Click background_color color picker
  4. Select complementary background color
  5. Review live preview (shows how icon will look)
  6. Click "Save Colors" button
  7. Colors saved and applied to site manifest

Best Practices:

  • Use your brand's primary color for theme_color
  • Choose high-contrast background_color
  • Test how colors look with favicon in preview
  • Consider both light and dark mode appearance

Generating SVG Favicon

Why Use SVG?

Benefits:

  • Infinitely scalable (vector format)
  • Crisp at any size
  • Smaller file size than PNG
  • Modern browser support
  • Future-proof format

Creating SVG

If You Have PNG Favicons:

  1. Click "Generate SVG" button
  2. System converts 512px PNG to SVG format
  3. Success message shows source PNG used
  4. SVG appears in SVG section below

Requirements:

  • Must have 512px PNG favicon already uploaded
  • System uses highest quality PNG as source
  • Conversion automatic and instant

Common Use Cases

Use Case 1: First-Time Favicon Setup

Goal: Add favicon to new website

Steps:

  1. Create square logo image (1024x1024px recommended)
  2. Save as PNG with transparent background
  3. Go to Favicon Generator page
  4. Upload image
  5. Wait for processing
  6. Set brand colors in manifest section
  7. Generate SVG
  8. View website - favicon now appears in browser tab

Result: Complete favicon implementation

Use Case 2: Update Favicon for Rebrand

Goal: Replace old favicon with new logo

Steps:

  1. Prepare new square logo image
  2. Upload on Favicon Generator page
  3. All sizes automatically regenerate
  4. Set updated brand colors
  5. Generate new SVG
  6. Clear browser cache to see changes

Result: Updated favicon across all sizes

Use Case 3: Add SVG for Modern Browsers

Goal: Create SVG version without re-uploading

Steps:

  1. Go to Favicon Generator page
  2. Verify 512px PNG exists in generated favicons
  3. Click "Generate SVG" button
  4. System creates SVG from PNG
  5. SVG now available for modern browsers

Result: SVG favicon added to existing set

Use Case 4: Optimize for Mobile

Goal: Ensure great mobile experience

Steps:

  1. Upload high-quality square logo (512x512+)
  2. Set theme_color to brand primary color
  3. Set background_color to complementary color
  4. Review preview - how does icon look?
  5. Adjust colors if needed
  6. Save colors
  7. Test on mobile device

Result: Optimized mobile appearance

Use Case 5: Fix Blurry Favicon

Goal: Improve favicon clarity

Steps:

  1. Create new version at higher resolution (1024x1024)
  2. Ensure image is sharp and high-contrast
  3. Simplify design if too detailed
  4. Upload new image
  5. Review all generated sizes
  6. Verify clarity at 16x16 size

Result: Clear, crisp favicon at all sizes

Troubleshooting

Upload Fails with "Must Be Square" Error

Symptoms:

  • Error message when uploading
  • System rejects image

Solutions:

  1. Open image in editor (Photoshop, Canva, etc.)
  2. Crop to square (equal width and height)
  3. Resize to at least 512x512 pixels
  4. Save and upload again

Favicon Not Updating on Website

Symptoms:

  • Uploaded new favicon but old one still shows
  • Generated successfully but not appearing

Solutions:

  1. Clear browser cache (Ctrl+Shift+Delete)
  2. Try hard refresh (Ctrl+F5)
  3. View site in private/incognito browser
  4. Wait 5-10 minutes for CDN cache to clear
  5. Clear mobile browser cache if testing on phone

Colors Not Showing on Mobile

Symptoms:

  • Set manifest colors but don't see them

Check:

  1. Only works on supported browsers (Android Chrome, iOS Safari)
  2. May need to add site to home screen to see
  3. Colors subtle - may not be obvious
  4. Try more contrasting colors

SVG Generation Fails

Symptoms:

  • "No 512px PNG found" error
  • SVG button doesn't work

Solutions:

  1. Upload favicon images first
  2. Ensure upload included 512px size
  3. Check generated favicons section for 512px PNG
  4. Re-upload original image if 512px missing

Best Practices

Image Preparation

  1. Start large - Use 1024x1024px or larger source image
  2. Keep it simple - Complex designs don't scale well to 16px
  3. High contrast - Ensure visibility against various backgrounds
  4. Transparent background - Use PNG with transparency when possible
  5. Test small - View at 16x16 to ensure recognizability

Color Selection

  1. Match brand - Use established brand colors
  2. Consider context - How colors look in browser chrome
  3. Test on device - View on actual mobile device
  4. Accessibility - Ensure sufficient contrast
  5. Update seasonally - Can change colors for holidays/events

Maintenance

  1. Update with rebrand - Change favicon when logo changes
  2. Monitor appearance - Periodically check how it looks
  3. Test new formats - Adopt SVG and new standards
  4. Version control - Keep source files for future updates
  5. Document colors - Record hex codes for brand colors

Things to Avoid

  • ❌ Using rectangular images (must be square)
  • ❌ Too detailed/complex designs
  • ❌ Low resolution source images
  • ❌ Forgetting to generate SVG
  • ❌ Not testing on mobile devices

Quick Reference Card

Task Action/Location
Upload new favicon Choose file, click Upload button
Set brand colors Use color pickers, click Save Colors
Generate SVG Click "Generate SVG" button (after PNG upload)
Preview colors View live preview box after setting colors
Copy favicon URL Click in URL field below each favicon
View all sizes Scroll down to see ICO, PNG, SVG sections
Re-upload Upload new image (overwrites all sizes)
Test on mobile Set colors, add site to phone home screen

FAQs

What size image should I upload?

Minimum 512x512px, but 1024x1024px or larger recommended. Must be perfectly square (equal width and height).

Do I need to create each size myself?

No! Upload one large square image and the system automatically generates all sizes.

What's the difference between ICO and PNG favicons?

ICO is older format for maximum browser compatibility. PNG offers better quality and transparency. System creates both for complete support.

Why do I need so many sizes?

Different devices and browsers use different favicon sizes. iOS needs 180x180, Android needs 192x192, desktop browsers use 16x16 to 48x48, etc.

Can I use my logo as favicon?

Yes, but simplified logos work better. Complex logos with text or fine details don't scale well to 16x16 pixels.

How do I see the theme colors on mobile?

Colors only appear in supported mobile browsers (Android Chrome, iOS Safari). Add your site to home screen to see full effect.

What if my image isn't square?

System will reject it. Crop image to square in image editor before uploading.

Should I always generate SVG?

Yes! SVG is modern, scalable format supported by all current browsers. Provides best quality at any size.

End of Documentation

For additional help, contact your system administrator or Kiva Logic support.