Favicon Generator

A favicon is the small icon that appears in browser tabs, bookmarks, phone home screens and, increasingly, next to your site in Google's mobile search results. Our free favicon generator creates the full set of files a modern website needs from a single image, or from one or two letters if you do not have a logo yet. Upload a PNG, JPG or SVG, adjust the padding and background, and download a ZIP containing favicon.ico, PNG icons from 16 to 512 pixels, an Apple touch icon, a site.webmanifest and the HTML link tags to paste into your site. Everything is generated in your browser.

How to use the Favicon generator

1. 1 Upload your logo or type lettersAdd a square or nearly square PNG, JPG or SVG. No logo yet? Type one or two letters, such as your initials, and choose the text and background colours.
2. 2 Adjust padding and backgroundAdd padding so the icon is not cramped against the edges, and choose a background. A solid background helps icons stay visible on home screens and in dark mode tabs.
3. 3 Check the small sizesLook closely at the 16 and 32 pixel previews. If detail disappears, simplify: use just the symbol from your logo, or your initials.
4. 4 Download the ZIPThe ZIP contains favicon.ico, the PNG icons, apple-touch-icon.png, the 192 and 512 pixel icons, site.webmanifest and the HTML tags.
5. 5 Upload the files and add the tagsPut the files in the root folder of your website and paste the link tags into the head section of every page, or into your theme or site builder's header settings.

Why your website needs a proper favicon

People rarely notice a good favicon, but they notice a missing one. A blank or default icon in a browser tab looks unfinished and makes your site hard to find among a dozen open tabs. A clear icon helps returning visitors spot you in their bookmarks and history.

It also matters in search. Google shows a favicon beside each result in mobile search, so it is one of the few parts of a search listing you control visually. Google Search Central asks for a square icon that represents your brand and recommends it be larger than 48 x 48 pixels, which is why the generator includes 48 and 96 pixel versions as well as the larger icons.

When someone adds your site to their phone home screen, the operating system uses the Apple touch icon or the manifest icons. Without them, a phone falls back to a screenshot or a generic letter, which looks far less professional for a business site.

What is in the favicon package

Different browsers and devices look for different files. The generator produces a complete, modern set without the dozens of legacy sizes older generators used to output:

• favicon.ico containing 16, 32 and 48 pixel images. Browsers request /favicon.ico automatically, so this works even without any HTML tags, and it covers older software.
• PNG icons at 16, 32, 48 and 96 pixels for browser tabs, bookmarks and high-resolution screens.
• apple-touch-icon.png at 180 x 180 pixels, used by iPhones and iPads when a site is saved to the home screen.
• PNG icons at 192 and 512 pixels, referenced by the web manifest and used by Android home screens and installed web apps.
• site.webmanifest, a small JSON file that tells browsers your site name, icons and colours.
• The HTML link tags that point browsers to all of the above.

Designing an icon that works at 16 pixels

At 16 x 16 pixels, an icon has 256 pixels in total. Full logos with wording, fine lines or a strapline turn into a smudge. The most recognisable favicons use one bold shape or one or two letters with strong contrast.

If your logo has a symbol alongside the name, use the symbol on its own. If it is text only, try the initial letter or the two-letter option with your brand colours. A solid background colour often helps, because a transparent icon with dark lines can disappear on a dark browser theme, and a light one can vanish on a white tab bar.

Padding gives the icon breathing room. Edge-to-edge artwork looks cramped in browser tabs and can be clipped on home screens, where some devices apply rounded corners or circular masks. A little padding keeps the important part safely inside.

Start with the best source you have. An SVG or a large square PNG of at least 512 pixels gives the cleanest results across every size. A small, blurry JPG will look blurry everywhere.

Adding the favicon to WordPress, Shopify and other platforms

On a site where you control the files, upload everything from the ZIP to the root folder, the same folder that holds your homepage, so that yoursite.co.uk/favicon.ico loads in a browser. Then paste the link tags inside the head section of your page template.

Hosted platforms usually have their own setting. In WordPress, go to Appearance, then Customise, then Site Identity and set the Site Icon. Shopify, Squarespace and Wix each have a favicon option in their theme or site settings. These platforms generate their own sizes from the image you give them, so upload the 512 pixel PNG from the ZIP.

If you also want the manifest and Apple touch icon on a platform that does not create them, check whether it lets you add custom code to the header and upload files to the root; many do not, and that is fine for most small business sites.

Why your new favicon is not showing

Browsers cache favicons aggressively, sometimes far longer than the rest of a page. After uploading a new icon, open the site in a private window or another browser, or visit /favicon.ico directly and refresh it. If the old icon persists, clearing the browser cache usually fixes it.

Google updates the favicon in search results only when it recrawls your homepage, so the change can take days or weeks. Make sure your robots.txt does not block the favicon files or the homepage; our free robots.txt tester will confirm it.

Also check that the file paths in your link tags match where you uploaded the files. A favicon uploaded to a subfolder but referenced from the root is one of the most common causes of a missing icon.

Generated privately in your browser

Your logo is processed on your device using your browser's own graphics tools. It is never uploaded to MakeItFlow, which is useful when you are preparing a rebrand before it goes public or working on a client's identity. Once your icons are live, our free website audit checks the wider technical basics of your site, from page speed to SEO and security.

Checking your new favicon is working

After you upload the files and add the HTML tags, open your site in a private browser window. Browsers cache favicons aggressively, so your normal window may keep showing the old icon for days. You can also open yoursite.co.uk/favicon.ico directly to confirm the file is live.

On a phone, add the site to your home screen to check the Apple touch icon and the manifest icons. In search results, Google refreshes favicons when it next crawls your home page, which can take anything from a few days to a few weeks, so a missing icon straight after launch is normal.

• Clear the browser cache or use a private window when checking.
• Confirm each file loads at the URL used in your link tags.
• Keep the files at the same URLs once Google has picked them up.

Examples you can copy

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

{
  "name": "Example Bakery",
  "short_name": "Bakery",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

favicon.ico (16/32/48)   browser tabs, automatic /favicon.ico requests
PNG 16, 32               browser tabs and bookmarks
PNG 48, 96               high-resolution screens, search results
apple-touch-icon 180     iPhone and iPad home screen
PNG 192, 512             Android home screen, installed web apps

magick logo-512.png -define icon:auto-resize=48,32,16 favicon.ico

Common mistakes to avoid

Frequently asked questions