Favicon Generator
Upload any image — get a favicon.ico, all PNG sizes, and a webmanifest. Free, instant, nothing uploaded.
Drop your image here
or click to browse — PNG, JPG, SVG, WebP
Square images work best. Any size is accepted.
How it works
Upload your image
Drop or pick any PNG, JPG, SVG, or WebP. Square images work best — 512×512 or larger is ideal.
Preview all sizes
Instantly see how your favicon looks at 16, 32, 48, and 180 px on both light and dark backgrounds.
Download & paste
Grab the favicon.ico or the full ZIP. Paste the provided HTML snippet into your site's <head> and you're done.
Frequently asked questions
Why does my website need a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, history, and increasingly in Google search results beside your page title. Without one, browsers show a generic blank icon which looks unprofessional and makes your site harder to find when users have many tabs open. A recognisable favicon also reinforces brand identity every time someone visits your site.
Why is my favicon not showing up on my website?
The three most common causes are: (1) The HTML link tags are missing from your <head> — paste the snippet this tool provides. (2) Browser cache — hard refresh with Ctrl+Shift+R (or Cmd+Shift+R on Mac) to force the browser to reload assets. (3) Wrong file path — make sure favicon.ico is in the root of your site (e.g. https://yoursite.com/favicon.ico), not inside a subfolder. If it still doesn't appear after all three checks, wait a few hours; CDN and DNS caches can take time to clear.
What is the difference between favicon.ico and PNG favicons?
favicon.ico is the original format and is still the safest default — all browsers support it and it can embed multiple sizes (16, 32, 48 px) in a single file. PNG favicons are sharper on high-DPI screens and are required for the Apple Touch icon. The best practice today is to serve both: a favicon.ico for broad compatibility, separate PNG files for modern browsers, and an apple-touch-icon.png for iOS home screens.
Why do I need so many different favicon sizes?
Different devices and contexts use different sizes: 16×16 and 32×32 are used in browser tabs (retina screens use 32), 48×48 is used on the Windows taskbar, 180×180 is the Apple Touch icon shown when someone adds your site to their iPhone home screen, and 192×192 / 512×512 are used for Android PWA icons and splash screens. Providing all sizes ensures your icon looks sharp everywhere rather than being blurry from automatic upscaling.
What is site.webmanifest and do I need it?
site.webmanifest is a small JSON file that tells Android browsers and Chrome how to display your site when it's added to the home screen as a Progressive Web App (PWA). It specifies your app name, short name, icon paths, theme colour, and background colour. You don't need it for basic favicon support, but it is required to get the Android Chrome icon and splash screen looking correct, and it helps Google treat your site as an installable web app.
What image size and format should I start with?
Use a square image of at least 512×512 pixels so all output sizes scale down cleanly without blurring. PNG with a transparent background works best for logos with shapes; a flat coloured square works well for icons that need to look clean at 16×16. Avoid thin lines or fine detail — they disappear at small sizes. SVG input is supported and often gives the sharpest results since the browser renders it at each target size.
How do I add a favicon to WordPress, Shopify, or Webflow?
WordPress: go to Appearance → Customize → Site Identity → Site Icon and upload your image — WordPress handles the resizing. Shopify: go to Online Store → Themes → Customize → then find the Favicon field under Theme Settings. Webflow: open your Project Settings → General tab → find the Favicon & App Icons section and upload your image. For custom HTML sites, upload the files from the ZIP to your root directory and paste the HTML snippet into your <head>.
Is my image uploaded to a server?
No. Everything runs entirely in your browser using the Canvas API. Your image is never sent to any server and never leaves your device. This also means the tool works offline once the page has loaded.