How to create a favicon
- Choose a source: upload your logo, or create a simple icon from one to three letters with your brand colours.
- Adjust the padding if your logo touches the edges.
- Check the previews at real sizes — the 16 px version is what appears in most browser tabs.
- Download the ZIP, upload its files to the root folder of your website (the same folder as your home page), and paste the HTML code into the
<head>section of your pages.
What’s in the favicon package
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | All browsers, Windows shortcuts, Google search results |
| favicon-32x32.png / favicon-16x16.png | 32 / 16 px | Modern browser tabs |
| apple-touch-icon.png | 180 px | iPhone and iPad home-screen bookmarks |
| android-chrome-192x192.png / 512x512.png | 192 / 512 px | Android home screen and installable web apps |
| site.webmanifest | — | Tells Android which icons to use |
Why your favicon matters
- Google search results show your favicon next to your site name on mobile and desktop. A clear icon makes your listing look trustworthy and can improve click-through.
- Browser tabs and bookmarks — people with many tabs open find your site by its icon.
- Brand recognition on home screens when visitors save your site.
Google’s guidelines ask for a square favicon that is a multiple of 48 px (48 × 48, 96 × 96 or larger) and that represents your brand. The package here includes larger sizes that satisfy this.
Design tips for small icons
- Simplify. A detailed logo becomes a blur at 16 pixels. Use just the symbol or first letter of your brand.
- Use strong contrast so the icon stands out on both light and dark browser themes.
- Start large. Upload a source image of at least 512 × 512 pixels; small sources look blurry when scaled.
- Use transparency carefully. A transparent icon with dark lines may disappear in dark mode — a solid background shape is safer.
Not updating?
Browsers cache favicons aggressively. After uploading new files, open the icon URL directly (yourdomain.com/favicon.ico), hard-refresh with Ctrl+F5, or try a private window. Google search results can take days or weeks to show a new favicon.
Frequently asked questions
What size should a favicon be?
Provide several: a favicon.ico containing 16, 32 and 48 px, a 180 px Apple touch icon and 192 and 512 px Android icons. This tool creates all of them.
Where do I upload the favicon files?
Upload them to the root folder of your website (usually public_html), then paste the HTML code into the <head> of your pages. In WordPress, you can instead upload a 512 px icon under Appearance → Customize → Site Identity.
Can I use a PNG instead of .ico?
All modern browsers accept PNG favicons, but favicon.ico is still used by some tools and by Google, so it is best to provide both.
Why is my favicon not showing in Google?
Google needs to recrawl your home page, which can take time. Make sure the favicon is not blocked by robots.txt and is at least 48 × 48 px.