Open twelve tabs and the page titles stop doing anything useful. They get clipped down to four or five characters each. What you actually navigate by at that point is the little square image sitting to the left of the text.
That square is the favicon. It identifies a site from inside the browser’s own furniture: the tab, the bookmark bar, the address field, the history list. Never on the page. Always around it.
Browsers go looking for that file in a site’s root directory on their own, with no icon link specified anywhere, and Google prints the same image next to a listing in search results.
Google’s search documentation, revised in late 2024, puts the accepted floor at 8 by 8 pixels. The same page then tells you to ignore that floor and supply something larger than 48 by 48 pixels if you want it to look sharp in results.
What Is a Favicon
Sixteen pixels square. That is the constraint the whole thing was designed around, and it explains most of what’s strange about favicon design work.
It is not a logo file, and it is not a page graphic. A logo sits inside a layout you control. The favicon gets handed over to the browser chrome, where you control almost nothing about how it’s framed.
The name is a clipped version of “favorite icon.” Depending on who’s talking, the same file answers to a few different names.
- Shortcut icon
- Site icon
- Tab icon
- URL icon
- Bookmark icon
Microsoft shipped the feature in Internet Explorer 5 back in 1999. The original convention was one file, named favicon.ico, dropped in the site root.
That habit never died. Plenty of sites still serve a plain favicon.ico today, sitting next to newer formats that do the same job better.
Google’s own results page is the example everyone has seen a thousand times without registering it. The multicolored “G” appears beside the site title in results and in the tab, doing exactly the identification work the format was invented for.
Why Do Websites Use a Favicon
It answers one question fast: which tab is which.
Anyone working with six or seven open at once leans on that image far more than the title text, since the text is usually truncated into nonsense anyway.
The same file turns up in a handful of predictable places.
- The browser tab, next to the page title
- The address bar, beside the URL in many browsers
- The bookmark bar, marking saved pages
- Browser history, which becomes much faster to scan
- Search result listings on Google and a few other engines
There’s a branding side to this too. A favicon carries recognition into spots a full logo can never reach.
Airbnb runs the same simplified brand mark as its favicon sitewide, which is why the icon still reads as Airbnb at a handful of pixels wide.
Skip it and the browser fills in a blank document icon or its own generic default. Functionally nothing breaks. It just looks unfinished parked next to tabs that bothered.
What File Formats Can a Favicon Use
ICO, PNG, SVG, and GIF all work, though they trade off differently on file size, transparency, and which browsers actually render them.
| Format | Browser Support | Transparency | Typical Use |
|---|---|---|---|
| ICO | Universal, the legacy default | Yes | Multi-size favicon.ico file |
| PNG | Universal in modern browsers | Yes | Single-size tab and bookmark icon |
| SVG | Chrome, Firefox, Edge, Safari 26+ | Yes | Scalable icon with dark mode support |
| GIF | Limited, mostly legacy | Yes, 1-bit only | Rare, older templates |
ICO Format
ICO is a container. One file holds several icon resolutions at once.
A single favicon.ico can carry a 16×16 grid alongside 32×32 and 48×48 versions, and the browser pulls whichever size fits the slot it’s filling.
Every browser released since 1999 reads it with no fallback needed, which remains the only real argument for using it.
Tooling is where ICO gets annoying. Most current design apps won’t export it, so the usual workflow ends with running finished artwork through a converter.
PNG Format
PNG is what most sites actually ship now. It has full alpha transparency instead of GIF’s crude on-off version, and it reads correctly in anything released in the last ten years or so.
The catch is one resolution per file. Multiple sizes means multiple files and multiple link tags.
It took over as the practical default once browsers stopped insisting on the older format for basic tab display.
SVG Format
SVG stores the icon as vector paths rather than a fixed pixel grid.
One SVG file can stand in for a whole stack of PNG exports, since it renders cleanly at 16 pixels or blown up for a PWA splash screen.
It also handles dark mode, through a CSS media query that swaps the icon’s fill color based on the visitor’s system theme. Nice touch, and still underused.
Safari was late. SVG favicon support arrived in version 26, per caniuse.com’s compatibility data, years behind Chrome and Firefox.
GIF Format
GIF favicons technically still render. Nobody picks the format deliberately anymore.
Transparency is a single on-off channel, and the file rarely comes in smaller than a well-compressed PNG at identical dimensions.
You’ll mostly run into them inside older CMS themes and a few legacy widget embeds that never got touched again.
What Size Should a Favicon Be
Square, always. Past that, the pixel count depends entirely on where the icon ends up.
- 16×16 pixels, the original browser tab size
- 32×32 pixels, common for high-resolution tabs and desktop shortcuts
- 48×48 pixels, used for Windows site icons and larger displays
- 180×180 pixels, the size Apple calls for on the touch icon
- 8×8 pixels, Google’s stated minimum for showing a favicon in search results
Google Search Central says to go above 48×48 even though 8×8 clears its own bar, because anything at that low end looks rough once it’s rendered across different surfaces.
The square rule isn’t a suggestion. An uneven aspect ratio gets rejected outright or stretched into something you wouldn’t have approved.
Screens are why the list is that long. A phone with high pixel density wants a sharper source image than an older desktop monitor rendering the exact same tab.
How Do Favicons Work Across Different Browsers and Platforms
Different browsers and devices read favicon files differently, and not always the file you meant.
Dealing with that spread is ordinary cross-browser compatibility work. It needs more than the single favicon.ico convention from 1999.
| Platform | Icon Reference | Typical Size |
|---|---|---|
| iOS and Safari | apple-touch-icon link tag | 180×180 |
| Android and Chrome | Web app manifest icons | 192×192, 512×512 |
| Windows | msapplication meta tags | 150×150 tile |
| Progressive Web Apps | Manifest icon array | 192×192, 512×512 |
iOS and Safari
Apple wants its own apple-touch-icon tag, pointing at a 180×180 pixel image, entirely separate from the regular favicon link.
Safari’s pinned tab feature goes further and asks for a dedicated SVG, limited to a single color on a transparent background. Most sites never bother with that one.
Android and Chrome
Android reads from the site’s web manifest rather than a link tag, and it wants two sizes: 192×192 for the home screen icon, 512×512 for splash screens and app-store-style previews.
Chrome also handles a maskable variant, which pads the artwork so Android can crop the icon into a circle or a squircle without slicing the edges off your mark.
Windows Tiles
Legacy territory now.
Older Windows releases read msapplication meta tags to build a 150×150 pixel tile for sites pinned to the Start menu. Pinned tiles themselves fell out of use, and the tags went with them.
Progressive Web Apps
A progressive web app takes its full icon set from the manifest file. The favicon link tag alone won’t cover it.
Vaadin’s PWA documentation states that a manifest needs at least a 192 pixel and a 512 pixel icon to satisfy add-to-home-screen requirements in Chromium browsers.
How Do You Add a Favicon to a Website
Upload one file, point at it from the page head. That’s the whole job in the simple case.
- Create a square icon file, starting at 32×32 or 48×48 pixels
- Export it as ICO for full legacy coverage, or as PNG and SVG for modern browsers
- Upload the file to the site’s root directory, or an assets folder if the site is structured that way
- Add a link tag inside the page head, pointing to that file path
- Add the apple-touch-icon tag and manifest link too, if the site needs iOS or Android home screen icons
- Reload the homepage in a fresh tab to confirm the icon actually shows up
That link tag sits in the same part of the document as page titles and the rest of your HTML meta tags. It’s the one piece no browser will work without.
WordPress handles almost none of this by hand. The built-in Site Icon setting in the customizer takes the upload and writes the tags, no template editing involved.
Worth knowing before you start debugging: browsers cache favicons hard, so a fresh upload often needs a forced reload before you see anything change.
What Tools Can You Use to Create a Favicon
Most people end up in design software, at a generator, or in whatever uploader their platform already provides.
Design Software
Photoshop, GIMP, and Figma give you control over the artwork itself, which matters more than it sounds.
A designer can pull the mark out of an existing logo file and then push pixels around by hand until it still reads at tab size. Logos almost never survive that shrink unedited.
You get an exact brand match and you work straight from your source files. What you don’t get is automatic export across the full size set, and you do need real design skill to make a 16 pixel version legible.
Online Generators
Generators drop the manual resizing entirely.
Favicon.io and RealFaviconGenerator both take one uploaded image and return a full package in a zip: ICO, PNG, and the platform-specific sizes for Apple, Android, and Windows in a single pass.
Fast, and reliable enough for most sites. You just give up control over how the art gets cropped or padded at each individual size, which shows up on the smallest exports first.
CMS Built-in Options
- WordPress, through its Site Icon field
- Shopify, through a dedicated favicon upload setting
- Squarespace, through its built-in uploader
Fastest option of the lot since no code is involved. The limitation is that these fields usually take one square image and give you no separate handle on the Apple or Windows variants.
Does a Favicon Affect Google Search Rankings
No. It doesn’t move a page up or down in the ranking order.
What it decides is cosmetic and separate: whether Google prints an icon next to your listing at all.
Google Search Central sets out a few rules for that display layer, sitting on top of the plain size and shape requirements.
- Google Search supports one favicon per site, defined by hostname
- The file’s URL should stay put, since a URL that keeps changing can get the icon dropped
- Imagery Google considers inappropriate gets replaced with a generic default
Google’s John Mueller has also floated an unofficial styling tip here: design the icon so it still reads if it gets cropped into a circle, because round-cropped favicons appear on some search surfaces.
Search Engine Journal reported the comment after Mueller raised it in a LinkedIn discussion, noting that Google’s own documentation mentions it nowhere.
SEO tool WooRank has documented its own favicon appearing beside its listing in Google’s mobile results, which is a plain example of the display benefit these rules govern.
None of it touches position. It only changes whether the listing looks slightly more finished once it arrives there.
When a Favicon Does Not Show Up or Does Not Apply
A missing favicon almost never means something is broken on the site.
The cause usually sits in the browser’s cache, or in Google’s separate display rules, or in a linking mistake.
Browser and Cache Issues
Browsers keep favicon data apart from the regular page cache that a normal reload clears.
Chrome maintains its own distinct favicon cache, which is why a refresh often leaves the old icon sitting in the tab looking stale.
- Switching between tabs that are already open can re-trigger a request for the old file
- A CDN or reverse proxy sitting in front of the site may keep serving its cached copy
- A browser profile that visited once may simply never check again
Clearing the cache properly, not just reloading, usually settles it.
Search Result Display Issues
Google’s documentation notes that recrawling a homepage after a favicon change can take anywhere from several days to several weeks.
So the fix is often just waiting, which nobody wants to hear.
Broad core updates are not the cause, according to John Mueller. Technical SEO analyst Glenn Gabe, whose tracking on the issue was last updated in January 2026, puts the blame on technical or policy problems instead.
Implementation Errors
Some failures have nothing to do with caching. The link tag is wrong, or the file isn’t there.
A wrong file path throws a failed to load resource error in the browser console, and it’s the most common mistake by a wide margin.
- A non-square image gets rejected, or stretched into something odd
- A format the target browser can’t read, like SVG on an older Safari release
- The link tag placed outside the head section, where no browser looks for it
Nothing here breaks the site. A missing favicon costs you the visual identification and nothing else.
FAQ on What Is A Favicon
What is a favicon also called?
Shortcut icon is the original term, since Internet Explorer used it as the literal rel attribute value in 1999.
Current documentation tends toward site icon or tab icon, while the HTML standard itself just calls the attribute icon.
How do you add a favicon in WordPress, Shopify, or Squarespace?
In WordPress, go to Appearance, then Customize, then Site Identity, and set a Site Icon.
Shopify keeps it under Online Store, Themes, Customize, Theme Settings, Favicon. Squarespace files it under Settings, then Favicon, with a separate slot for a dark mode version.
How do you clear a browser cache to see a new favicon?
A normal reload rarely does it, because favicons live in their own cache separate from the page.
In Chrome, clear cached images and files through the history settings, or go straight to chrome://favicon-internals to clear the favicon cache directly.
Should a small blog or personal site bother with a custom favicon?
Yes. It costs almost nothing and buys immediate brand recognition across tabs and bookmarks.
A single 32×32 PNG handles most of what you need. Skip it and every page of yours sits behind the browser’s generic default icon.
What Should You Do First When Building a Favicon?
Finish the square master artwork at full size before you resize anything. A small file stretched up for a home screen icon loses sharpness in a way that a large file scaled down never does.
Build that master at 512 by 512 pixels and it covers every size a current site actually asks for, from Apple’s 180 pixel touch icon down to Google’s recommended floor above 48 by 48 pixels, with no upscaling anywhere in the chain.
Export the platform sizes from that one file. Add the link tags last, after you’ve confirmed every export came out square.
Getting that master into a clean, scalable source is the next practical step, and the process for making SVG files covers it.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
