Favicon Generator
Upload a square-ish image up to 200MB to generate a full favicon package, with control over shape, background, and padding.
Drag & drop a file here, or click to browse
PNG, JPG, or WebP — a square image works best
Icon Settings
Padding shrinks the source image inward from the edges, leaving room for the background to show around it — useful for the rounded and circle shapes.
How to use this tool
Upload a logo, choose a background shape (square, rounded or circle) and colour or keep it transparent, set the padding, and click Generate & Download ZIP. You get favicon-16x16.png, favicon-32x32.png, favicon-48x48.png and a 180 × 180 apple-touch-icon.png. A non-square image is cropped to its centre square first.
The tags to add
Upload the four files to your site's root and put these lines in the <head> of every page, or of the shared layout:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
The sizes attribute lets a browser pick the file that fits, instead of downloading one and scaling it. Browsers cache favicons aggressively, so if an old icon keeps showing after you update it, open the PNG's address directly once, or test in a private window.
Getting it into Google results and dark tabs
- Google's favicon guidelines ask for a square icon of at least 8 × 8 and recommend one larger than 48 × 48; the 180-pixel
apple-touch-iconcovers that. The icon and your home page must not be blocked in robots.txt, and Google says a new favicon can take days to weeks to appear. - A dark logo on a transparent background disappears in a browser with a dark theme, where the tab bar is nearly black. Choose a rounded or circle background in a light colour, or add padding around a light version of the logo.
Frequently Asked Questions
Why is my logo unreadable at 16 × 16?
At that size the whole icon is 256 pixels, so thin lines and small text merge into a smudge. Use the simplest form of your mark, often a single letter or symbol from the logo, set the padding low so it fills the square, and check the 16-pixel preview before downloading.
Is there a favicon.ico or a web manifest in the ZIP?
No. The ZIP holds four PNG files: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png and apple-touch-icon.png (180 × 180). Current browsers use PNG favicons through link tags. A browser that finds no link tag asks for /favicon.ico at the site root, so if you want that fallback, convert the 48 px PNG to .ico with another tool, and write a manifest by hand if you are building an installable web app.
Why does my source image get cropped to a square?
Favicons are square by definition, so a non-square source image is automatically center-cropped to the largest square that fits before resizing — this keeps the main subject centered rather than stretching the image and distorting it. For predictable results, starting with a square (or close to square) source image is best.
Related Tools
Related Blog Posts
On-Page SEO Basics: Meta Tags, Robots.txt, and Favicons
The technical basics that decide how a page appears in search and link previews: title, description and canonical tags, what robots.txt can and can't do, and the favicon sizes search engines actually use.
Read moreHow to Use QR Codes for Marketing, Docs, and Events
How much a QR code can hold, why a shorter or uppercase link gives a code that scans more easily, what error correction actually protects against, and how to size one for print.
Read moreHEX, RGB and HSL: How the Conversions Work and Where They Round
#4F46E5 converted to RGB and HSL step by step, why 89.4% of all colours change when copied as whole-number HSL, why HSL lightness is not brightness (yellow and blue at 50% differ eightfold in contrast), and the alpha that hex can't write exactly.
Read more