How to Make a Favicon for Your Website

What Is a Favicon and Why Does It Matter?

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

• Browser tabs next to your page title
• Bookmark lists and favorites
• Browser history
• Mobile home screens when users save your site
• Search results (on some browsers)
• Windows Start menu tiles

Without a favicon, browsers display a generic globe or blank icon. This looks unprofessional and makes your site harder to find among dozens of open tabs.

A good favicon builds brand recognition. Users learn to associate that small icon with your website, making it easier to return.

What Size Should a Favicon Be?

Modern websites need multiple favicon sizes to display correctly across all devices and browsers. Here is the complete list:

Browser Favicons

• 16x16 pixels - Browser tabs, address bar
• 32x32 pixels - Browser tabs on high-DPI displays, taskbar shortcuts
• 48x48 pixels - Windows site shortcuts

Apple Devices

• 180x180 pixels - Apple Touch Icon for iPhone and iPad home screens

Android Devices

• 192x192 pixels - Android Chrome "Add to Home Screen"
• 512x512 pixels - Android Chrome splash screen, PWA icons

Windows Tiles

• 150x150 pixels - Windows 8/10/11 medium tile
• 310x310 pixels - Windows 8/10/11 large tile

The favicon.ico File

The traditional favicon.ico file bundles multiple sizes (16x16, 32x32, 48x48) into a single file. This format ensures compatibility with older browsers and bookmark features.

Recommendation: Create all these sizes from a single high-resolution source image (512x512 or larger).

Favicon Ideas and Best Practices

Keep It Simple

Favicons display at tiny sizes. Complex logos with fine details become unreadable blobs at 16x16 pixels. Use a simplified version of your logo or a recognizable symbol.

Good favicon ideas:

• First letter of your brand name
• Simplified logo mark or icon
• Recognizable symbol associated with your brand
• Abstract geometric shape in your brand colors

Use Your Brand Colors

Your favicon should match your brand identity. Use your primary brand color as the background or main element so users associate the icon with your site.

Consider Transparency

PNG favicons support transparent backgrounds, which look cleaner on various browser themes. However, ensure your icon has enough contrast to remain visible on both light and dark backgrounds.

Test at Small Sizes

Before finalizing, preview your favicon at 16x16 pixels. If you cannot recognize it or it looks like a blur, simplify your design further.

Favicon Image Examples

Effective favicons:

• Google: Simple "G" in brand colors
• Twitter/X: Bird silhouette or "X"
• GitHub: Octocat silhouette
• Slack: Hash symbol in brand colors

These work because they are simple, recognizable, and consistent with the brand.

How to Make a Favicon: 4 Methods

Method 1: QuickTools.one Favicon Generator (Fastest)

The easiest way to create a favicon is using a free online generator that creates all sizes automatically.

Try it here: QuickTools.one/favicon-maker

How it works:

1. Upload your logo or icon (PNG, JPG, WebP, or SVG)
2. Click "Generate All Favicons"
3. Download the ZIP file with all sizes included

What you get:

• favicon.ico (multi-size ICO file)
• PNG favicons (16x16, 32x32)
• Apple Touch Icon (180x180)
• Android Chrome icons (192x192, 512x512)
• Microsoft Tiles (150x150, 310x310)
• site.webmanifest file
• browserconfig.xml file
• Ready-to-use HTML code

Why use it:

• Creates all favicon sizes in one click
• 100% browser-based (your images stay private)
• No account or signup required
• Free forever

Method 2: Create Favicon in Photoshop

If you have Adobe Photoshop, you can create favicons manually.

Steps to create favicon in Photoshop:

1. Create a new document at 512x512 pixels (or your largest needed size)
2. Design your icon using simple shapes and your brand colors
3. Export for each size using "Export As" or "Save for Web"
   • Save as PNG for transparency support
   • Create versions at 16x16, 32x32, 48x48, 180x180, 192x192, 512x512

To create a favicon.ico file in Photoshop:

Photoshop does not natively export ICO files. You need either:

• A plugin like "ICO Format" for Photoshop
• An online converter to combine your PNGs into an ICO file
• Use QuickTools.one to generate the ICO from your PNG

Pros: Full creative control

Cons: Time-consuming, requires ICO plugin or converter

Method 3: Create Favicon in Canva

Canva offers a simple way to design favicons without professional software.

Steps to create favicon in Canva:

1. Create a new design with custom dimensions (512x512 pixels)
2. Design your icon using Canva's shapes, text, and elements
3. Download as PNG with transparent background (requires Canva Pro for transparency)
4. Generate all sizes using QuickTools.one favicon generator

Tips for Canva favicons:

• Use the "Elements" tab for simple shapes and icons
• Stick to 1-2 colors for clarity at small sizes
• Avoid text smaller than 50% of the canvas

Pros: Easy to use, no software install

Cons: Limited export options, transparency requires Pro plan

Method 4: Create Favicon from Existing Logo

If you already have a logo, you can convert it to a favicon.

Best practices:

• Use the logo mark or icon portion, not the full wordmark
• Simplify complex logos by removing fine details
• Ensure the icon works in a square format
• Start with the highest resolution version available

Steps:

1. Crop or isolate the icon portion of your logo
2. Resize to 512x512 pixels (or larger)
3. Save as PNG
4. Upload to QuickTools.one to generate all favicon sizes

How to Add Favicon to Your Website

Once you have your favicon files, add them to your website with the correct HTML.

Step 1: Upload Favicon Files

Place all favicon files in your website's root directory:

yourwebsite.com/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  mstile-150x150.png
  mstile-310x310.png
  site.webmanifest
  browserconfig.xml

Step 2: Add HTML to Your Page Head

Add this code inside the <head> section of your HTML:

<link rel="icon" type="image/x-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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Note: Replace #ffffff with your brand's primary color.

Step 3: Verify Your Favicon

After uploading, clear your browser cache and reload your site. Check that:

• The favicon appears in browser tabs
• Bookmarking the site shows the correct icon
• Adding to mobile home screen displays the Apple Touch Icon or Android icon

Common Favicon Problems and Fixes

Favicon Not Showing Up

Causes and solutions:

• Browser cache: Clear cache or use incognito mode to test
• Wrong file path: Ensure favicon.ico is in the root directory
• Missing HTML: Verify the link tags are in the page head
• File permissions: Check that favicon files are publicly accessible

Favicon Looks Blurry

Solutions:

• Start with a larger source image (512x512 minimum)
• Simplify the design for better clarity at small sizes
• Use PNG format for sharper edges

Different Icon on Mobile

Mobile devices use apple-touch-icon.png (iOS) or the manifest icons (Android). Ensure these files exist and are correctly referenced.

Favicon File Formats Explained

ICO (favicon.ico)

The original Windows icon format. Contains multiple sizes in one file. Required for maximum browser compatibility, especially older browsers.

PNG

Modern format with better quality and transparency support. Preferred by modern browsers when available.

SVG

Vector format that scales perfectly to any size. Supported by modern browsers but not universally. Good as a source file, but always include PNG fallbacks.

Tools Compared: Best Ways to Create a Favicon

Recommendation: Start with a design tool you know (Canva, Photoshop, Figma), create a 512x512 PNG, then use QuickTools.one to generate all required sizes and formats automatically.

Final Thoughts

Creating a favicon takes just a few minutes but makes a lasting impression on your visitors. A professional favicon signals attention to detail and helps users find your site among their bookmarks and tabs.

The fastest approach:

1. Design a simple, recognizable icon at 512x512 pixels
2. Use QuickTools.one to generate all sizes: quicktools.one/favicon-maker
3. Upload files and add the HTML code to your site

Your favicon will be live in minutes.

Your files stay private. Your favicons look great. And you stay in control.