Favicon Generator
Turn any image or logo into a full set of favicon PNGs — every size a browser, phone or web app needs, plus the HTML to paste. Nothing is uploaded.
100% private.Your images are processed entirely in your browser using the Canvas API. Nothing is uploaded to a server — the files never leave your device.
Drop your logo or image here
or click to browse — a square image works best (PNG, JPG, WebP, SVG)
Quick answer
A favicon generatortakes one image and produces the small square icons that show in browser tabs, bookmarks and home-screen shortcuts. Upload a square logo above and this tool renders it at every standard size — 16, 32, 48, 64, 180, 192 and 512 px — then gives you each PNG plus the <link> tags to paste into your site. It is free, needs no sign-up, and everything is built in your browser, so your image stays private.
What is a favicon?
A favicon (short for “favourite icon”) is the tiny image that represents your website. Browsers show it in the tab, next to the address, in the bookmarks list and in your history. On phones it becomes the icon when someone adds your site to their home screen. A clear, recognisable favicon makes your site look polished and helps people spot it among a row of open tabs — a small detail that quietly signals a professional, trustworthy site.
Why you need more than one size
Different places display the icon at different resolutions. A browser tab uses a 16- or 32-pixel icon, Windows reaches for 48 pixels, Apple devices use a 180-pixel apple-touch-icon, and Android and installable web apps (PWAs) use 192- and 512-pixel versions for home screens and splash screens. If you supply only one size, browsers have to stretch or shrink it, which looks blurry. Generating a purpose-built PNG for each size keeps your icon crisp everywhere.
How to install your favicon
Download the PNG set and upload the files to the root directory of your website — the same folder that serves your homepage. Then paste the <link> tags from the box above into the <head> of your HTML template so every page picks them up. After you deploy, do a hard refresh; browsers cache favicons aggressively, so it can take a little while for the new icon to appear.
Tips for a sharp favicon
Start from a squareimage at least 512×512 pixels so the biggest size stays sharp. Keep the design simple — fine detail and small text vanish at 16 pixels, so a bold symbol, monogram or single letter reads far better than a shrunken full logo. Use a PNG with transparency if you want the icon to sit cleanly on any tab colour, and make sure there is strong contrast so it stands out against both light and dark browser themes.
Frequently asked questions
Is my image uploaded to a server?+
No. This favicon generator runs entirely in your browser using the HTML Canvas API. Your image is resized on your own device and never uploaded, stored or seen by anyone — it never leaves your computer.
What image should I upload?+
A square image works best, ideally at least 512×512 pixels so the largest favicon stays crisp. A PNG with a transparent background is ideal for logos. If your image isn't square, it's scaled to fit inside the square and centred, so nothing gets cropped.
Which favicon sizes do I actually need?+
16×16 and 32×32 cover classic browser tabs, 48×48 is used by Windows, 180×180 is the Apple touch icon for iPhones and iPads, and 192×192 plus 512×512 are used by Android and installable web apps (PWAs). Generating all of them means every device shows a sharp icon.
How do I add the favicon to my website?+
Download the PNGs and upload them to the root folder of your site (the same place as your homepage). Then copy the <link> tags shown below the previews and paste them inside the <head> section of your HTML. That tells browsers where to find each icon.
Why PNG instead of a .ico file?+
Every modern browser supports PNG favicons, and PNGs keep transparency and sharp edges at each exact size. Serving a set of PNGs is the current best practice; a single multi-resolution .ico is only needed for very old browsers.