Image Craft Hub
Back to Blog
Guide

How to Create a Favicon for Your Website: Complete Guide

January 15, 2026
7 min read

A favicon is the small icon that appears in browser tabs, bookmarks, and search results next to your website name. Despite its tiny size, a good favicon helps users identify your site instantly and adds a professional touch to your online presence. This guide covers everything you need to know about creating and implementing favicons.

What is a Favicon?

Favicon stands for 'favorite icon.' It was originally designed for bookmarks (favorites) but now appears everywhere: browser tabs, mobile home screens, search results, and even in some social media previews. A missing favicon makes your site look unfinished and can hurt user trust.

Favicon Sizes You Need

Modern websites need multiple favicon sizes to look sharp on different devices and contexts. Here are the essential sizes:

  • 16x16 pixels - Browser tabs (classic size)
  • 32x32 pixels - Browser tabs on high-DPI displays
  • 48x48 pixels - Windows taskbar
  • 180x180 pixels - Apple Touch Icon (iOS home screen)
  • 192x192 pixels - Android Chrome
  • 512x512 pixels - Progressive Web App (PWA) splash screens

At minimum, you should have 16x16, 32x32, and 180x180 sizes. For full coverage, include all sizes listed above.

Favicon Formats Explained

  • ICO - The traditional format that can contain multiple sizes in one file. Best for maximum browser compatibility.
  • PNG - Modern format with transparency support. Most browsers now support PNG favicons directly.
  • SVG - Vector format that scales perfectly to any size. Supported by modern browsers but not universal.
  • JPEG - Not recommended. No transparency support and poor quality at small sizes.

For most websites, using PNG format is the best choice. It offers excellent quality, small file sizes, and near-universal browser support.

How to Create a Favicon: Step by Step

Creating a favicon is straightforward. Here is the process:

  • Step 1: Start with a square image (ideally 512x512 pixels or larger)
  • Step 2: Keep the design simple - it must be recognizable at 16x16 pixels
  • Step 3: Use your logo, brand initials, or a simplified version of your brand mark
  • Step 4: Ensure good contrast - the icon needs to stand out against light and dark backgrounds
  • Step 5: Use a favicon generator to create all required sizes

Design Tips for Great Favicons

  • Keep it simple - Complex designs become unrecognizable blobs at small sizes
  • Use bold shapes - Thin lines disappear when scaled down
  • Limit colors - 2-3 colors maximum works best
  • Test at actual size - View your favicon at 16x16 before finalizing
  • Consider transparency - Transparent backgrounds work better across different browser themes
  • Avoid text - Letters are hard to read at favicon sizes (single letters can work)

Using a Favicon Generator

The easiest way to create all favicon sizes is to use a generator. Upload one high-quality image and the tool creates all the sizes you need. Our free Favicon Generator tool at Image Craft Hub processes everything in your browser, so your images stay private.

Simply upload a square image (PNG or JPG), and the tool will generate 16x16, 32x32, 48x48, and larger sizes. You can download them individually or as a package.

Adding a Favicon to Your Website

Once you have your favicon files, add them to your website with these HTML tags in the head section:

  • Basic: <link rel="icon" href="/favicon.ico">
  • PNG 32x32: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  • PNG 16x16: <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  • Apple Touch: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Favicon for WordPress

WordPress makes adding favicons easy. Go to Appearance > Customize > Site Identity, then upload your favicon image (called Site Icon in WordPress). WordPress will automatically generate all required sizes. Use an image at least 512x512 pixels for best results.

Favicon for Shopify

In Shopify, go to Online Store > Themes > Customize. Click on Theme Settings, then find the Favicon option. Upload a square PNG image at least 512x512 pixels. Shopify handles the rest automatically.

Favicon for Squarespace and Wix

Both platforms have built-in favicon settings in their site settings or design panels. Upload a square image and the platform generates all necessary sizes. Look for Site Icon or Browser Icon in the settings.

Testing Your Favicon

  • Open your site in multiple browsers (Chrome, Firefox, Safari, Edge)
  • Check the browser tab - is your favicon visible and recognizable?
  • Bookmark the page and check how the favicon looks in bookmarks
  • Test on mobile - add the site to your home screen
  • Use browser developer tools to check for favicon loading errors

Common Favicon Problems and Solutions

  • Favicon not showing: Clear browser cache or try incognito mode. Browsers cache favicons aggressively.
  • Blurry favicon: Your source image is too small. Start with at least 512x512 pixels.
  • Wrong favicon showing: You may have multiple conflicting favicon declarations. Check your HTML.
  • Favicon works locally but not live: Check file permissions and paths on your server.

Quick Favicon Checklist

  • Start with a high-resolution square image (512x512 or larger)
  • Keep the design simple and bold
  • Generate multiple sizes (at minimum: 16x16, 32x32, 180x180)
  • Add proper link tags to your HTML head
  • Test in multiple browsers and on mobile
  • Clear cache if changes do not appear

Ready to create your favicon? Use our free Favicon Generator to create all the sizes you need in seconds. Just upload your image and download your favicon package. Your images are processed locally in your browser for complete privacy.

Try Our Free Tools

Ready to Optimize Your Images?

Try our free image tools to compress, resize, and convert your images.