How to make a favicon for your website
A favicon has to read at 16 px in a browser tab and still look sharp as a 180 px home-screen icon or a 512 px install icon. One file can't do all of that well, so the generator makes each size from one large, clean square.
- Drop your logo, ideally a PNG with a transparent background or an SVG at 512 px or larger. A sample logo is already loaded so you can see the result first.
- Or switch to “Letter or emoji”, type 1 to 3 characters and pick colours and a shape.
- Check the 16 px and 32 px versions in the tab preview on light and dark, and adjust padding or shape until the icon reads clearly.
- Click “Download favicon package (ZIP)” and upload all the files to the root of your site.
- Copy the HTML snippet into the head of your home page and other pages, then check in a private window.
Which favicon files you need, and who asks for each (October 2026)
| File | Size | Why it's in the package |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | When a page has no <link rel="icon">, browsers may request /favicon.ico from the site root on their own (HTML Standard). Google Search accepts ICO. The three sizes inside are our choice, not a published requirement. |
| favicon-96x96.png | 96×96 | Google needs a square favicon of at least 8×8 px and recommends one larger than 48×48 px. 96 px is our pick: twice 48. |
| favicon-32x32.png | 32×32 | Shopify says the ideal favicon is 16×16 or 32×32 px and shrinks larger uploads to 32×32. |
| apple-touch-icon.png | 180×180 | Apple: a PNG named apple-touch-icon.png in the site root is used as the home-screen icon for the whole site. 180×180 is the iPhone Retina size in Apple's example markup. |
| web-app-manifest-192x192.png and -512x512.png | 192×192 and 512×512 | web.dev: for Chromium, you must provide at least a 192×192 and a 512×512 icon. Chrome also uses them for the splash screen. |
| site.webmanifest | JSON | Lists the two icons with src, sizes and type, which web.dev says each icon entry must include. |
Sources, checked October 23, 2026: Google Search Central, “Define a favicon to show in search results”; HTML Standard, link type “icon”; web.dev, “Add a web app manifest”; Apple Safari Web Content Guide, “Configuring Web Applications” (archived); Shopify Help Center, “Adding a favicon to your store”. Gridloom is not affiliated with Google, Apple, Shopify, WordPress or Squarespace.
Favicon size for Google Search, and the “multiple of 48” rule
Google's page says the favicon must be square (1:1) and at least 8×8 px, and recommends going larger than 48×48 px so it looks good on various surfaces. It lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported formats. SVG and WebP are not on that list, so even if you use an SVG favicon in the browser, keep the ICO and PNG for Google. Some guides still say Google needs a multiple of 48 px; Squarespace's help page says so too. Google's current page doesn't say that. The 48 px frame in the ICO and the 96 px PNG meet both readings anyway.
Why your favicon isn't showing in Google
Google's checklist, in short: the <link rel="icon"> tag must be on your home page; there is one favicon per hostname, so example.com/shop can't have its own but shop.example.com can; Googlebot must be able to crawl the home page and Googlebot-Image must be able to crawl the icon file; the icon URL should stay stable. Recrawling can take from several days to several weeks, and you can ask for it with the URL Inspection tool in Search Console. Even then, Google doesn't guarantee a favicon will show.
Which file to upload on WordPress, Shopify and Squarespace
| Platform | What it asks for | Upload this file |
|---|---|---|
| WordPress (Site Icon) | Square, at least 512×512 px, PNG recommended. Since WordPress 6.5 it is under Settings → General → Choose a Site Icon. | web-app-manifest-512x512.png |
| Shopify | Ideal is 16×16 or 32×32 px. Larger images are reduced to 32×32. Theme settings → Logo or Favicon. | favicon-32x32.png |
| Squarespace | PNG between 100×100 and 300×300 px, no more than 100 KB. .ico files can't be uploaded. | web-app-manifest-192x192.png (the tool shows its size; it is normally far under 100 KB) |
Sources, checked October 23, 2026: WordPress.org, “Create a Favicon”; Shopify Help Center, “Adding a favicon to your store”; Squarespace Help Center, “Add a favicon or browser icon”. On these platforms you don't need the HTML snippet; the platform writes the tags for you.
How to add the favicon to any other site
Unzip the package and upload every file to the root of your site, next to your home page, so https://yoursite.com/favicon.ico opens the icon. Then paste the four lines from the box above into the <head> of your pages. If the icons live in a folder instead, type that folder (for example /icons/) in “Icon folder” first, and the snippet and manifest paths update to match. Browsers cache favicons hard, so check in a private window.
How the generator works
Your logo is decoded in the browser, trimmed to its visible pixels, and centred on a 1024×1024 square with the padding, shape and background you pick. Every size is scaled down from that square in halving steps (1024 → 512 → 256 …) instead of in one jump, which keeps thin lines from breaking up at 16 px. favicon.ico is written by the page itself: three 32-bit images with full transparency, stored in the classic BMP form that every ICO reader understands. The Apple touch icon always gets a solid background, because Apple's guide asks for a PNG but doesn't say how transparent pixels are shown on the home screen.
Also useful: the Discord emoji maker (128×128 under 256 KB), the Twitch emote resizer and the image compressor for logos that are too heavy for an upload form.
Frequently asked questions
What size should a favicon be?
There isn't one size. Google needs a square icon of at least 8×8 px and recommends larger than 48×48 px. Browsers use favicon.ico (this tool packs 16, 32 and 48 px into it), iPhones use a 180×180 apple-touch-icon.png, and Chromium needs 192×192 and 512×512 icons in the web app manifest. This generator makes all of them from one image.
Do I still need a favicon.ico file?
It's still worth having. The HTML Standard says that when a page has no icon link, browsers may fetch /favicon.ico from the site root by themselves, and Google Search accepts ICO. Put favicon.ico in your root folder even if you also link PNG icons.
Can I use an SVG or WebP favicon?
You can add an SVG favicon for browsers, but Google Search's supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG and WebP aren't on the list. Keep favicon.ico and a PNG as well. You can upload an SVG logo here and get ICO and PNG files out.
Why is my favicon not showing in Google search results?
Check that the icon link is on your home page, the icon is square and at least 8×8 px (Google recommends over 48×48), and neither the home page nor the icon file is blocked from crawling. Google uses one favicon per hostname, recrawling can take days to weeks, and you can request it with URL Inspection in Search Console. A favicon still isn't guaranteed to show.
How do I make a favicon from text or an emoji?
Click “Letter or emoji”, type 1 to 3 characters, and choose the font, letter colour, background colour and shape. One bold letter on a solid rounded square is the most readable at 16 px. Emoji are drawn with your device's own emoji font, so they look different on Windows, Mac and Android.
What favicon size should I use for WordPress, Shopify or Squarespace?
WordPress asks for a square image of at least 512×512 px (upload web-app-manifest-512x512.png). Shopify says 16×16 or 32×32 px is ideal and shrinks bigger images to 32×32 (upload favicon-32x32.png). Squarespace wants a PNG between 100 and 300 px, no larger than 100 KB, and doesn't accept .ico (upload web-app-manifest-192x192.png).
Why does my favicon look blurry or unreadable?
At 16 px, a detailed logo or a wordmark turns to mush. Use the symbol without the text, raise the contrast, set padding close to 0 so the art fills the square, and check the 16 px preview on both light and dark tabs. Starting from a large or SVG logo also helps.
Does the favicon keep a transparent background?
Yes. favicon.ico and the 32, 96, 192 and 512 px PNGs keep full transparency unless you pick a solid background. The 180×180 Apple touch icon always gets a solid colour (you choose it), because Apple's guide doesn't say how transparent pixels appear on the home screen.
Is this favicon generator free? Is my logo uploaded?
It's free, with no signup and no watermark: one complete icon set at a time, ZIP included. Your logo is processed in your browser and never uploaded. Gridloom Pro adds batch mode, where several logos become one ZIP with a folder per logo.