A favicon is a small square icon, usually 16 by 16, 32 by 32, or 48 by 48 pixels, that a browser shows next to the page title in tabs, bookmarks, and home-screen shortcuts, and generating one means turning a regular image into those specific square PNG files and adding the matching HTML link tags to your site so browsers can find and display it. Most websites need more than one size because different browsers, operating systems, and devices request different pixel dimensions, which is why a dedicated Favicon Generator exists: it takes one source image and exports every commonly used favicon size in a single batch, along with the copy-paste HTML that points each browser to the right file.
The whole process happens locally in your browser. You pick a file from your computer, the tool crops and downscales it into crisp squares, and you download the resulting PNGs without uploading the source to a server. That makes it practical for logos, profile photos, or any image you already have on hand, and it also means there is no waiting for a network round trip and no concern about a third party seeing a private or pre-release logo before it ships.
What a Favicon Actually Does on Your Site
A favicon is not just decoration. It is a real file that browsers fetch from your server using a normal request, and the browser decides which file to ask for based on the device and context. A desktop Chrome tab usually asks for a 32-pixel icon, a pinned tab or bookmark may use 64 or 96 pixels, and an iOS home-screen shortcut may request a 180-pixel apple-touch-icon. If your HTML does not declare the right file with a matching <link rel="icon"> tag, the browser falls back to a default or shows nothing at all.
Because of that, generating a favicon is really two tasks in one: producing the right square PNG files at the right pixel sizes, and wiring those files into your page with the correct HTML attributes so browsers can discover them. The Favicon Generator handles both steps at the same time, which removes a common stumbling block for people who are comfortable with images but less comfortable editing raw HTML.
Choosing the Right Source Image
Before opening the tool, spend a minute on the source image. Favicons are tiny, so the icon needs to read clearly at 16 by 16 pixels, which is roughly the size of a single character on a phone screen. Images with a strong central shape, a simple silhouette, or a bold single letter tend to work well. Photos with lots of fine detail, busy backgrounds, or thin lines often turn into a blur at small sizes because the generator has to throw away pixels aggressively to fit the canvas.
Keep the main subject near the center of the frame, because the generator crops to a square. If the important part of your logo sits in a corner, it will get cut off when the tool trims the edges. PNG, JPEG, and WebP files are all accepted. If your logo currently lives in a format like SVG, you may want to read about JPEG vs PNG vs WebP first to decide which export format fits a favicon best, since PNG is the conventional choice for icons because of its lossless compression and clean handling of solid colors and sharp edges.
Square source images are ideal, but not required. As long as the center of the image is what you want shown in the icon, the generator will handle the cropping. A useful pre-flight check is to preview your image at 32 pixels wide in any image viewer: if you can still tell what it is at that size, it will almost certainly make a readable favicon.
Generate Favicon Files Step by Step
- Open the Favicon Generator in your browser.
- Click the upload area and choose a PNG, JPEG, or WebP image from your computer. The file stays on your device and is not uploaded anywhere.
- Preview the source image to confirm the central subject is centered and will survive the square crop.
- Select the square PNG sizes you want to generate. Common picks include 16, 32, 48, 64, 96, and 180 pixels for apple-touch-icon support.
- Click the generate button and wait for the tool to render each square preview.
- Inspect each generated icon at its actual pixel size. Look closely at the 16-pixel and 32-pixel versions, since those are the most demanding on detail.
- Download the favicon files, either individually or as a single bundle, depending on the tool's option.
- Copy the matching HTML link snippets the tool displays. These are the
<link rel="icon">and<link rel="apple-touch-icon">tags that reference each downloaded file by name. - Paste those snippets into the
<head>section of your site's HTML template. - Upload the downloaded PNG files to your site's public directory, keeping the file names identical to what the HTML snippets reference so the links resolve correctly.
- Reload your site in a browser and check that the icon appears in the tab, in bookmarks, and in any pinned-tab or home-screen context you targeted.
Picking the Right Favicon Sizes
You do not need to download every size the tool offers. Smaller sites often get away with just two files: a 32-pixel PNG for the browser tab and a 180-pixel apple-touch-icon for iOS home-screen bookmarks. Larger or more polished projects typically cover more sizes, because each context asks for a specific pixel count and a too-small image gets upscaled and looks soft.
| Size (px) | Typical Use | Worth Including? |
|---|---|---|
| 16 x 16 | Classic browser tab icon on desktop | Yes, for broad compatibility |
| 32 x 32 | Modern desktop browser tabs and taskbar pins | Yes, recommended baseline |
| 48 x 48 | Windows site shortcuts and some tab contexts | Optional |
| 64 x 64 | Higher-density desktop browsers and bookmark bars | Optional |
| 96 x 96 | Android Chrome home-screen shortcuts | Recommended for mobile support |
| 180 x 180 | Apple touch icon for iOS home-screen bookmarks | Yes, if you care about iOS users |
The exact figures above come from common browser and platform conventions. If you want the underlying specification details, the MDN documentation on favicons is a reliable starting point. When in doubt, generate at least 16, 32, and 180, and add more if your audience skews toward a specific platform such as Android home-screen users or Windows desktop shortcuts.
Wiring the HTML Into Your Site
Once the PNGs are on your server, the HTML side is straightforward. Each <link> tag goes inside the <head> element of your page and tells the browser exactly which file to fetch at which context. The Favicon Generator outputs snippets in the standard pattern, so all you usually need to do is copy them verbatim and adjust the file paths if your icons live in a subdirectory such as /icons/.
A typical block looks like a series of <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> tags, one per size, plus an <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iOS. Browsers read these tags in order and pick the best match for the current context, so declaring multiple sizes does not waste bandwidth. The browser only downloads the file it actually needs, and the rest are simply ignored until a different context asks for them.
After pasting the snippets and uploading the files, clear your browser cache or hard-reload the page. Browsers cache favicons aggressively, so a normal refresh often shows the old icon or nothing at all until the cache expires. For static-site generators and content management systems, the same pattern applies: the <link> tags go in the head template, and the PNGs go in the directory served as your site's root.
Preparing Your Image Before Generating
If your source image is huge or in a format you do not want to upload directly, a little preprocessing helps. You can use the Image Resizer to scale the original down to something manageable, or run it through the Image Compressor to shrink the file size before generating. A source file that is already close to a square and a few hundred pixels across will give the generator more flexibility, since it has less cropping to do and can preserve fine detail better when downscaling.
For larger image-format decisions, the how to compress image file size in your browser guide walks through the same kind of local processing without uploading anything, which pairs naturally with the favicon workflow. Keeping preprocessing in the browser also means you can iterate quickly: resize, regenerate, inspect, repeat, without leaving your local machine.
Troubleshooting Common Favicon Issues
If the icon does not appear after publishing, work through a short checklist. First, confirm the HTML snippets are inside the <head> tag and not the <body>. Second, confirm the file paths in the href attributes exactly match where the PNGs were uploaded, including the directory and case, since web servers are case-sensitive on most platforms. Third, open the PNG URL directly in a fresh browser tab to make sure the file is actually reachable. If the file loads but the icon still does not show, the cause is almost always browser caching, and a hard refresh or a different browser will confirm it.
If the icon appears blurry at 16 pixels, the source image is probably too detailed. Try regenerating from a simpler version of the logo, or use a variant where the central mark is thicker and the background is plainer. If the icon appears cropped wrong, recenter the source image so the subject sits in the middle before regenerating. And if the icon shows up in one browser but not another, the missing browser may simply be looking for a size you did not declare, in which case adding the matching <link> tag is usually the fix.
Generating a favicon is a small task with outsized payoff. A clear icon makes your site easier to spot in a crowded tab bar, looks more professional in bookmark lists, and gives mobile users a recognizable shortcut on their home screen. With the Favicon Generator, the whole workflow from source image to live HTML takes only a few minutes and does not require any image-editing software or server uploads.
For a deeper look, see How to Make a GIF in Photoshop: A Practical Walkthrough.