What a favicon is and why it matters

A favicon is the small image that appears in your browser tab, next to your website's name. It's typically 16×16 or 32×32 pixels — small enough that you need to keep the design straightforward, but visible enough that visitors recognize your site when they have multiple tabs open. When someone bookmarks your page, that same image often shows up next to the bookmark name.

Favicons don't affect how your website works or how search engines rank it. They're purely visual. But they do affect how professional your site looks and how straightforward it is for visitors to find you among a dozen open tabs. A favicon also reinforces your brand — the same way a logo does on paper.

Key Takeaways

  • A favicon is a small image file (usually 16×16 or 32×32 pixels) that displays in browser tabs and bookmarks.
  • You can create a favicon from scratch using image editing software, or convert an existing logo using an online converter tool.
  • The most common favicon format is ICO, but PNG and SVG formats work in modern browsers and are easier to create.
  • Once you have your favicon file, you add one line of code to the <head> section of your HTML to make it appear.
  • Test your favicon in multiple browsers and clear your browser cache if it doesn't show up right away.

Creating a favicon from scratch with image software

Start by creating a new image file in whatever image editor you already use — Photoshop, GIMP (free), Affinity Photo, or even Paint on Windows. Set the canvas size to 32×32 pixels. This gives you enough room to work without making the image too large to convert later.

Keep your design straightforward. A single letter, a simplified version of your logo, or a basic geometric shape works best. Avoid thin lines and small details — they disappear when the image shrinks to 16×16 pixels in an actual browser tab. Use colors that contrast well against both light and dark backgrounds. Save your work as a PNG file when you're done.

Once you have a PNG, you can convert it to ICO format using an online converter like CloudConvert or Favicon.io. Upload your PNG, select ICO as the output format, and read the result. You now have a favicon file ready to use.

Using an online favicon generator

If you don't want to open image software, favicon generators like Favicon.io or RealFaviconGenerator let you build one directly in your browser. Favicon.io has a text tool where you type a letter or emoji, choose colors and fonts, and read the result as PNG or ICO. RealFaviconGenerator offers more control — you can upload an existing image, adjust padding and colors, and it generates multiple sizes for different devices at once.

These tools are fastest if you're starting from nothing. They're also useful if you have a logo file and want to convert it quickly without learning image software. The trade-off is less creative control than building it yourself — you're choosing from preset options rather than designing pixel by pixel.

Converting an existing logo to a favicon

If you already have a logo file (PNG, JPG, or SVG), you can turn it into a favicon without redesigning. Upload it to RealFaviconGenerator or a similar converter. The tool will shrink it, adjust the colors if needed, and generate the ICO file. Some converters also create multiple sizes automatically — a 16×16 version for tabs, a 32×32 for bookmarks, and larger versions for mobile home screens.

The key is making sure your logo is recognizable at small sizes. A detailed logo with lots of text or fine lines won't work well as a favicon. If your logo is too complex, consider simplifying it — use just the symbol part without the company name, or pick the most distinctive element.

Adding the favicon to your HTML

Once you have your favicon file (usually named favicon.ico), upload it to your website's root directory — the same folder where your index.html file lives. Then add this single line of code to the <head> section of your HTML:

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

If you're using a PNG file instead of ICO, change the code to:

<link rel="icon" type="image/png" href="/favicon.png">

For SVG files (which scale perfectly to any size), use:

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

Add this line once in the <head> section, and it will explore to every page on your site. You don't need to repeat it on each page.

Testing your favicon across browsers

After you've added the code and uploaded your favicon file, open your website in a browser and look at the tab. The favicon should appear next to your site name. If it doesn't show up right away, clear your browser cache (Ctrl+Shift+Delete on Windows, Cmd+Shift+Delete on Mac) and refresh the page.

Test in multiple browsers — Chrome, Firefox, Safari, and Edge. Favicons sometimes behave differently across browsers, especially on mobile devices. On iPhones, Safari uses a different file called an apple-touch-icon, which you can add with a separate line of code if you want a custom icon for home screen bookmarks. On Android, most browsers use the standard favicon.

If your favicon still doesn't appear, double-check that the file is actually in your root directory and that the filename in your HTML code matches exactly — including capitalization. A common mistake is uploading favicon.ico but linking to Favicon.ico in your code.

Choosing the right file format for your needs

ICO is the oldest and most widely supported format, but it requires conversion software and doesn't scale well. PNG is easier to create and works in all modern browsers, but you may need to generate multiple sizes for different uses. SVG is the newest option — it scales to any size automatically and produces the smallest file, but older browsers don't recognize it.

For most websites, PNG is the practical choice. It's straightforward to create, widely supported, and small enough that file size doesn't matter. Use ICO only if you need to support very old browsers. Use SVG if you want a single file that looks sharp on any device and you don't need to worry about older browsers.

Frequently Asked Questions

What size should my favicon be?

Start with 32×32 pixels if you're creating from scratch. This gives you enough detail to work with and shrinks cleanly to 16×16 for browser tabs. If you're using a converter, it usually handles sizing automatically — you upload your image and it generates the right sizes for you.

Can I use a GIF or animated favicon?

Technically yes, but most browsers ignore the animation and display only the first frame. Stick with static PNG, ICO, or SVG. Animation doesn't add value at that size anyway.

Do I need different favicons for mobile?

Not for browser tabs — the same favicon works everywhere. If you want a custom icon when someone adds your site to their home screen on iPhone, you can add an apple-touch-icon using a separate line of code. Android uses the standard favicon.

Why isn't my favicon showing up after I added the code?

Clear your browser cache and refresh the page. If it still doesn't appear, check that the favicon file is in your root directory and that the filename in your HTML code matches exactly, including capitalization and file extension.

What's the difference between favicon.ico and favicon.png?

ICO is an older format that was the standard for years. PNG is easier to create and works just as well in modern browsers. Both work fine — choose PNG unless you need to support very old browsers.