CreatorFormat
    CreatorFormat
    HomeBatch ToolsBlog
    ⌘K
    Back to Blog
    guides•
    Jan 25, 2025
    •
    15 min read

    How to Create a Favicon for Your Website: Complete Guide (2025)

    By CreatorFormat Team

    TL;DR: Create a complete favicon package using our free Favicon Generator. Upload any image (PNG, JPG, or SVG), and get all favicon formats: ICO (48x48), PNG favicons (16/32/48px), Apple Touch icon (180px), Android Chrome icons (192/512px), web manifest, and ready-to-use HTML code.

    That small icon in your browser tab? It's called a favicon (favorite icon), and every professional website needs one. A favicon builds brand recognition, helps users identify your site among many open tabs, and appears in bookmarks, history, and search results.

    This complete guide teaches you exactly how to create favicons for your website, including all required sizes, formats, and installation methods.

    What is a Favicon?

    A favicon is a small icon associated with your website. It appears in:

    • Browser tabs - Helps users identify your site among multiple tabs
    • Bookmarks bar - Shows next to saved bookmarks
    • Browser history - Identifies sites in browsing history
    • Address bar - Displays next to the URL
    • Search results - Google shows favicons in mobile search results
    • Home screen - When users add your site to their phone's home screen

    Why Favicons Matter

    Brand Recognition: Your favicon is often the first visual element users see. A distinctive icon helps your site stand out.

    User Experience: With dozens of tabs open, users rely on favicons to quickly find your site. Without one, you're just a generic page icon.

    SEO Impact: Google displays favicons in mobile search results. A missing or poor favicon can reduce click-through rates.

    Professionalism: A missing favicon signals an unfinished or unprofessional website. It's a small detail that matters.

    Favicon Sizes and Formats Explained

    Modern websites need multiple favicon files for different devices and contexts:

    Essential Favicon Files

    FileSizePurpose
    favicon.ico48x48Classic favicon for all browsers
    favicon-16x16.png16×16Browser tabs (standard displays)
    favicon-32x32.png32×32Browser tabs (retina displays)
    favicon-48x48.png48×48Windows site icon
    apple-touch-icon.png180×180iPhone/iPad home screen
    android-chrome-192x192.png192×192Android home screen
    android-chrome-512x512.png512×512Android splash screen

    ICO vs PNG: Which Format?

    ICO Format:

    • Traditional favicon format since the 1990s
    • Supported by all browsers including ancient IE versions
    • Can contain multiple sizes in one file
    • Required for maximum compatibility

    PNG Format:

    • Modern format with better compression
    • Supports full alpha transparency
    • Cleaner rendering on high-DPI displays
    • Required for Apple and Android devices

    Best Practice: Use both! Our Favicon Generator creates a complete package with ICO and all PNG sizes.

    Method 1: Create Favicon Using Our Free Generator (Recommended)

    The easiest way to create a complete favicon package:

    Step-by-Step Guide

    1. Prepare Your Image

      • Use a square image (1:1 aspect ratio)
      • Minimum 512×512 pixels for best quality
      • PNG with transparency works best for logos
      • Simple designs work better at small sizes

    2. Generate Favicon Package

      • Visit our Image to ICO Converter
      • Upload your logo or icon image
      • Click "Generate Favicons"
      • Download the ZIP file

    3. What You Get

      • favicon.ico (48×48) - Main favicon
      • favicon-16x16.png - Small browser tab icon
      • favicon-32x32.png - Retina browser tab icon
      • favicon-48x48.png - Windows icon
      • apple-touch-icon.png (180×180) - iOS home screen
      • android-chrome-192x192.png - Android icon
      • android-chrome-512x512.png - Android splash
      • site.webmanifest - PWA manifest file
      • favicon-html.txt - Ready-to-use HTML code

    4. Install on Your Website

      • Extract the ZIP file
      • Upload all files to your website root folder
      • Copy the HTML from favicon-html.txt into your <head> section

    HTML Code to Add

    <link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

    Why This Method is Best:

    • Creates ALL required favicon formats in one click
    • Generates proper ICO with correct binary format
    • Includes Apple Touch icon for iOS devices
    • Includes Android icons for PWA support
    • Provides web manifest for Progressive Web Apps
    • 100% browser-based - your images stay private

    Method 2: Create Favicon from SVG

    If you have a vector logo in SVG format, convert it first:

    Step-by-Step Guide

    1. Convert SVG to PNG

      • Visit our SVG to PNG Converter
      • Upload your SVG logo
      • Download the PNG version

    2. Generate Favicon Package

      • Take the PNG to our Favicon Generator
      • Upload and generate all favicon sizes
      • Download and install

    Why Start with SVG?

    • Vector graphics scale perfectly to any size
    • No quality loss when resizing
    • Best results for crisp, clean favicons

    Method 3: Create Favicon in Photoshop/GIMP

    For complete creative control:

    Using Photoshop

    1. Create New Document

      • File → New
      • Size: 512×512 pixels
      • Resolution: 72 PPI
      • Background: Transparent

    2. Design Your Icon

      • Keep it simple - details get lost at 16×16
      • Use bold shapes and colors
      • Avoid thin lines and small text
      • Test visibility against different backgrounds

    3. Export PNG

      • File → Export → Export As
      • Format: PNG
      • Save as favicon-source.png

    4. Generate All Sizes

      • Use our Favicon Generator to create all required sizes
      • Or manually export each size (tedious and error-prone)

    Using GIMP (Free)

    1. Create New Image

      • File → New
      • Width/Height: 512×512 pixels
      • Fill: Transparency

    2. Design Your Icon

      • Use simple shapes from toolbox
      • Keep text large and readable
      • Test at small sizes frequently

    3. Export PNG

      • File → Export As
      • Choose PNG format
      • Name: favicon-source.png

    4. Generate Favicon Package

      • Upload to our Favicon Generator
      • Download complete package

    Method 4: Create Favicon from Existing Logo

    Already have a logo? Here's how to turn it into a favicon:

    Preparing Your Logo

    If logo is horizontal/wide:

    • Crop to just the icon/symbol portion
    • Or use your brand's first letter
    • Square logos work best

    If logo has fine details:

    • Simplify for small sizes
    • Remove taglines and small text
    • Keep only the most recognizable element

    If logo is complex:

    • Create a simplified "icon" version
    • Many brands have separate logomarks (Nike swoosh, Apple apple)

    Optimal Source Image Settings

    PropertyRecommendation
    Dimensions512×512 pixels minimum
    FormatPNG with transparency
    Color modeRGB
    BackgroundTransparent
    File sizeUnder 5MB

    Convert and Generate

    1. Resize if needed

      • Use our Image Resizer to make it square
      • 512×512 or larger for best results

    2. Convert format if needed

      • JPG to PNG - if you need transparency
      • WebP to PNG - for WebP logos
      • SVG to PNG - for vector logos

    3. Generate Favicons

      • Upload to Favicon Generator
      • Download complete package

    Installing Your Favicon

    Standard Website (HTML)

    Place files in your website root folder and add to <head>:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Your Website</title>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
</head>
<body>
    <!-- Your content -->
</body>
</html>

    WordPress

    Method 1: WordPress Customizer (Easiest)

    1. Go to Appearance → Customize
    2. Click "Site Identity"
    3. Click "Select site icon"
    4. Upload your 512×512 PNG
    5. WordPress automatically generates all sizes

    Method 2: Manual Upload

    1. Upload favicon files via FTP to root folder
    2. Add HTML to header.php in your theme
    3. Or use a plugin like "Favicon by RealFaviconGenerator"

    Shopify

    1. Go to Online Store → Themes
    2. Click "Customize"
    3. Go to Theme Settings → Favicon
    4. Upload your favicon image
    5. Shopify handles the rest

    Squarespace

    1. Go to Design → Browser Icon
    2. Upload your image (300×300 recommended)
    3. Squarespace generates required sizes

    Wix

    1. Go to Settings → Favicon
    2. Upload your icon
    3. Wix automatically creates all versions

    Next.js / React

    Place files in /public folder:

    public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

    Add to your layout or _document.js:

    import Head from 'next/head'

export default function Layout({ children }) {
  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      {children}
    </>
  )
}

    Favicon Best Practices

    Design Tips

    ✅ Do:

    • Keep it simple - favicons are tiny (16×16 pixels)
    • Use bold, recognizable shapes
    • Test against light AND dark backgrounds
    • Use your brand colors consistently
    • Make it work in monochrome/grayscale

    ❌ Don't:

    • Include small text (unreadable at 16px)
    • Use photographs (too much detail)
    • Use thin lines (disappear at small sizes)
    • Make it too similar to common icons
    • Forget to test at actual display size

    Technical Tips

    ✅ Do:

    • Include favicon.ico for legacy browser support
    • Add Apple Touch icon for iOS home screen
    • Include Android icons for PWA support
    • Use PNG with transparency for modern browsers
    • Place favicon.ico in root directory

    ❌ Don't:

    • Use only one size (browsers need multiple)
    • Forget the web manifest file
    • Skip Apple Touch icon (iOS users exist!)
    • Use JPG for favicons (no transparency)
    • Put favicon in a subdirectory

    Testing Your Favicon

    After installation, verify it works:

    1. Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
    2. Check browser tab - favicon should appear
    3. Add to bookmarks - verify it shows
    4. Test on mobile - add to home screen
    5. Use different browsers - Chrome, Firefox, Safari, Edge
    6. Test incognito/private mode - cache-free test

    Troubleshooting Common Issues

    Favicon Not Showing

    Problem: Uploaded favicon but it doesn't appear.

    Solutions:

    1. Clear browser cache (Ctrl+Shift+Delete)
    2. Try incognito/private browsing mode
    3. Check file path - must be in root folder
    4. Verify HTML link tags are correct
    5. Check for 404 errors in browser dev tools
    6. Wait - browsers cache favicons aggressively

    Favicon Shows on Desktop but Not Mobile

    Problem: Works in Chrome but not on iPhone.

    Solutions:

    1. Add Apple Touch icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    2. Ensure apple-touch-icon.png is 180×180
    3. Clear Safari cache on iOS
    4. Try adding site to home screen to test

    Favicon Looks Blurry

    Problem: Favicon appears pixelated or fuzzy.

    Solutions:

    1. Start with higher resolution source (512×512+)
    2. Ensure PNG has no compression artifacts
    3. Generate fresh using our Favicon Generator
    4. Check you're using 32×32 version for retina displays

    Old Favicon Still Shows

    Problem: Updated favicon but old one appears.

    Solutions:

    1. Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
    2. Clear all browser cache and cookies
    3. Try different browser
    4. Add version query string: href="/favicon.ico?v=2"
    5. Wait 24-48 hours for cache to expire

    Favicon Works Locally but Not Live

    Problem: Shows on localhost but not production.

    Solutions:

    1. Verify files uploaded to server
    2. Check file permissions (644 for files)
    3. Ensure correct paths (absolute vs relative)
    4. Check for HTTPS mixed content issues
    5. Verify web server serves .ico files correctly

    Favicon for Special Use Cases

    Dark Mode Favicon

    Modern browsers support different favicons for light/dark modes:

    <link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

    Animated Favicon

    While technically possible with GIF or APNG, avoid animated favicons:

    • Distracting to users
    • Increases CPU usage
    • Not supported everywhere
    • Generally considered bad UX

    SVG Favicon (Modern Browsers)

    Some modern browsers support SVG favicons:

    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png"> <!-- fallback -->

    Benefits: Infinitely scalable, tiny file size, supports CSS styling Drawback: Not supported in Safari or older browsers

    Complete Favicon Checklist

    Before launching your website:

    • Created favicon from high-quality source image
    • Generated all required sizes (ICO, PNG, Apple, Android)
    • Uploaded files to website root folder
    • Added HTML link tags to <head> section
    • Added web manifest file for PWA support
    • Tested in Chrome, Firefox, Safari, Edge
    • Tested on iOS (Safari) and Android (Chrome)
    • Verified favicon in browser tab
    • Tested bookmark display
    • Cleared cache and retested
    A complete favicon package needs multiple sizes: 16×16, 32×32, and 48×48 for browsers, 180×180 for Apple devices, and 192×192/512×512 for Android. Our Favicon Generator creates all sizes automatically from one image. Start with at least 512×512 source image for best quality.
    Use our free Favicon Generator at /image-to-ico. Upload any PNG, JPG, or WebP image and get a complete favicon package including ICO file, PNG favicons, Apple Touch icon, Android icons, web manifest, and HTML code. It's 100% free and runs in your browser - no signup required.
    ICO is the traditional favicon format that can contain multiple sizes in one file - required for older browsers and Windows shortcuts. PNG is a modern format with better compression and cleaner rendering. Use both: ICO for compatibility, PNG for modern browsers and mobile devices.
    Common causes: 1) Browser cache - try Ctrl+F5 to hard refresh, 2) Wrong file path - favicon should be in root folder, 3) Missing link tags in HTML head, 4) File upload failed - verify via FTP or hosting panel, 5) Permissions issue - files should be readable (644). Try incognito mode to test without cache.
    Yes! When iOS users add your site to their home screen, Safari uses the Apple Touch icon. Without it, iOS takes a screenshot of your page instead. Create an apple-touch-icon.png at 180x180 pixels and add a link tag in your HTML head section pointing to it.
    For the source image, use PNG with transparency. For the actual favicon files, you need ICO format for maximum compatibility, plus PNG files in various sizes for modern browsers and mobile devices. Our generator creates all required formats from your single PNG source.
    Technically yes, but not recommended. JPG doesn't support transparency, so your favicon will have a solid background that may clash with browser themes. Convert your JPG to PNG first using our JPG to PNG converter, then generate the favicon package.
    Go to Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 PNG image and WordPress generates all required sizes automatically. Alternatively, upload favicon files manually via FTP and add link tags to your theme's header.php file.
    Blurry favicons usually result from: 1) Low-resolution source image - start with 512×512 minimum, 2) Complex design that doesn't scale well - simplify for small sizes, 3) Using JPG with compression artifacts - use PNG instead, 4) Missing retina version - include 32×32 PNG for high-DPI displays.
    You can change it anytime, but browsers cache favicons aggressively (sometimes for weeks). To force an update: 1) Add version parameter: favicon.ico?v=2, 2) Use a new filename temporarily, 3) Ask users to clear cache. For major rebrand, the cache issue resolves naturally over time.

    Recommended Tools

    Favicon Creation

    • Image to ICO Converter - Complete favicon package generator
    • SVG to PNG Converter - Convert vector logos for favicon use
    • Image Resizer - Resize images to square format

    Image Optimization

    • PNG to WebP - Optimize images for web
    • Image Compressor - Reduce file sizes
    • JPG to PNG - Add transparency support

    Format Conversion

    • WebP to PNG - Convert WebP logos to PNG
    • PNG to JPG - Convert for compatibility

    Related Articles:

    • How to Resize Images Without Losing Quality
    • Image Format Converter Guide: HEIC, WebP, PNG, JPG
    • Best Tools to Fix Image Quality
    • Complete Guide to Image Optimization

    Need a favicon for your website? Use our free Favicon Generator to create a complete favicon package in seconds. Upload any image and get ICO, PNG, Apple Touch icon, Android icons, and ready-to-use HTML code.

    faviconfavicon generatorwebsite iconICO formatapple touch iconweb development

    Share this article

    Share:

    Related Articles

    guides

    How to Calculate Your KDP Book Cover Size (Free Calculator + Templates)

    Nov 26
    17 min read
    Read
    guides

    How to Convert EPUB to MOBI for Kindle (Free Tools & Guide 2025)

    Nov 16
    13 min read
    Read
    guides

    How to Format a Book for Kindle in 2025 (Step-by-Step Guide)

    Nov 16
    8 min read
    Read

    Try Our Free Tools

    Convert PDFs, compress images, and more — all in your browser, completely free.

    Browse Tools

    Related Tools

    Image to ICO

    Convert images to ICO favicon format

    WebP to ICO

    Convert WebP images to ICO format

    JPG to ICO

    Convert JPG images to ICO format

    View all tools

    Footer

    CreatorFormat
    CreatorFormat

    Free browser-based file tools. Convert, compress, and transform files privately.

    Private
    Fast
    Free

    Tools

    • PDF to Word
    • Word to PDF
    • Image Compressor
    • HEIC to JPG
    • PDF Merger
    • All Tools

    Batch Tools

    • Batch Image Converter
    • Batch Image Resizer
    • Batch Image Compressor
    • Batch PNG to JPG
    • All Batch Tools

    Resources

    • About
    • Blog
    • Contact

    Legal

    • Privacy Policy
    • Terms of Service

    © 2025 CreatorFormat. All rights reserved.