Resize images to exact pixels, a percentage, or social-media presets — with fit or crop.
Favicon Generator
Turn a logo into favicon.ico, PNG favicons, Apple and Android icons, a web manifest and the HTML tags.
Your image is processed on your device — never uploaded
Also used for the Apple and maskable icons.
For the web app manifest.
Browser toolbar colour on Android.
Where you’ll upload the files. Usually the site root (/).
Preview
My Website
My Website
Add this to your page’s <head>
How it works
Your image is centred on a square canvas and drawn at each size below, using step-by-step downscaling so small icons stay crisp. The package contains:
favicon-16x16.png: 16×16, browser tab (standard screens)favicon-32x32.png: 32×32, browser tab (high-density screens), taskbarfavicon-48x48.png: 48×48, windows site shortcut; search results faviconapple-touch-icon.png: 180×180, iphone and ipad home screenandroid-chrome-192x192.png: 192×192, android home screen, web app manifestandroid-chrome-512x512.png: 512×512, android splash screen, web app manifestmaskable-icon-512x512.png: 512×512, android adaptive icon (safe-zone padding)favicon.ico: 16, 32, 48 px in one file, for browser tabs and older browsersfavicon.svg: your original SVG, if you uploaded one (modern browsers use it at any size)site.webmanifestandfavicon-tags.html: the manifest and the tags to paste
Upload the files to the folder you entered, paste the HTML into every page’s <head>, and reload. Browsers cache favicons heavily, so you may need a hard refresh to see the change.
Example
Upload a 1024×1024 transparent PNG logo, choose a rounded shape with 10% padding and a white background, and download. You get 11 files ready to upload, and a block of HTML that starts with <link rel="icon" href="/favicon.ico" sizes="48x48">.
Frequently asked questions
Is my image uploaded?
No. The icons are drawn and packaged by your browser. Your image never leaves your device.
Which files do I actually need?
For most sites: favicon.ico (browser tabs, including older browsers), apple-touch-icon.png (iPhone home screen) and the two android-chrome PNGs with site.webmanifest (Android and installable web apps). The 16 and 32 px PNGs help browsers pick a crisp size. The ZIP contains all of them plus the HTML to paste into your <head>.
What image should I start with?
A square logo or symbol at least 512×512 px, ideally SVG or a PNG with a transparent background. Fine detail and small text disappear at 16×16, so a simple mark works best.
What is the maskable icon?
Android crops home-screen icons into circles, squircles or other shapes. A maskable icon has extra padding and a solid background so your logo stays inside the safe zone whatever shape the phone uses.
Why does the Apple icon have a background?
iOS fills transparent areas of home-screen icons with black. The generator gives the Apple and maskable icons your background colour (white if you chose transparent).
Related tools
See how link previews crop your og:image on Facebook, LinkedIn, WhatsApp and X, make a 1200×630 version and copy the tags.
Convert any CSS colour between HEX, RGB, HSL, HWB, OKLab and OKLCH, and check WCAG contrast.
Make QR codes for links, text, Wi-Fi, email, phone and WhatsApp. Download PNG or SVG.
Related guides
AI tools for South African creators
How South African creators can use AI for scripts, voiceovers, editing and research — and what to check about dollar billing, data costs, accuracy and POPIA.
· 7 min read
CSS colour formats explained: HEX, RGB, HSL, HWB and OKLCH
What each CSS colour format means, when to use it, why OKLCH is useful for palettes, and how to check colour contrast for accessibility.
· 7 min read
JWTs explained: structure, claims, decoding vs verifying, and common mistakes
How JSON Web Tokens work, what each part and claim means, why decoding isn't verifying, and the mistakes that cause real security bugs.
· 8 min read