HTML Favicon Explained: Tabs, Formats, Sizes and Fixes

Think of the little picture in a browser tab as a name tag for your website. It’s tiny, but it helps visitors spot you among a dozen open tabs. That image is called a favicon, and it appears in tabs, bookmarks and browsing history.

Adding one takes just a line or two of HTML, the markup language behind every web page. You don’t need to be a coder to get it working.

Below, we’ll cover the link tag, file formats, sizes, free tools and fixes for when your icon won’t show up.

Favicon HTML Basics and Why It Matters

Before you touch your site’s HyperText Markup Language (HTML) code, it helps to know what a favicon does and where people will spot it.

How a favicon identifies your site

A favicon is a small image that sits in your browser tab, beside the page title. The name is short for “favorite icon,” and its job is to identify your site visually.

Picture a freelance photographer with nine tabs open while she compares venues. Her site’s tab shows a tiny camera icon, so she finds it in a second without reading a single title. It’s less about decoration and more about recognition.

Where you’ll see favicons

Your favicon shows up in more places than the tab bar:

• Browser tabs: where most visitors notice it first.
• Bookmarks: it sits beside your saved link.
• Embedded link lists: it can appear wherever your link is listed on another page.
• Device shortcuts and home screens: shortcuts saved to a phone or tablet can display it too.

A bakery owner who saves her online ordering page as a shortcut on the shop tablet sees her icon every time she taps it, so she never hunts through the other apps.

Origins and whether favicons are required

Internet Explorer introduced favicons in 1999, and they’ve become a common sight on the web since then.

Are they required? No. Your site will still load without one. Still, most sites include one, so a blank tab can look like an afterthought. It’s optional in the technical sense but expected by the people who visit.

Keep your favicon simple and high contrast

Your favicon is shown very small, so fine detail disappears fast. A single shape, a letter, or a bold logo mark reads far better than an intricate drawing.

High contrast helps too: a dark mark on a light background, or the reverse, holds its shape in a crowded row of tabs.

Any image can technically work, since a favicon is just an image file. Consider a band manager who uploads the full group photo as the favicon. At tab size, the four faces blur into a smudge.

Swap in a single bold letter from the band’s logo on a solid background, and it stands out in a row of open tabs. Simple wins.

Adding a Favicon Using HTML Link Tags

Adding a favicon takes one line of code and one file in the right place.

How do I put an icon in HTML?

A favicon is the small icon that sits in a browser tab. You add one with a link tag, a line of code in your HyperText Markup Language (HTML) file. It goes inside the <head> section at the top of the page:

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

rel="icon" says this link is an icon, and href points to the file. type names the file format, so match it to your file. The tag points to your icon. It doesn’t hold the image itself.

Icons inside page content are a separate job. A logo in your page body is an ordinary image, added with an <img> tag, and it won’t change the tab.

Consider Maria, a retired teacher starting a book review blog. With an open-book icon in her tab, she spots her blog at a glance.

Where to save the favicon file

Save your icon as favicon.ico in your root directory, the top-level folder that holds your home page. Browsers look there by default, so keep the standard name. An images folder works too, but the path must match exactly, like href="images/favicon.ico".

A wrong path won’t show an error on the page. The tab just stays blank.

Browsers look for favicon.ico automatically

Browsers check your site’s root for favicon.ico even without a link tag. Still, add the tag. Not every browser checks the same way, so the tag tells each one exactly where your icon lives.

A full page example to test

Copy this into a file named index.html, saved in the same folder as your favicon.ico:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My First Page</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <h1>Hello, favicon!</h1>
  <p>If the tab shows your icon, your link tag is working.</p>
</body>
</html>

Then follow these steps:

1. Save the file.
2. Open it in your browser.
3. Refresh the page to see your icon in the tab.

If the old icon sticks, a hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on a Mac) usually clears it.

Which Favicon File Format to Pick

Your favicon can come in several file formats, and each one trades simplicity for sharpness or reach. Here’s what you’ll run into most.

Using the ICO format and its drawbacks

ICO (icon file format) is the oldest option. A single ICO file can hold several sizes, so the browser picks the closest one. That makes it a dependable legacy fallback for older browsers.

The catch is reliability. Not every editor can save one, and a file that looks right on your desktop may still look blurry in a tab. Test it first.

Why PNG suits modern browsers

PNG (Portable Network Graphics) is the everyday choice for most sites. It preserves transparency, so your icon keeps its shape instead of sitting inside a white box. Modern browsers prefer it, and the sizes attribute states its dimensions.

Picture a freelance photographer who uploads a square PNG of her logo. Her rounded corners stay clean in the tab, and visitors recognize her brand at a glance.

Scalable SVG favicons and their fallbacks

SVG (Scalable Vector Graphics) files are drawn with shapes rather than pixels, so they stay sharp at any size. One file covers every screen size.

The limit is support. Only modern browsers read SVG favicons, so pair one with a PNG or ICO fallback in your page’s head. Each browser uses whichever file it can read.

SVG favicons also handle dark mode. A style block inside the file can swap in lighter colors when a visitor’s system is set to dark, where the browser supports it. Dark mode is a bonus, not a must.

Which browsers support which formats

Browser support shifts, so use this table as a starting point and test in the browsers your visitors use.

Format	Browser support	Good to know
ICO	Nearly every browser, including older ones	Dependable, but harder to create
PNG	Modern browsers	Your everyday default
GIF (Graphics Interchange Format)	Many browsers	Animation usually won’t show
JPEG (Joint Photographic Experts Group)	Not a standard favicon choice	No transparency, so skip it
SVG	Modern browsers only	Always include a fallback

Already have a PNG? Most image editors can save it as an ICO, and free online converters work too. Start from a large square source so it scales down cleanly.

Sizing Your Icons for Every Device

Your favicon’s just the start. Phones and tablets want their own icon sizes too.

The icon sizes most sites need

Here’s the set we’d start with:

• 16x16 and 32x32 for the small icon in browser tabs and bookmarks. Treat 16x16 as your minimum.
• 96x96 for shortcut icons on some devices.
• 192 and 512 for Android home screens, listed in the manifest covered below.

Think fit rather than size: a crisp 16x16 beats a blurry big one.

Setting up an iPhone home screen icon

When an iPhone visitor saves your site to the home screen, iOS (Apple’s iPhone operating system) looks for its own icon. Add it with an apple-touch-icon link tag. The rel part names what the file is for.

Use 180x180 as your recommended size. You can add more iOS sizes later if you need them.

Consider a retired teacher whose readers save her blog to their iPhones. A sharp icon keeps her logo as clean on the home screen as it is on her site. A blurry icon stands out for the wrong reason.

Setting up a web manifest for Android

Android home screens read a web manifest, a small file named site.webmanifest that describes your site. It’s written in JSON (JavaScript Object Notation), a simple text format for settings.

Link it on your pages with a rel=manifest tag, like <link rel="manifest" href="site.webmanifest">.

Inside the file, an icons array (a list of images, each with a size) tells the phone which one to use. Theme and display settings set the color and how the site opens from the home screen.

How much icon setup your site needs

It depends on your project. A personal blog and a busy shop don’t need the same setup.

Begin with a few PNG (Portable Network Graphics) sizes. A simple favicon.ico file (an older icon format) is still fine for a small site.

The minimal modern tag set is:

• A favicon link for the browser tab
• An apple-touch-icon link for iPhone home screens
• A manifest link for Android

Consider a freelance consultant launching a one-page site. One square logo and three links keep her looking polished on a laptop and a phone.

Start from one square image and export every size from it so they match.

Helpful Tools for Building Favicons

Before you touch any code, you’ll need a favicon, the small icon in your browser tab.

Generate, convert, and zip your icons

Have a logo saved as a PNG (Portable Network Graphics)? Online PNG to ICO converters turn it into ICO, an icon file format. Starting from scratch?

Favicon generators build a full set of sizes from one image, and a ZIP of all files option bundles them into one download.

Not a designer? Text and emoji favicons let you pick a letter or emoji and turn it into an icon. A retired teacher starting a book review blog could use a simple letter B in her favorite color and stand out in a row of tabs.

Reference guides and favicon checkers

Keep these handy:

• Open source cheat sheet: a quick reference for tags and file names.
• Sizes guide: a reference for which dimensions to produce.
• Favicon checker tool: shows whether the browser can find your live icon.

Once it’s live, check it rather than guess. A freelance photographer who swapped in a new logo can use a checker to see which file the browser is still loading.

Setup guides for Next.js, Webflow, and WordPress

Pick the guide that matches how you build:

• Next.js: a framework for building sites with React, a JavaScript toolkit.
• Webflow: a visual builder where you design by pointing and clicking.
• WordPress: a walkthrough for sites built on WordPress.
• Your theme’s Site Icon setting: on WordPress, look for it first to skip the code.

A church secretary building her first WordPress site can find the Site Icon setting, upload the church’s logo and save, so the logo shows in every visitor’s browser tab. That’s the whole job.

Fixing Problems and Answering Common Questions

Tab still blank? It’s usually a quick fix, so work through these checks in order.

Fixing a favicon that won’t appear

A missing file shows nothing. Picture a bakery owner whose icon sits one folder too deep, leaving her tab blank.

Check the file name and path first. The link tag must match the file exactly, capital letters included, since some servers treat Favicon.ico and favicon.ico as different files.

Next, open your developer tools (F12 in most desktop browsers), choose the Network tab, and reload. A 404 status means the file wasn’t found.

Test the live site too. A file that works on your laptop can go missing during deployment to production, when you upload your site to its web address (URL). A missing file also hides your favicon in Google search results.

Why old favicons stick around

Still seeing the old icon? That’s the favicon cache at work. Browsers store icons so they don’t re-fetch them on every visit.

Try a hard refresh first: Ctrl+Shift+R on Windows or Cmd+Shift+R on a Mac. Still stuck? Open an incognito window (some browsers call it a private window) and load your site. You’ll see the fresh copy instead of the saved one.

If it looks right there, the problem is the stored copy, not your site.

When the icon fails on mobile

Works on desktop but not on a phone? Mobile needs its own icons. A retired teacher who saves her new blog to her home screen might get a blank square.

Add these two:

• apple-touch-icon: a link tag pointing to a square image for iPhone and iPad home screens.
• web app manifest: a small file describing your icons and site name for Android and other phones.

Quick answers to common setup questions

Where does the favicon code go? Inside the <head> section at the top of your page.

Do you need both ICO (a Windows icon format) and PNG (a common image format)? Pairing them is a safe bet, since ICO covers browsers that look for it automatically.

Can you use emoji? Yes. Place one inside an SVG (scalable vector graphics) file and it stays sharp at any size. A florist choosing a flower emoji should still preview it on her phone, since emoji look different across devices.

A favicon is a small detail that does a lot of work. Add one line of HTML, pick an image in a format browsers can read, and your site looks put together in every tab and bookmark.

Start with the minimal tag set, test in a couple of browsers, and fix problems as they come up. Your icon doesn’t need to be perfect on day one, just clear at a glance.

A tiny image, chosen with care, speaks for your site before anyone reads a word.