Favicon Generator

1. Pick a square image. Drag it onto the Drop your image here box or click the box to browse. JPG, PNG, SVG, GIF and WebP all work. A square logo of 512×512 px or larger gives the sharpest results.
2. Check the previews. The tool instantly draws six files: five PNGs and one favicon.ico. Look closely at the 16×16 version — that is what people actually see in a browser tab.
3. Download. Click Download All (ZIP) to get favicons.zip with all six icons plus a ready-made site.webmanifest, or use the small Download button under any single icon.
4. Copy the code. Press Copy on the HTML Code box and paste it inside the <head> of your pages. New Image starts again with a different picture.

Your image is cropped to a square from the centre. The tool takes the largest square that fits in the middle of your picture and scales it down to each size. For example, a 1200×630 banner keeps its central 630×630 area and loses 285 px from the left and from the right edge. So put a wide logo on a square canvas first, or part of it will be cut off. A source smaller than 512 px gets enlarged for the 512×512 icon and looks soft.

This is the same code the Copy button gives you. Every file name matches a file in the ZIP, and each path starts with /, which means “the root folder of this website”.

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="manifest" href="/site.webmanifest">

• The favicon.ico line and the 16×16 and 32×32 lines cover browser tabs; the browser picks the size that suits the screen.
• The apple-touch-icon line is what iOS uses when someone saves your site to the home screen.
• The 192 and 512 lines give browsers and Google Search a larger icon to pick from. Google asks for a square favicon and recommends one bigger than 48×48 px.
• The manifest line points to site.webmanifest. Open that file and replace "Your App Name" and "App" with your real name, and change theme_color to your brand colour (a color picker will give you the hex code).

If your site lives in a sub-folder (for example example.com/shop/) rather than at the domain root, either put the icon files at the root anyway or change each href to the real path.

• Browser cache. Browsers hold on to favicons longer than to normal pages. Try a private/incognito window, or add a version to each link, e.g. href="/favicon.ico?v=2", to force a fresh download.
• Wrong path. Open each icon URL directly. If you see a 404 or your home page instead of a small image, the file is in a different folder from the one the tag points to.
• Wrong file type. Renaming a PNG to .ico does not make it an ICO. The favicon.ico from this tool is a genuine multi-size ICO file. If your server sends the manifest with the wrong content type, on Apache you can add AddType application/manifest+json .webmanifest to .htaccess.
• Old tags still in the page. A theme, plugin or site builder may print its own favicon tags. View the page source, search for “icon” and remove the old ones.
• CDN cache. If you use Cloudflare or another CDN, purge the cached copies of the icon files after replacing them.
• Google still shows the old icon. This is normal for a while. Google recrawls favicons on its own schedule, which it says can take several days to several weeks, and the icon must be linked from your home page.

Design tip: at 16×16 px there are only 256 pixels to work with, so small text and thin lines vanish. A single bold letter or your logo’s symbol on its own reads far better than a full logo with the company name.