The small icon that appears in a browser tab, bookmarks bar, and mobile home screen shortcut is called a favicon. It sounds like a minor detail — but a missing favicon leaves a visible gap where a logo should be, and modern browsers fetch it automatically whether you've set one or not. Here's everything you actually need to know.
Where favicons appear
Favicons show up in more places than most people expect:
- Browser tabs (the most visible location)
- Bookmarks and the bookmarks bar
- "Add to home screen" shortcuts on iOS and Android
- Browser history lists
- Some search engine results
- Link previews in apps like Slack or Notion
At most of these sizes the favicon is 16×16 or 32×32 pixels — tiny. That's why a logo that looks great at full size can become an unreadable smudge when squashed down, and why simple, high-contrast icons work better than complex ones.
What file format does a favicon need to be?
The traditional format is .ico — a container format that can bundle multiple image sizes (16×16, 32×32, 48×48, and sometimes up to 256×256) into a single file. Modern browsers also accept PNG and SVG favicons, but .ico remains the most universally supported option, especially for older browsers and Windows taskbar icons.
A good favicon.ico file contains at minimum the 16×16 and 32×32 sizes. An .ico with 16, 32, 48, 64, 128, and 256px images covers virtually every context: browser tabs, Windows taskbar pins, macOS Dock bookmarks, and iOS home screen shortcuts.
How to add a favicon to your site
Once you have a favicon.ico file, put it in the root of your website (the same folder as your index.html). Many browsers will find it automatically, but the reliable way is to add a line to the <head> of your HTML:
<link rel="icon" type="image/x-icon" href="/favicon.ico">For PNG favicons, change the type:
<link rel="icon" type="image/png" href="/favicon.png">For Apple devices (iOS home screen shortcuts), add a separate apple-touch-icon at 180×180:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Common favicon problems
- The browser is showing an old favicon. Browsers aggressively cache favicons. Clear your browser cache and hard-reload the page (Ctrl+Shift+R or Cmd+Shift+R). In some browsers, visiting favicon.ico directly and reloading works too.
- The favicon looks blurry. Your source image is too small or too complex. Start from an SVG or a large PNG (at least 512×512), not from a small JPEG.
- The favicon doesn't show on mobile home screens. iOS in particular wants a separate apple-touch-icon link pointing to a 180×180 PNG with no transparency (Safari will fill the transparent background black).
- The .ico file won't generate. Some ICO converters only produce a single-size file. Make sure yours generates multiple sizes, or use a tool that bundles them properly.