What size should a favicon be?

Design for 16 and 32 pixels, since that's how favicons appear in browser tabs. For files, ship a 32 pixel ICO fallback, a scalable SVG, a 180 by 180 pixel Apple touch icon and 192 and 512 pixel PNGs for the web manifest. Google Search recommends a square favicon that's a multiple of 48 pixels, so the larger PNGs also cover search results.

Why isn't my favicon showing in Google search results?

Google needs to crawl your home page and favicon, and the icon must be square, follow its guidelines and be allowed by your robots rules. Changes can take a while to appear, because Google recrawls favicons on its own schedule. Check that the favicon link is in your home page's head and that the file loads without errors at a stable URL.

Can a favicon be animated?

Some browsers support animated GIF favicons, but support is inconsistent and they can feel distracting, especially in a crowded tab bar. A few sites change their favicon dynamically, such as adding a notification dot. For most marketing sites, a static favicon that's easy to recognize is the better choice. Save animation for the logo on the website itself.

Should my favicon have a transparent background?

It can, but it's riskier. A transparent favicon with a dark mark can disappear in dark mode tab bars, so you'll need a dark mode variant, often handled inside an SVG. A solid background shape, like a rounded square in your brand color, looks consistent everywhere and usually makes the favicon easier to spot among other tabs.

Do I still need a favicon.ico file?

It's still worth including. Modern browsers prefer SVG or PNG icons when you declare them, but some older browsers, feed readers and tools still look for favicon.ico at the root of your domain by default. A single 32 pixel ICO file is small and avoids errors in server logs and missing icons in tools you don't control.

All posts

Branding

Favicon Design: Making Your Logo Work at 16 Pixels

Favicon design that works at 16 pixels: how to adapt your logo, test it in tabs, bookmarks and dark mode, and the exact favicon files to ship on your site.

By Mehdi HassanOct 29, 20267 min read

The short answer

Favicon design means turning your logo's simplest element, usually the symbol or first letter, into a square mark that stays clear at 16 by 16 pixels. Redraw it with thicker shapes, test it in light and dark browser tabs and bookmarks, then ship an SVG favicon, a 32 pixel ICO fallback, a 180 pixel Apple touch icon and manifest icons.

Key takeaways

A favicon is redrawn for 16 pixels, not scaled down from the full logo.
Use the symbol or one letter; a wordmark is unreadable in a browser tab.
Test in light and dark tabs, bookmarks, history and with twenty tabs open.
An SVG favicon can switch colors for dark mode with a media query.
Ship four file types: SVG, ICO, Apple touch icon and web manifest icons.

Part of Logo Design for Startups: The Complete Guide

How do you design a favicon from your logo?

You design a favicon from your logo by picking the one element that still reads at tiny sizes, redrawing it for a square grid and testing it where favicons actually appear. Favicons are shown at 16 to 32 pixels in tabs, bookmarks and history, and larger as home screen and search result icons. The design has to hold up at the smallest of those.

Your favicon is one of the most-seen brand assets you have. It sits in every tab a prospect keeps open while they compare you with competitors, and it appears beside your site in Google's mobile results. Yet it's often the last thing anyone designs. For the full picture of building a startup logo that works at every size, see our logo design guide for startups.

What makes good favicon design?

Good favicon design is bold, simple and high-contrast: one shape or letter, filling most of the square, with no fine detail. It should be recognizable when it's blurry, because at 16 pixels it always is, and it should stand out from the white, gray and colorful icons in the tabs around it.

One element. Your symbol, a letter or a simplified piece of the mark. Never the full horizontal logo.
Thick shapes. Strokes thinner than about two pixels at 16 pixel size disappear.
Fill the square. Small marks floating in padding look weak next to other favicons.
Contrast against both themes. Browser tab bars can be light or dark, so a black mark on transparent can vanish.
Brand color, used carefully. A solid brand-colored background square often makes the mark easier to find.

If your logo has nothing that works this small, that's a sign it fails one of the basic tests in our 10 tests every logo should pass. Wordmark-only logos are the usual culprit, which is one reason many startups add a symbol. Our guide to wordmark vs logomark vs combination mark covers that choice.

How do you make a favicon step by step?

Make a favicon by designing at the smallest size first, then building up the files. You need a vector editor, such as Figma, and a browser for testing.

Choose the element
Pick the symbol, the first letter of your wordmark or a distinctive detail. Try two or three candidates side by side at real size before committing.
Draw on a 16 and 32 pixel grid
Set up 16 by 16 and 32 by 32 frames and redraw the mark so key edges land on whole pixels. Thicken strokes and open up gaps that would fill in.
Decide on a background
Choose between a transparent background or a solid shape, such as a rounded square in your brand color. Solid backgrounds are safer across light and dark tabs.
Make a dark mode version
If you use a transparent background, create a light version of the mark for dark tab bars. An SVG favicon can switch automatically.
Test in real contexts
Load it on a staging site and run the test set below before exporting final files.
Export and add to your site
Export the files listed in the next section and reference them in your site's head, or use your framework's built-in icon conventions.

How do you test a favicon?

Test a favicon by viewing it in every place browsers show it, in both light and dark modes, and among other sites' icons. A favicon that looks fine on its own in a design file can disappear next to real tabs.

Test	How to run it	Pass if
Crowded tab bar	Open your site among 15 to 20 other tabs	You can find your tab instantly
Dark mode tabs	Switch your browser and OS to dark mode	The mark is still clearly visible
Bookmarks bar	Bookmark the site and view the bar	It's recognizable without the page title
Pinned tab	Pin the tab so only the icon shows	It still looks like your brand
Mobile home screen	Add the site to a phone home screen	The Apple touch icon looks sharp and fills the shape
Search results	Search your brand on mobile	The icon matches your brand and isn't a default globe

Which favicon files and sizes do you need?

Most sites need four favicon files in 2026: an SVG favicon for modern browsers, a 32 pixel ICO file as a fallback, a 180 by 180 pixel Apple touch icon for iOS home screens and 192 and 512 pixel PNG icons in a web app manifest for Android and installable sites. That small set covers almost every browser and device.

File	Size	Used for
favicon.ico	32 x 32 px (can include 16 x 16)	Fallback for older browsers and tools that look for it by default
icon.svg	Vector	Modern browser tabs; can switch colors for dark mode
apple-touch-icon.png	180 x 180 px	iOS home screens and some bookmark views
icon-192.png and icon-512.png	192 and 512 px	Web app manifest, Android home screens and installable sites

Google Search shows favicons in results and recommends a square icon that's a multiple of 48 pixels, so make sure at least one of your icons meets that. Google's favicon guidelines for Search list the current requirements. If you build with Next.js, the metadata file conventions let you drop icon files into the app folder and generate the tags for you.

How to make an SVG favicon switch for dark mode

An SVG favicon can include a style block with a prefers-color-scheme media query. Inside it, you set the mark's fill to a dark color by default and to a light color when the user's system is in dark mode. Browsers that support SVG favicons apply the right version automatically.

This only works for transparent-background favicons. If your favicon sits on a solid brand-colored square, you usually don't need a dark mode version at all, which is one reason solid backgrounds are a practical choice for startups.

Should your favicon match your logo?

Your favicon should be clearly recognizable as your brand, but it doesn't need to be an exact copy of your logo. It's usually the symbol on its own, the first letter or a simplified version of the mark. What matters is that people who know your logo connect the two instantly.

The favicon, app icon and social avatar should all use the same compact mark. When they don't match, the brand looks inconsistent in exactly the places people see it most. If your logo is about to change, plan the favicon as part of the logo redesign rather than as an afterthought. And if you're using an AI tool to make a logo, check whether its output gives you anything usable at 16 pixels. Our comparison of AI logo generators vs hiring a designer explains where they tend to fall short.

If you're starting your logo from scratch, our guide to the types of logos explains which kinds give you a strong small-size mark from day one.

Frequently asked questions

What size should a favicon be?: Design for 16 and 32 pixels, since that's how favicons appear in browser tabs. For files, ship a 32 pixel ICO fallback, a scalable SVG, a 180 by 180 pixel Apple touch icon and 192 and 512 pixel PNGs for the web manifest. Google Search recommends a square favicon that's a multiple of 48 pixels, so the larger PNGs also cover search results.
Why isn't my favicon showing in Google search results?: Google needs to crawl your home page and favicon, and the icon must be square, follow its guidelines and be allowed by your robots rules. Changes can take a while to appear, because Google recrawls favicons on its own schedule. Check that the favicon link is in your home page's head and that the file loads without errors at a stable URL.
Can a favicon be animated?: Some browsers support animated GIF favicons, but support is inconsistent and they can feel distracting, especially in a crowded tab bar. A few sites change their favicon dynamically, such as adding a notification dot. For most marketing sites, a static favicon that's easy to recognize is the better choice. Save animation for the logo on the website itself.
Should my favicon have a transparent background?: It can, but it's riskier. A transparent favicon with a dark mark can disappear in dark mode tab bars, so you'll need a dark mode variant, often handled inside an SVG. A solid background shape, like a rounded square in your brand color, looks consistent everywhere and usually makes the favicon easier to spot among other tabs.
Do I still need a favicon.ico file?: It's still worth including. Modern browsers prefer SVG or PNG icons when you declare them, but some older browsers, feed readers and tools still look for favicon.ico at the root of your domain by default. A single 32 pixel ICO file is small and avoids errors in server logs and missing icons in tools you don't control.

Mehdi Hassan · CEO & Design Director

Copywriter, designer and developer, and founder of Designify Studio. Over five years, 60+ projects across 14+ industries, for startups that have raised $300M+.

Want this done for you? Website, $8,000.

A multi-page marketing site, designed by us, developed in Next.js and animated. $8,000, one-time, up to 6 pages. Book a free 30-minute call to see if it fits.

Schedule Call