How to make a favicon
- Drop a square image (a logo or icon works best). Non-square images are scaled to fill the square and the overflow is cropped from the center.
- Toolyard renders seven PNG files at once. Check the previews, then click Download all (or download a single size).
- Upload the PNG files to the root folder of your site, so they live at addresses like
/favicon-32.png. - Copy the HTML snippet into the
<head>of every page (or your shared template) and reload the site.
What this tool produces
Every upload is converted into seven square PNG files named favicon-16.png, favicon-32.png, favicon-48.png, favicon-64.png, favicon-180.png, favicon-192.png and favicon-512.png. The snippet it writes references five of them: 16 and 32 for browser tabs, 180 as the Apple touch icon, and 192 and 512 as larger icons for Android and installable web apps. The 48 and 64 pixel files are extras that the snippet does not reference. They are handy for desktop shortcuts, documentation or a quick check of how your artwork holds up in between sizes.
Transparency is preserved, so a logo on a transparent background stays transparent in the output. The tool does not produce a legacy .ico file, an SVG icon or a web app manifest. If you need those, see favicon.ico vs PNG to decide whether you actually do.
Why 16 pixels is the hard part
A browser tab shows your icon at roughly 16 by 16 pixels, or 32 by 32 on high-density screens. That is 256 pixels in total, so a full logo with a wordmark, a thin outline or a tagline becomes an unreadable smudge. Before you upload, ask what the single most recognizable shape in your brand is. For a bakery it might be a whisk; for a software company it is usually the first letter or the symbol part of the logo, not the whole lockup.
- Crop tight. Because the tool scales the image to fill the square, padding around your artwork wastes pixels. Trim empty margins first, for example with the image cropper.
- Use strong contrast. A dark icon on a transparent background disappears in dark-mode browser tabs. A solid colored square behind a white symbol works on both light and dark tab bars.
- Avoid gradients and fine detail. Two or three flat colors survive downscaling; subtle shading turns muddy.
- Test the small previews. The 16 pixel preview in the grid is the real size your visitors will see. If you cannot tell what it is at a glance, simplify the source and try again.
Common mistakes
- Starting from a tiny source. The 512 pixel icon is upscaled if your image is smaller, which looks blurry. Start with an image at least 512 pixels on each side, or a vector logo exported at that size.
- Forgetting the Apple icon background. iPhones typically fill a transparent touch icon with black. If your logo is dark, place it on a solid colored square before uploading so the 180 pixel version looks intentional.
- Wrong file paths. The snippet assumes the files sit in your site root. If you put them in an
/images/folder, edit thehrefvalues to match. - Expecting instant updates. Browsers cache favicons aggressively. After uploading new files, hard-refresh or open the site in a private window; see why your favicon is not showing.
Who it is for
Small-business owners launching a first website can go from a logo file to a finished icon set in a minute, with no design software. Bloggers and WordPress users get properly sized files to upload through their theme settings. Developers prototyping a project can drop the snippet straight into a template. Note that for a full installable web app you will also need a manifest file that points at the 192 and 512 pixel icons; this tool supplies the images but not that file.
Is it private and safe?
Yes. Toolyard builds your favicons inside your browser on your own device using the canvas. Your image is never uploaded anywhere, which matters if your logo is not public yet.
Related guides
Read How to make a favicon, the size reference in favicon sizes, and the Apple touch icon size. To turn a photo into a round icon first, try the circle crop tool.
Frequently asked questions
What sizes does this tool generate?
It generates seven square PNG files: 16, 32, 48, 64, 180, 192 and 512 pixels. The HTML snippet references 16, 32, 180, 192 and 512; the 48 and 64 pixel files are extras you can use as you see fit.
Do I still need a favicon.ico file?
Current browsers accept PNG icons declared with link tags, so for most sites a .ico file is optional. Some old tools and feed readers still request /favicon.ico by default, and this tool does not create that file. The blog guide on favicon.ico versus PNG explains when it is worth adding one.
What image works best?
A simple, bold, square image of at least 512 pixels on each side. Fine detail disappears at 16 pixels, so a single symbol or letter on a solid color almost always beats a full logo with text.
What happens to a non-square image?
The image is scaled up until it fills the whole square, then the extra width or height is cropped equally from both sides. Nothing is stretched, but the edges of a wide logo can be cut off, so crop it to a square yourself first if the edges matter.
Is transparency kept?
Yes. Transparent areas stay transparent in every PNG. This looks good in browser tabs, but iPhones typically show a transparent Apple touch icon on a black background, so give that icon a solid background if you care how it looks.
Why does my old favicon still show after I upload the new one?
Browsers cache favicons separately from normal page content and can keep an old one for days. Try a hard refresh, a private window, or visiting the icon file address directly to force a new download.
Does the tool create a web app manifest?
No. It makes the 192 and 512 pixel images that a manifest usually points to, but you must write the manifest file yourself if you want your site to be installable.
Are my images uploaded?
No. Everything runs on your device and nothing is sent anywhere. The same is true for the generated files, which are created in memory and saved straight to your downloads.