How to use the favicon generator
- Upload your logo. Use a square image of at least 512×512 pixels, or an SVG. Simple marks work best because favicons are shown very small.
- Style the icon. Add a background colour and rounded corners, or keep it transparent. Use padding so the logo does not touch the edges.
- Check the previews. See how the icon looks in a browser tab, at every exported size, and on a phone home screen.
- Download and install. Download the ZIP, upload the files to the root of your website, and paste the HTML tags into the head of every page.
Which favicon files do you need?
Modern browsers need surprisingly few files: a favicon.ico for older browsers and tools, a 32×32 PNG, a 180×180 Apple touch icon for iPhone and iPad home screens, and 192×192 and 512×512 icons listed in a web app manifest for Android. If your logo is an SVG, a favicon.svg is also included for crisp tabs at any zoom level.
Why the Apple touch icon has a solid background
iOS fills transparent areas of the Apple touch icon with black and applies its own rounded mask. The generator always gives that icon a solid background with square corners so it looks right on the home screen.
Favicons and SEO
Google shows your favicon next to your site in mobile search results. Its guidelines ask for a square icon that is a multiple of 48px, at a stable URL, that represents your brand. The 48×48 size inside favicon.ico and the larger PNGs cover this.
Frequently asked questions
Where do I put the favicon files?
Upload them to the root folder of your website (the same folder as your homepage, often public_html on cPanel hosting). The HTML tags assume that location.
Why isn't my new favicon showing?
Browsers cache favicons heavily. Open the favicon URL directly, do a hard refresh, or test in a private window. Google can take several weeks to update the icon in search results.
Can I use a non-square logo?
Yes. It is centred and scaled to fit, but a square version of your mark will look better at small sizes.