--- title: "How to make a favicon from an image | ToolSugar" description: "Make a favicon.ico and the PNG icon sizes a modern site needs from one image, and get the HTML tags to paste into your page head." canonical: https://toolsugar.com/blog/how-to-make-a-favicon image: https://toolsugar.com/og.png --- # How to make a favicon for your website Updated 2026-11-09 To make a favicon, start from a square logo and export it at several sizes. Favicon Generator does this in your browser. It turns one image into PNG icons at 16, 32, 48, 180, 192 and 512 pixels, plus a favicon.ico, and gives you the HTML tags to paste. The image is cropped and processed on your device. [Open Favicon Generator](https://toolsugar.com/tools/favicon-generator) ## Make a favicon in four steps Use the cleanest, simplest version of your logo. Fine detail disappears at 16 pixels. A bold letter or a simple shape on a solid background reads best. Test the 16 pixel file next to other tabs, because that is the size most visitors see. 1. Choose a square image, ideally 512 by 512 pixels or larger. 2. Press Make favicons. 3. Download favicon.ico and the PNG sizes you need, one by one. 4. Copy the HTML snippet into the head of your page and upload the files to your site root. ## What each size is for The 16 and 32 pixel icons appear in browser tabs and bookmarks. The 48 pixel size is used by some desktop shortcuts. The 180 pixel icon is the Apple touch icon, shown when someone adds your site to an iPhone home screen. The 192 and 512 pixel icons are used by Android and web app installs. The favicon.ico file bundles the 16, 32 and 48 pixel images in one file, which older browsers still request by default. ## What happens to a non-square image The tool crops the image to a centered square. A wide logo with text at the edges loses those edges. Crop or pad the image yourself first if the whole mark must stay visible. ## Install the files on your site Upload every file to the root of your site, so favicon.ico sits at the top level. Then paste the link tags into the head of each page. The tool gives you that snippet. Each file downloads on its own because the tool does not build a zip. Download only the sizes you plan to reference. A basic site needs the favicon.ico plus the 32 pixel PNG, the 180 pixel Apple icon and the 192 and 512 pixel pair if it is a web app. Add a theme color and a manifest file separately, since this tool makes images and a snippet, not a manifest. ## Why the old icon still shows Browsers cache favicons for a long time. After you replace the files, hard reload the page or open the site in a private window to see the new icon. ## Questions ### Can I use a JPG as the source? Yes, any image your browser can open works. A PNG with a transparent background gives the cleanest edges at small sizes. ### Do I still need favicon.ico? Many sites still serve one, because some tools and older browsers ask for it. The PNG tags cover modern browsers. ### What size should the source image be? At least 512 by 512 pixels, so the largest icon does not have to be enlarged. ### Can I use an SVG favicon instead of PNG and ICO? Current browsers accept an SVG icon through a link tag with type image/svg+xml, and an SVG can adapt to dark mode. This tool outputs PNG and ICO files only, so keep those as the fallback for browsers and apps that skip SVG. [Open Favicon Generator](https://toolsugar.com/tools/favicon-generator) ## Related guides - [How to make a QR code from a link or text](https://toolsugar.com/blog/how-to-make-a-qr-code) - [How to convert HEX to RGB and HSL colors](https://toolsugar.com/blog/how-to-pick-a-color-code) - [How to resize an image by pixels, percent or KB](https://toolsugar.com/blog/how-to-resize-an-image) - [How to crop an image to a size or aspect ratio](https://toolsugar.com/blog/how-to-crop-an-image)