How to Create a Favicon From a PNG Image
A PNG logo is one of the easiest starting points for a favicon. This guide walks through how to turn a PNG image into a sharp favicon, what sizes you actually need, and how to add the finished file to your website.
Table of Contents
- What a Favicon Is and Why It Matters
- Why a PNG Image Works Well as a Source
- Preparing Your PNG Before You Convert
- Step-by-Step: Create a Favicon From PNG
- Favicon Sizes You Should Export
- Adding the Favicon to Your Website
- PNG vs Other Source Formats
- Designing a Favicon That Reads at Small Sizes
- Testing Across Browsers and Devices
- Common Problems and How to Fix Them
- FAQs
What a Favicon Is and Why It Matters
A favicon is the small icon that shows up in a browser tab, next to the page title in your bookmarks, and on the home screen when someone saves your site to their phone. It is tiny, but it does a lot of quiet work. When a visitor has ten tabs open, the favicon is often the only way they can find yours at a glance.
Because the favicon represents your brand in such a small space, the source image needs to be clean and simple. A PNG version of your logo is usually the most convenient place to start, since most logos are already saved or exported in that format.
The goal of this guide is practical. By the end, you will have a set of favicon files made from your PNG image and the exact HTML you need to put them on your site.
Why a PNG Image Works Well as a Source
PNG is a strong choice for a favicon source for a few reasons. First, it supports transparency, so a logo with a transparent background will sit cleanly on a tab without an awkward white box around it. Second, PNG keeps sharp edges and solid colors crisp, which is exactly what you want when the image is shrunk down to 16 by 16 pixels.
If your only file is a JPG, that can still work, but JPG does not keep a transparent background and tends to add small visual artifacts around hard edges. When you have the option, export or save your logo as a PNG before converting it to a favicon.
Quick tip: a square PNG gives the best result. Favicons are always displayed in a 1:1 square, so starting with a square image means nothing gets stretched or cropped in a way you did not plan for.
Preparing Your PNG Before You Convert
A little preparation makes a big difference in how the final favicon looks. Spend a couple of minutes on these checks before you upload your PNG to a generator.
- Crop to a square. Trim away extra space so the important part of the logo fills the frame.
- Simplify the detail. Fine text and thin lines disappear at small sizes. If your full logo is busy, consider using just the symbol or the first letter.
- Check the background. Decide whether you want a transparent background or a solid color behind the icon. Both work, but pick one on purpose.
- Use a high-resolution source. Start from a larger PNG, around 512 by 512 pixels, so the tool can scale down cleanly.
Step-by-Step: Create a Favicon From PNG
1. Upload your PNG
Open a favicon generator and select your prepared PNG file. Our own favicon generator runs entirely in your browser, so the image never gets uploaded to a server.
2. Preview the result
Look at how the icon appears at small sizes. This is your last chance to catch a logo that is too detailed or text that turns into a blur. Adjust the source PNG if needed.
3. Generate the icon files
The tool produces the favicon in the sizes browsers expect, including a .ico file for older browsers and PNG versions for modern ones. Download the complete set.
4. Save the files
Place the downloaded files in your project so you can upload them to your website in the next step.
Favicon Sizes You Should Export
A single size is no longer enough. Different devices and contexts pull different versions of your icon. Here is a practical set that covers almost every case.
| Size | Used For |
|---|---|
| 16x16 | Browser tabs and bookmarks |
| 32x32 | Taskbar shortcuts and high-DPI tabs |
| 180x180 | Apple touch icon for iOS home screens |
| 192x192 | Android Chrome and web app icons |
| 512x512 | Progressive web apps and splash screens |
Adding the Favicon to Your Website
Once you have the files, place them in the root folder of your site and link to them inside the <head> section of your HTML. Here is a clean setup that covers most browsers and devices.
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/16x16.png" /> <link rel="apple-touch-icon" href="/180x180.png" />
After uploading, clear your browser cache and reload the site. Favicons are cached aggressively, so an old icon may stick around for a while. If the new one does not appear right away, try a hard refresh or open the page in a private window.
That is the full process. From a single PNG image you now have a complete favicon set and the code to display it everywhere.
PNG vs Other Source Formats
PNG is the most common starting point for a favicon, but it is not the only option. Knowing how it compares to JPG and SVG helps you pick the right source and avoid quality problems later.
JPG is built for photographs. It uses lossy compression, which means it throws away small amounts of detail to keep file sizes down. That is fine for a holiday photo, but it leaves faint halos and noise around the sharp edges and flat colors that make up a logo. JPG also cannot store a transparent background, so a logo saved as JPG arrives with a solid rectangle behind it. For a favicon, that rectangle often looks out of place in a browser tab.
SVG sits at the other end of the scale. It is a vector format, so it scales to any size without blurring and is excellent for simple logos. Modern browsers can even use an SVG directly as a favicon. The catch is that many icon generators and older browsers still expect a raster image, which is exactly where PNG shines. PNG keeps hard edges crisp, supports transparency, and is accepted everywhere.
| Format | Transparency | Best Use as Source |
|---|---|---|
| PNG | Yes | Logos and icons, the safe default |
| SVG | Yes | Simple vector logos that scale |
| JPG | No | Avoid for icons when possible |
The short version: if you have a PNG, you are in good shape. If you only have an SVG, you can convert it to a high-resolution PNG first and then make your favicon. If all you have is a JPG, recreate or re-export the logo as a PNG before you start so transparency and edge quality come out clean.
Designing a Favicon That Reads at Small Sizes
A favicon usually appears at 16 or 32 pixels wide. That is roughly the size of a single letter in this sentence. At that scale, detail is the enemy. A logo that looks rich and intricate on a website header can collapse into a muddy blur in a browser tab. The fix is to simplify on purpose before you convert.
Start by asking what the single most recognizable part of your brand is. For many sites it is the first letter of the name, a distinctive symbol, or a simple shape. Lean on that one element instead of trying to squeeze in the full logo with text. A bold monogram reads far better at 16 pixels than a detailed emblem ever will.
Contrast does a lot of quiet work here. The favicon needs to stand out against the browser interface, which can be light gray, white, or a dark theme depending on the user. A design with strong contrast between the icon and its background stays legible in all of those settings. If your brand color is very light, consider a darker outline or a solid background so the shape does not disappear.
Keep a little breathing room around the artwork too. When a logo runs right to the edges of the square, it can feel cramped and the corners may get clipped in certain contexts. A small, even margin keeps the icon balanced and gives it a cleaner look at every size.
A quick test: shrink your design to 16 pixels on screen and step back from your monitor. If you can still tell what it is, the design is strong enough to be a favicon. If not, simplify further.
Testing Across Browsers and Devices
Once your favicon is live, it is worth a few minutes to confirm it shows up correctly everywhere people will see it. Different browsers and devices pull different files from your icon set, so checking a range of them catches problems early.
Begin with the obvious one: open your site in a desktop browser and look at the tab. Then add the page to your bookmarks and check the icon there. Bookmarks sometimes use a larger size than the tab, so a favicon that looks fine in the tab but fuzzy in bookmarks is a sign your larger PNG sizes need attention.
Next, try a phone. On an iPhone, use the share menu to add the site to the home screen and confirm the apple-touch-icon appears with a clean background rather than a black box. On Android, do the same and check that the icon is sharp and not cropped awkwardly. These home screen icons rely on your larger files, so testing them verifies the full set is working.
Finally, check both a light and a dark browser theme if you can. An icon that looks great on a white toolbar can vanish against a dark one. If that happens, a transparent PNG with good internal contrast, or a version with a subtle background, usually solves it.
Common Problems and How to Fix Them
Most favicon issues come from a small set of recurring causes. Here is how to spot and resolve them quickly.
- The old icon keeps showing. Browsers cache favicons aggressively. Do a hard refresh, open the page in a private window, or clear the cache. Renaming the file also forces a fresh fetch.
- The favicon looks blurry. This usually means the source PNG was too small or got stretched. Start again from a 512-pixel square so every size scales down cleanly.
- A black box appears on iPhone. iOS fills transparent areas with black on the home screen icon. Give the Apple touch icon a solid background color.
- Nothing appears at all. Check that the file path in your HTML matches where the file actually lives, and confirm the files were uploaded to the server, not just saved locally.
- The icon is squashed. The source was not square. Crop the PNG to a perfect 1:1 ratio before converting.
Work through these one at a time and you will resolve almost any favicon display issue without guesswork.
FAQs
Can I make a favicon from a PNG with a transparent background?
Yes. PNG transparency carries over to the favicon, so your icon will blend into both light and dark browser themes instead of sitting inside a colored box.
What is the best PNG size to start with?
A square PNG around 512 by 512 pixels is ideal. It gives the tool plenty of detail to scale down cleanly to every favicon size.
Do I still need a .ico file?
It helps. Modern browsers read PNG icons happily, but a favicon.ico file remains the safest fallback for older browsers and some default behaviors, so it is worth including.
Can I use a JPG instead of a PNG?
You can, but it is not ideal. JPG cannot store a transparent background and tends to add faint artifacts around sharp edges. For a clean favicon, convert or re-export the image as a PNG first.
Does the favicon affect my SEO?
A favicon is not a direct ranking factor, but it does appear next to your result in some mobile searches and helps people recognize your brand in a crowded tab bar. That recognition can support click-through over time.