How to create a favicon
- Upload a square logo or icon. Non-square images are center-cropped.
- Choose a transparent or solid background, add padding and round the corners if you like.
- Click Download favicon package to get a ZIP with every size.
- Upload the files to your website’s root and paste the HTML snippet into your
<head>.
Favicon design tips
- Use one letter or a simple symbol from your logo rather than the full logo with text.
- Check how it looks at 16px in the preview; that is the size shown in browser tabs.
- Use a solid background for the Apple touch icon, since iOS shows transparent areas as black.
Need to prepare the image first? Use the Image Cropper to make it square, and the Color Converter to match brand colors.
Which favicon files do I really need?
For a modern website the essentials are a favicon.ico (still used by some browsers and when bookmarks are saved), a 32×32 PNG for browser tabs, a 180×180 Apple touch icon for iPhone and iPad home screens, and 192×192 and 512×512 icons referenced from a web manifest for Android and installable web apps. This generator creates all of them plus the manifest and HTML, so you don’t need to think about individual sizes.
Adding the favicon to WordPress, Shopify and others
- WordPress: go to Appearance → Customize → Site Identity → Site Icon and upload the 512×512 PNG; WordPress creates the other sizes.
- Shopify: Online Store → Themes → Customize → Theme settings → Favicon, and upload the 512×512 PNG.
- Static sites and custom builds: upload all files from the ZIP to the root folder and paste the HTML snippet into the
<head>.
Favicons and search results
Google shows your favicon next to your site in mobile search results. It must be a multiple of 48×48 pixels, visually represent your brand, and be crawlable. The 48×48 PNG and the 192×192 Android icon from this package both meet those requirements, and the generated HTML points search engines to them.
SVG favicons
Modern browsers also support SVG favicons, which stay sharp at any size and can even adapt to dark mode. If your logo is an SVG, you can add <link rel="icon" href="/favicon.svg" type="image/svg+xml"> alongside the PNG and ICO files from this package.
Testing your favicon
After uploading the files, open your site in a private browser window to bypass the cache, check the tab icon, add the site to your phone’s home screen to see the touch icon, and paste your URL into a link preview tool to confirm everything is found.
Frequently asked questions
What sizes are included?
favicon.ico (16, 32 and 48px), PNG favicons at 16, 32 and 48px, a 180px Apple touch icon, Android/PWA icons at 192 and 512px, a site.webmanifest, and the HTML code.
What image should I use?
A square PNG or SVG of at least 512×512 pixels with a simple, bold shape. Fine details and small text disappear at 16px.
Where do I put the files?
Upload all files to the root folder of your website (where index.html is) and paste the HTML snippet inside the <head> of every page.
Why is my new favicon not showing?
Browsers cache favicons aggressively. Hard refresh, open the site in a private window, or add a version query like /favicon.ico?v=2.