How to use the Favicon Generator
- Upload a square image or logo, or switch to "Text" and type letters or an emoji.
- Adjust background colour, padding and corner rounding. Previews update instantly.
- Click "Download favicon package" to get a ZIP with all the files.
- Upload the files to your website's root folder and paste the HTML snippet into your page's <head>.
What files does a modern website need?
Browsers, phones and search engines each look for different icon files. The package includes favicon.ico (16, 32 and 48 px for browser tabs and Google search results), apple-touch-icon.png (180 px for iPhone home screens), android-chrome-192x192.png and 512x512.png for Android and installable web apps, plus site.webmanifest that ties them together.
Tips for a great favicon
At 16×16 pixels, detail disappears. Use a simple, bold symbol or one or two letters rather than your full logo with text. Strong contrast with a solid background makes the icon stand out in a row of browser tabs.
Frequently asked questions
What image should I upload?
A square PNG or SVG of at least 512×512 pixels works best. Non-square images are centred automatically.
Does this work for WordPress, Laravel, Shopify and others?
Yes. The files are standard. Upload them to your site's root (or use your platform's "Site icon" setting) and add the HTML snippet if your platform allows it.
Why doesn't my new favicon show up?
Browsers cache favicons aggressively. Hard-refresh the page (Ctrl/Cmd + Shift + R) or open it in a private window to see the new icon.