How to make a favicon for your website
Which icon files a website actually needs today, what sizes and how to make the whole set from one image, including the HTML to paste into your page.
A favicon is the small icon in a browser tab, a bookmark and search results. It is also the icon on a phone’s home screen when someone saves your site and the icon a browser shows when your site is installed as an app. Each of those places wants a different size, which is why a modern favicon is a set of files rather than one.
What a site needs
- favicon.ico with 16, 32 and 48 pixel versions inside it. Browsers request this automatically and it covers tabs and bookmarks.
- apple-touch-icon.png at 180 by 180 pixels, for iPhone and iPad home screens. iOS ignores transparency here and fills it with black, so this one needs a solid background.
- 192 and 512 pixel PNGs listed in a web app manifest, for Android home screens and installed web apps.
- Optionally an SVG icon, which modern browsers scale perfectly and which can change colour in dark mode.
Making the set
The favicon generator takes one square image and produces every file, along with the manifest and the lines of HTML to paste into your page’s head. It gives the iPhone icon a solid background automatically and leaves the tab icon without padding, since at 16 pixels every pixel counts. If you only need the .ico, PNG to ICO builds that single file.
Designing for 16 pixels
Start from a simple, bold shape. Fine lines, small text and detailed logos turn to mush at tab size. Many brands use a simplified mark or a single letter for the favicon while keeping the full logo elsewhere. Look at your icon at actual size before committing to it; zoom out until it is the size of a tab icon on your screen.
Match your brand colours exactly: the colour palette tool reads the hex codes from your logo and the manifest’s theme colour should use the same value.
Other formats
For icons embedded directly in CSS or HTML, such as a tiny icon in an email template, image to base64 produces a data URI. For choosing between PNG, SVG, JPG and WebP generally, see which image format should I use.
Common questions
Do I still need a favicon.ico?
It is still the most dependable single file. Browsers request /favicon.ico automatically, even with no HTML pointing to it and it covers bookmarks and older software. Most sites pair it with larger PNG icons declared in the HTML.
What size should a favicon be?
There is no single size. A favicon.ico holding 16, 32 and 48 pixel versions covers browser tabs, a 180 pixel PNG covers iPhone home screens and 192 and 512 pixel PNGs cover Android. Google recommends a favicon that is a multiple of 48 pixels square for search results.
Can I use an SVG favicon?
Most modern browsers support one and it can even switch colour for dark mode. Keep a favicon.ico and PNG icons as well, because support isn’t universal.
Why does my favicon not update?
Browsers cache favicons aggressively. Clear the cache, open the icon's address directly or give the file a new name or a version query such as favicon.ico?v=2.