A favicon is the small site icon used in browser tabs, bookmarks, history, and some search results. Start from simple square artwork, test it at tiny sizes, and publish a stable crawlable URL.
Practical favicon sizes in 2026
For browser tabs, 16×16 and 32×32 remain useful raster targets. A 48×48 or larger square source gives search and browser surfaces more detail; Google currently recommends a favicon larger than 48×48 while requiring at least 8×8 and a square aspect ratio. Use multiples of 48 when preparing a dedicated search-friendly raster icon.
For a web-app or Apple touch icon, prepare separate larger artwork according to that platform's current documentation. Do not assume one 16×16 file is suitable everywhere.
PNG, SVG, or ICO?
- PNG: predictable raster output and transparency; provide the intended size.
- SVG: scalable and crisp in supporting browsers; keep the file safe and simple.
- ICO: useful for legacy compatibility and can package multiple raster sizes.
A robust setup may offer SVG or PNG through rel="icon" and retain /favicon.ico for older clients. Verify support for your actual audience rather than adding every possible file.
Design an icon that survives 16 pixels
Use one recognizable shape, high contrast, and generous negative space. Remove taglines and fine outlines. Test on light and dark browser chrome. A lettermark can work, but keep it bold enough to remain legible after rasterization.
Create and preview the favicon
- Prepare square source artwork, ideally as vector or a large lossless image.
- Create the required output files with the Favicon Generator.
- Open the Favicon Preview Tester.
- Check tab, bookmark, and tile simulations at small scale.
- Upload files to stable public URLs.
Add favicon HTML
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/assets/favicon-48.png" sizes="48x48" type="image/png">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">Use root-relative or absolute URLs that work on every page. Declare accurate MIME types and sizes; do not claim dimensions the file does not have.
Why a favicon may not update
Browsers and search systems cache icons aggressively. Confirm that the URL returns 200 OK, is not blocked from crawling, uses the expected content type, and points to the new bytes. Keep the URL stable for search surfaces, then allow time for recrawling and cache refresh.
Frequently asked questions
Does a favicon need to be exactly 16×16?
No. Browsers select and scale available resources for different surfaces. A simple 16×16 version remains useful, while larger square files support high-density displays and search surfaces. Test the actual files you publish.
Can I use a transparent favicon?
Yes, PNG and SVG can preserve transparency. Preview the icon against light and dark UI so edges do not disappear. A transparent design may still be placed on a generated background by some platforms.
How quickly will Google show a new favicon?
There is no instant guarantee. The home page and icon must be crawlable, the URL should remain stable, and Google must recrawl and reprocess the site. Browser and CDN caches may update on different schedules.
Sources checked
Google Search favicon requirements and HTML icon-link behavior were reviewed on August 12, 2026; confirm current size and crawling rules before publishing.