BRAND BASICS · 2026
What is a favicon (and what size should it be)?
The little icon in your browser tab: what it is, where it shows up, the exact sizes and formats that work in browsers, on phones and in Google, how to make one from your logo, and how to add it to your website.
Free to build · Pay when you publish · No credit card
The short answer
A favicon is the small square icon that sits beside your website's name in a browser tab, in bookmarks and, often, next to your listing in Google's search results. Make it a square PNG of at least 48 × 48 pixels — most sites ship a 32 × 32 for tabs and a 180 × 180 for iPhone home screens — and use one simple mark from your logo, not the whole logo.
The word is short for "favorite icon": it started as the picture beside a page in your browser's favorites. Today it is the small piece of your brand that follows your business around: the tab, the bookmark, the home-screen shortcut, the Google result. A site without one gets a blank globe or the first letter of its address, which reads as unfinished next to competitors who have one.
Don't have a logo yet? Make one with the free logo maker, whose download includes a square icon version ready to be a favicon. Still choosing a name? The business name ideas pages come first.
Favicon included
See your website, favicon and all
Add what you do, your town and your business name, and Zarla builds the site from that one line in about 30 seconds. Add your logo and the favicon is made from it; until then your initials sit in the tab in your brand color.
Already have a website? Bring it across →Zarla keeps your old page addresses where it can and redirects the ones that change, helping you keep the Google standing you've built.
Where your favicon shows up
Once it is on your site, the same small image appears in five places, and in four of them it is the only picture of your brand the visitor can see:
- The browser tab. Beside your page title, on every page of your site. With ten tabs open, it is how a customer finds yours again.
- Bookmarks and history. When a visitor saves your site or scrolls back through what they looked at, the icon sits beside the name.
- Google's search results. Google can show a site's favicon beside its name above the result. Google says a favicon isn't guaranteed to appear even when every guideline is met, but a listing without one gets a generic globe.
- A phone's home screen. When someone adds your site to their iPhone or Android home screen, the larger touch icon becomes the app-style tile.
- Link previews and shortcuts. New-tab shortcut pages, some chat apps and some reading-list apps pull the favicon in beside the link.
FAVICON SIZES · OCTOBER 2026
What size should a favicon be?
Each place that shows a favicon has its own ideal size. You don't make them all by hand: start from one square image of at least 512 × 512 pixels and let your website builder or a favicon generator cut the sizes. Sources are listed at the foot of the page.
| Size (pixels) | Where it's used | Notes |
|---|---|---|
| 16 × 16 | Browser tabs, bookmarks and history on standard screens | The size MDN calls the usual favicon. Browsers scale down from a larger file, so you rarely need to make this one by hand. |
| 32 × 32 | Browser tabs on high-resolution screens | The size Zarla generates for the tab from your logo. Sharp on retina and 4K displays where 16 × 16 looks soft. |
| 48 × 48 or larger | Google Search results | Google accepts a square of at least 8 × 8 and recommends larger than 48 × 48 so it looks good wherever it is shown. One favicon per website. |
| 180 × 180 | iPhone home screens (the Apple touch icon) | Named in the apple-touch-icon link. Apple lists 180 × 180 for iPhone and 167 or 152 for iPad, and iOS picks the best match from the sizes you provide. |
| 192 × 192 and 512 × 512 | Android home screens and installable web apps | Chrome needs at least these two sizes in a web app manifest to offer 'add to home screen' with your icon. |
Formats: PNG works everywhere and is what Google, browsers and phones all accept. ICO is the older format that can hold several sizes in one file; still fine, no longer required. Some newer browsers accept an SVG favicon, but Google's list of supported favicon formats (BMP, GIF, ICO, PNG, JPEG, PPM, TIFF) doesn't include SVG, so always ship a PNG too.
Favicon vs logo: don't just shrink your logo
A favicon is not your logo made small; it is the one piece of your logo that still reads at 16 pixels. A wide logo with your business name in it becomes an unreadable smear in a tab. What survives the shrink is a single shape: the mark, the first letter, the symbol in your logo, or a bold initial on your brand color.
- One shape, no words. Words don't survive at 16 or 32 pixels, which is tab size. If your logo is all words, use the first letter or two.
- Fill the square. Crop tight to the mark with a small margin. A tiny mark floating in a big square disappears.
- Strong contrast. Dark on light or light on dark. Tabs sit on white in one browser and dark gray in another, so a colored background square helps the icon hold up on both.
- Match your logo's color. The favicon is a reminder of the brand, so the brand color does most of the work of recognition.
- Check it at tab size. Zoom out to 16 and 32 pixels before you decide. If you can't tell it from the next tab, simplify it.
STEP BY STEP
How to make a favicon from your logo
Five steps, whichever website builder you use. Ten minutes if you already have a logo file.
Pick the mark
Choose the part of your logo that works alone: the symbol, the monogram or a bold first letter. Leave the business name out; it won't be readable at tab size.
Make it square
Crop to a square with a small margin all around. If the mark is a thin shape, put it on a square of your brand color so it fills the space and stands out in the tab.
Export one large PNG
Save a 512 × 512 PNG (a transparent background is fine, a solid one is safer). Browsers, phones and Google all scale down from a large square; you don't need to draw the small sizes.
Add it to your website
In a website builder, upload it in the site or logo settings and the builder writes the code and the sizes. On a hand-coded site, put the file at your domain's root and add a link tag to every page's head.
Check the tab, the phone and Google
Open your site in a new private window and look at the tab. Add it to a phone home screen. Google picks the new icon up when it next crawls your home page, which can take days to weeks, so don't judge that part the same afternoon.
How a Zarla site gets its favicon
Every published Zarla site has a favicon. Until you add a logo, the tab shows your initials (the first two letters of a one-word name) on a square in your brand color. When you upload a logo — from your site's Overview page or by clicking your business name in the header inside the editor — Zarla makes a 32 × 32 favicon and a 180 × 180 Apple touch icon from it and adds both to every page of the published site. How to add your logo walks through it.
Want a different icon from your logo? In the editor, click your logo, find the Favicon row and choose Replace (it reads Upload custom until a logo or favicon is set): a square PNG, JPG, WebP or SVG up to 2 MB. Reset it and the initials come back.
Made your logo with the free logo maker? Its download pack includes a 512 × 512 square icon PNG of the mark on its own, which is the file to upload as a custom favicon. Wix, Squarespace and GoDaddy also have a favicon setting; the difference is whether you make the small square yourself or the builder does.
Adding a favicon by hand (HTML)
If you code your own site, put the files on your domain and add the links inside every page's <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Google reads rel="icon", rel="shortcut icon", rel="apple-touch-icon" and rel="apple-touch-icon-precomposed", and it wants both the icon file and your home page to be crawlable, so don't block them in robots.txt. For the Android home screen, add a web app manifest listing 192 × 192 and 512 × 512 icons. If you'd rather not touch code, a website builder does all of this for you.
Favicons and Google
Google's rules for the favicon it shows beside your result, from its own guidelines: a square image of at least 8 × 8 pixels, larger than 48 × 48 recommended; a supported format (PNG is the safe one); one favicon per site, taken from the home page; both the icon and the home page crawlable. Google adds that a favicon isn't guaranteed to appear even when all of that is true.
Nothing in those guidelines ties the favicon to ranking. Its job is recognition: in a results page where every listing is the same blue text, the small colored mark beside your name is what a returning customer spots first. The same icon is what makes your site look finished next to a competitor's blank globe.
Favicons: common questions
A favicon is the small square icon that represents a website in the browser tab, in bookmarks and history, on phone home screens and beside the site's name in Google's search results. It is usually one simple shape taken from the logo.
Start from one square image of at least 512 × 512 pixels and let your website builder or a favicon generator make the sizes: 32 × 32 for browser tabs, 48 × 48 or larger for Google, 180 × 180 for iPhone home screens and 192 × 192 plus 512 × 512 for Android. Google's minimum is 8 × 8 and it recommends larger than 48 × 48.
PNG. It works in every browser, on phones and in Google. ICO is the older format and still works. An SVG favicon works in some newer browsers, but Google's list of supported formats doesn't include SVG, so ship a PNG as well if you use one.
Yes, for the same reason you'd put a logo on your van: it makes your site recognizable in a tab, a bookmark and a Google result, and a site without one shows a blank globe or a plain letter. With Zarla it's automatic: your initials in your brand color until you add a logo, then an icon made from the logo.
Take the mark or the first letter from your logo, crop it to a square with a small margin, put it on your brand color if it's thin, and export a 512 × 512 PNG. Upload that in your website builder's site or logo settings. Zarla's free logo maker includes a square icon PNG in every download for exactly this.
In a website builder, upload the square image in the site or logo settings and the builder adds the code to every page. On a hand-coded site, place the files on your domain and add a link rel="icon" tag and an apple-touch-icon tag in each page's head. On Zarla, upload your logo and the favicon is made from it; or click your logo in the editor and upload a custom one.
Three usual causes. Your browser cached the old one: open the site in a private window. Google hasn't re-crawled your home page yet: it updates favicons when it next visits, which can take days or weeks. The file or your home page is blocked from crawlers, or the image isn't square: check robots.txt and the image size.
Yes. Every published Zarla site carries one: your initials (or the first two letters of a one-word name) on your brand color until you upload a logo, then a 32 × 32 favicon and a 180 × 180 Apple touch icon made from the logo. You can replace it with a custom square image at any time in the editor.
Where the sizes come from
The sizes and rules on this page are read off the publishers that set them, dated below. Related: the free logo maker, business name ideas, how to trademark a logo and Zarla's small business website builder.
- Google Search Central — Define a favicon to show in search results — dated 28 August 2026, read 24 October 2026
- MDN Web Docs — Favicon — dated 11 July 2025, read 24 October 2026
- Apple — Safari Web Content Guide: Configuring Web Applications — dated 12 December 2016, read 24 October 2026
- web.dev — Add a web app manifest — dated 18 September 2024, read 24 October 2026
Your website comes with its favicon
Describe your business in one line and Zarla builds the whole site: pages, words, photos and the Google setup. Upload your logo and the favicon and the iPhone icon are made from it. Build and preview free; pay when you publish.
Already have a website? Bring it across →Zarla keeps your old page addresses where it can and redirects the ones that change, helping you keep the Google standing you've built.