Free Favicon Generator

What is a favicon?

A favicon is the small square picture next to your page title in a browser tab. Browsers also use it in bookmarks and history, phones use a bigger version when someone adds your site to their home screen, and Google can show it next to your site in search results (Google decides whether to show it). A site without one gets the browser's plain default icon (often a grey globe), which looks unfinished.

The files, and what each one is for

Tips for a favicon people recognise

• Keep it simple. At 16 px there is room for one or two letters or one bold shape. A full logo with small words turns into a blur: use just the symbol part, or your initials.
• Use strong contrast, like white letters on a dark colour. Check the dark tab in the preview: a see-through icon with dark letters can almost vanish there.
• Match your brand colour, so people connect the tab with your sign, your menu or your van.
• Emoji are fine for a start. They are drawn with your device's emoji style (Apple, Google and Microsoft emoji look a bit different), and the downloaded files keep the style you see here.
• The iPhone icon is always a full square on your background colour: iPhones round the corners themselves and show see-through parts as black, so this tool doesn't cut it into a circle.

How to add it to your website

Exact menu names can change, so if a button has moved, search your website builder's help pages for “favicon” or “site icon”.

Plain HTML (you or your web person edit the files)

1. Download the files above and upload them to the main folder of your website (often called public_html, www or the folder with your home page), so that yourbusiness.com/favicon.ico opens the icon.
2. Copy the HTML code above and paste it inside the <head> of every page (or of your page template), next to the other <link> lines.
3. Open your site in a new private window to check it. Old favicons are kept by browsers for a while, so a normal window may still show the old one.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

WordPress (Site Icon)

WordPress calls the favicon the Site Icon and makes all the sizes itself, so you only need one file: android-chrome-512x512.png (WordPress asks for a square image of at least 512 × 512 px).

1. WordPress 6.5 or newer: go to Settings, then General, and choose your image under Site Icon. Save the changes.
2. Older WordPress: go to Appearance, then Customize, then Site Identity, and choose the image under Site Icon. Click Publish.

You don't need to paste the HTML code on WordPress. If your theme or an SEO plugin has its own favicon setting, use one place only.

Wix (favicon setting)

On Wix, a custom favicon needs a Premium plan, a connected domain of your own and a published site; until then, Wix shows its own icon.

1. In your site's dashboard, go to Settings, then Website settings.
2. Under Favicon, click to upload an image.
3. Upload android-chrome-192x192.png (or favicon.ico). Wix asks for a square image whose size is a multiple of 48 px, and 192 px is 4 × 48.
4. Publish your site again if Wix asks you to.

Other website builders

Squarespace, Shopify, GoDaddy and most others have a favicon or site icon setting in their site or theme settings. Upload android-chrome-512x512.png unless they ask for a different size.

My new favicon doesn't show. Why?

• The browser remembers the old one. Open the site in a private window, or on another device. It can take a few days for every visitor's browser to pick up the new icon.
• The files are in the wrong folder or have different names. Open yourbusiness.com/favicon.ico in a browser: you should see the icon.
• Google search results update slowly. Google reads your favicon again on its own schedule, so the icon in search results can take days or weeks to change, and Google may choose not to show it.

What this tool does, and its limits

• Runs in your browser. Letters, emoji and uploaded images are drawn on your device; nothing is uploaded to FlatRateChat or stored.
• Makes a favicon.ico whose 16, 32 and 48 px images are stored as PNG inside the file. Every current browser reads this kind of ICO file, and so does Windows (since Windows Vista); some very old programs may not.
• Fonts and emoji come from your device, so the same letters can look a little different on another computer. Once downloaded, the files look the same everywhere.
• Some SVG files can't be drawn by every browser. If yours doesn't show, save it as a PNG and upload that.
• It doesn't check your live website. Use only logos and images you have the right to use.
• Also free: the Broken Link Checker tests every link on your pages.
• Also free: the Sitemap Generator makes an XML sitemap of your pages and checks the one you have.
• Also free: the Google Maps Embed Generator makes the code to show your business on a Google map on your website.
• Also free: the WhatsApp Link Generator makes WhatsApp, click-to-call and text links, website buttons and a QR code.
• Also free: the Google Review Link Generator turns your Google review link into a QR code, a printable sign and ready-to-send messages.
• Also free: the Website Down Checker checks from our server whether a website answers right now, and why not.
• Also free: the Redirect Checker shows every redirect a web address goes through, step by step.
• Also free: the SSL Checker checks that your site opens securely on https and shows its certificate details.
• Also free: the Robots.txt Checker reads your robots.txt and shows whether it blocks Google, AI crawlers or your sitemap.
• Also free: the Robots.txt Generator makes a robots.txt file for your website and checks it as you type.
• Also free: the Website Accessibility Checker scans one page for common accessibility problems, like images without alt text and form fields without labels.
• Also free: the Meta Tag Checker shows the title, description and other tags Google reads on a page, with a search preview.
• Also free: the Open Graph Checker shows how a page will look when shared on Facebook, LinkedIn and X, and checks its og:image.
• Also free: the UTM Builder adds campaign tags to your links so Google Analytics shows which post, email or flyer brought each visitor, with a QR code.
• Also free: the Local Business Schema Generator makes local business schema code for your website, with your address, phone and opening hours.
• Also free: the Business Hours Sign Maker makes a printable business hours or holiday hours sign for your door, plus a square image for social posts.

Questions