Zeta Calculator Logo

Favicon Maker

Create custom favicons for your website in seconds - completely free

Design Your Favicon

No file chosen
Small Large

Preview

Z
Z
Your Website

Available Sizes

Z
16×16
Z
32×32
Z
192×192

How to Use Favicons

Favicons are small icons displayed in browser tabs, bookmarks, and mobile home screens. Here's how to add your new favicon to your website:

Add to your HTML

<!-- Basic Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<!-- For modern browsers -->
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<!-- For iOS devices -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

<!-- For Android devices -->
<link rel="manifest" href="site.webmanifest">

Tips for Great Favicons

  • Keep it simple: Favicons are small, so simple designs work best
  • Ensure contrast: Use colors that provide good contrast for visibility
  • Test in tabs: Check how your favicon looks in actual browser tabs
  • Create multiple sizes: Different devices and browsers use different sizes
  • Use transparent backgrounds: For versatility across different browser themes

Frequently Asked Questions

A favicon (short for "favorite icon") is a small icon associated with a website or web page. It's displayed in browser tabs, bookmarks, and on mobile home screens when a website is saved. Favicons help users identify your site quickly and enhance your brand identity.

Modern websites typically need multiple favicon sizes:

  • 16×16: Standard favicon for browser tabs and bookmarks
  • 32×32: For high-density displays and larger bookmark views
  • 180×180: For iOS home screen icons (apple-touch-icon)
  • 192×192 and 512×512: For Android home screen icons

Our tool automatically generates all these sizes for you.

Common favicon formats include:

  • ICO: Traditional format supported by all browsers
  • PNG: Modern format with alpha transparency
  • SVG: Vector format for scalable icons (newer browsers)

Our tool provides ICO for classic support and PNG files for modern browsers.

To add a favicon to your website:

  1. Download all favicon files from our tool
  2. Upload them to your website's root directory
  3. Add the HTML code snippets (shown above) to the <head> section of your HTML
  4. Clear your browser cache and refresh to see the changes

If your favicon isn't appearing:

  • Make sure the file paths in your HTML are correct
  • Clear your browser cache completely
  • Verify that your server is correctly serving the favicon files
  • Check that your HTML has the correct link tags in the <head> section
  • Some browsers cache favicons aggressively - try a different browser to test