Home / Favicon Generator

Favicon Generator Free — Make a Favicon and App Icon

A favicon is the small icon that appears in the browser tab next to your site's name, in bookmarks, and in browser history. It is tiny — often just 16 pixels across — but it is one of the first things visitors notice, and a site without one looks unfinished. A good favicon is a simple, bold version of your logo: a single letter, a simple mark, or a strong shape with high contrast, because fine detail vanishes at small sizes. This free favicon generator turns any square image into the sizes browsers and phones actually need: 16×16, 32×32 and 48×48 favicon PNGs, plus a 180×180 Apple touch icon for iPhone and iPad home screens. Everything runs in your browser using the canvas element, so your image is never uploaded to a server and never seen by anyone else. There is no account to create and nothing to install. One honest point matters: this tool creates PNG files, not a true .ico file. Download the PNGs and add them to your site with <link rel="icon"> tags — a true .ico file is not created here; most modern browsers accept PNG favicons. That covers Chrome, Firefox, Edge and Safari on modern devices, which is what almost all of your visitors will be using.

How to Use

1. Upload a square image. Click the file input and choose a PNG or JPG logo. A square image of 512×512 pixels or larger gives the cleanest results, because the tool scales it down rather than stretching it up.
2. Click Generate favicons. The tool draws your image onto a canvas at 16×16, 32×32, 48×48 and 180×180 pixels. Each size appears below with a preview, so you can check that the design is still readable at the smallest size.
3. Download the PNGs. Click the download button under each preview to save that size, or use Download all to save all four files at once. Keep the file names as they are, because the HTML snippet below refers to those exact names.
4. Add the HTML snippet to your site. Upload the four PNG files to the root folder of your website, then paste the snippet into the <head> section of your pages. Use the Copy HTML snippet button to copy it, then refresh your site and check the browser tab.

Worked Example

Suppose your logo is a square 512×512 PNG — a white letter C on a dark blue background, saved as logo.png. Upload logo.png and click Generate favicons. The tool creates four files from it. The first is favicon-16x16.png, the tiny icon shown in browser tabs. The second is favicon-32x32.png, used in bookmarks and on high-resolution screens where 16 pixels would look blurry. The third is favicon-48x48.png, used by some browsers and desktop shortcuts. The fourth is apple-touch-icon.png at 180×180 pixels, the icon shown when someone adds your site to an iPhone or iPad home screen. Each one is the same 512×512 logo scaled down: 512 divided by 16 is 32, so the 16-pixel version is one thirty-second of the original width, and the 180-pixel version is about a third of the original. After downloading all four, upload them to your site's root folder and paste the snippet into your pages. When you refresh, the tab should show your letter C, and the bookmark icon should match. If the old icon is still showing, clear your browser cache or open the page in a private window, because browsers cache favicons aggressively and may keep showing the old one for a while.

Why Each Size Matters

Browsers ask for different sizes in different places, and serving only one size means some of those places show a blurry or missing icon. The 16×16 icon is the classic tab icon and the one most people see first. The 32×32 icon is what modern browsers use in bookmarks, history and on high-resolution displays, where a 16-pixel image would be stretched and soft. The 48×48 icon covers desktop shortcuts and some older browsers that still request it. The 180×180 Apple touch icon is separate because iOS ignores the smaller icons when a user adds a site to their home screen, and it wants a full square with no transparency — transparent areas are filled with black on iOS, which can ruin a logo with a transparent background. If your logo has transparency, check the 180-pixel preview carefully before you use it, and consider a version with a solid background colour for the touch icon. Keep the design simple at every size: test the 16-pixel preview first, and if you cannot recognise the mark at that size, simplify the logo before you publish it.

Tips for a Favicon That Looks Good

Start with the simplest version of your logo you can make. A single bold letter, a simple shape, or one strong colour block will survive the journey down to 16 pixels; a photograph, small text, or a detailed illustration will turn into a smudge. Use high contrast between the mark and the background, because browser tabs are small and often sit next to many other tabs. If your logo is dark, put it on a light background or add a light outline, and the reverse if it is light. Check the preview at 16 pixels before you download anything — that is the size your visitors will see most often, and it is the honest test. After uploading the files, test in a fresh browser window, because a cached old favicon can make you think the new one failed when it actually worked. And remember the honest limit: this tool creates PNG files, not a .ico file, so if you specifically need a favicon.ico for a very old system, you will need a converter that writes the ICO format — for almost every modern site, the PNG files and the snippet here are enough.

Frequently Asked Questions