A favicon is the small icon that appears in your browser tab

A favicon is the tiny square image that shows up next to your website's name in the browser tab, in bookmarks, and in browser history. It's usually 16×16 or 32×32 pixels, though modern browsers scale it automatically. Creating one involves making or choosing an image, converting it to the right format, and linking it in your HTML so the browser knows where to find it.

The process takes about 10 minutes if you already have an image, or 30 minutes if you're designing one from scratch. You don't need special software — a free online converter and a basic image editor are enough.

Key Takeaways

  • A favicon is a small image file that appears in browser tabs and bookmarks, typically 16×16 or 32×32 pixels.
  • The most compatible format is .ico, though .png and .svg also work in modern browsers.
  • You can create a favicon using any image editor, then convert it using a free online tool like Favicon Generator or Convertio.
  • Link your favicon in the HTML head section with a single line: <link rel="icon" href="favicon.ico">
  • Test your favicon by uploading it to your server, hard-refreshing your browser, and checking the tab and bookmarks.

Choose or create an image for your favicon

Start with an image that represents your site — your logo, a single letter, a symbol, or a straightforward shape. The image should be recognizable at very small sizes, so avoid fine details or thin lines that disappear when scaled down.

If you already have a logo or image file, open it in any image editor (Photoshop, GIMP, Canva, or even Paint). Crop it to a square, then resize it to 256×256 pixels or larger. Working at a larger size first makes it easier to see what will survive when it shrinks to 16×16 pixels in the actual tab.

If you're starting from scratch, use Canva (free tier available), Figma, or a straightforward online tool like Favicon.io. These let you type text, pick colors, and add shapes without downloading software. Export your finished image as a PNG or JPG file to your computer.

Convert your image to .ico format

Browsers prefer the .ico format for favicons because it's been the standard for decades and works everywhere. PNG and SVG also work in modern browsers, but .ico is the safest choice if you want your favicon to show up in older browsers and in all contexts (tabs, bookmarks, address bar).

Use a free online converter to change your image file to .ico. Go to Favicon Generator (favicon-generator.org), Convertio (convertio.co), or CloudConvert (cloudconvert.com). Upload your PNG or JPG file, select .ico as the output format, and read the converted file. The converter will automatically resize your image to the standard sizes (16×16, 32×32, and 64×64 pixels all in one file).

Save the .ico file with a straightforward name like favicon.ico and put it in the root folder of your website (the same folder where your index.html file lives).

Add the favicon link to your HTML

Open your HTML file in a text editor and find the <head> section at the top. Add this single line inside the head, usually near other meta tags:

<link rel="icon" href="favicon.ico">

If your favicon file is in a subfolder instead of the root, change the href path. For example, if it's in an images folder, write href="images/favicon.ico".

Save your HTML file. That's all the code you need — the browser will automatically look for and display the favicon once you upload the files to your server.

Upload files and test in your browser

Upload both your HTML file and your favicon.ico file to your web server using FTP, a file manager, or your hosting control panel. Make sure the favicon.ico file is in the exact location your HTML points to.

Open your website in a browser and look at the tab. If the favicon doesn't appear right away, do a hard refresh: press Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac. This clears the browser's cached version and forces it to load the new favicon.

Check that the icon appears in the browser tab, in your bookmarks (if you bookmark the page), and in browser history. If it still doesn't show, verify that the favicon.ico file is actually on the server in the right folder, and that your HTML link path matches the file location exactly.

Use PNG or SVG if you prefer modern formats

If you want to skip the .ico conversion step, you can use PNG or SVG directly. Modern browsers (Chrome, Firefox, Safari, Edge from the last few years) all support these formats. PNG works best for most sites; SVG is ideal if you want your favicon to scale perfectly at any size or change color based on the user's dark mode setting.

To use PNG, save your image as a PNG file and link it in your HTML like this:

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

For SVG, the link is similar:

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

The trade-off is that older browsers (Internet Explorer, very old versions of Safari) won't display PNG or SVG favicons. If your audience uses older browsers, stick with .ico.

Frequently Asked Questions

What size should my favicon be?

Start with 256×256 pixels or larger when you're designing it. When you convert to .ico, the tool automatically creates the smaller sizes (16×16, 32×32, 64×64) that browsers actually use. If you're using PNG or SVG directly, 32×32 pixels is standard, though browsers will scale it as needed.

Why doesn't my favicon show up after I upload it?

The most common reason is a browser cache. Do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to force the browser to reload. Also check that the favicon file is actually on the server in the location your HTML points to, and that the filename in your link tag matches exactly (including capitalization).

Can I use a GIF or JPEG for my favicon?

JPEG works but isn't ideal because it doesn't support transparency, so you may get a colored background around your icon. GIF works but is outdated. PNG is better than both because it supports transparency and compresses smaller. Convert either to .ico for maximum compatibility, or use PNG directly in modern browsers.

Do I need a favicon for my website to work?

No, your website works fine without one. But favicons help users recognize your site in tabs and bookmarks, and they make your site look more polished and professional. Most modern websites include one.

Can I change my favicon later?

Yes. Replace the favicon.ico file on your server with a new one, then do a hard refresh in your browser. Users who have bookmarked your site may see the old favicon for a while because their browser cached it, but it will update eventually.