Here is how to make a favicon in short. Create a square image of your logo or icon, convert it to the ICO or PNG format, then upload it to your website. A favicon is the tiny icon that shows in the browser tab next to your page title. It is small, but it makes your site look finished and helps people find your tab.
In this guide you will learn what a favicon is, the right sizes to use, how to make a favicon step by step, and how to add it to WordPress. You will also get a free way to create the ICO file in your browser.
What Is a Favicon?
A favicon is a small icon that represents your website. You see it in the browser tab, in bookmarks, in browser history, and next to your site in some search results. The name is short for “favorite icon”.
A good favicon is simple. Because it shows at a tiny size, fine detail disappears. A single letter, a simple symbol, or a clean version of your logo works best. Busy designs turn into a blur.
What Size Should a Favicon Be?
A favicon needs to work at several sizes. Browsers and devices pick the size they need. Here are the common ones.
| Size | Used for |
|---|---|
| 16×16 | Browser tab (classic) |
| 32×32 | Taskbar and higher-res tabs |
| 48×48 | Windows site shortcuts |
| 180×180 | Apple touch icon (iPhone, iPad) |
| 512×512 | Android and web app icon |
You do not need to make each one by hand. The trick is to design one large square image, usually 512×512 pixels, and let your tools create the smaller sizes from it.
How to Make a Favicon: Step by Step
Follow these steps and you will have a clean favicon ready to use.
Step 1: Design a Square Image
Start with a square canvas, ideally 512×512 pixels. Put your logo, symbol, or a single bold letter in the middle. Keep it simple and make sure it reads well when shrunk. Use a transparent or solid background, whatever suits your brand.
Step 2: Save It as a PNG
Save your design as a PNG. PNG keeps sharp edges and supports transparency, which is exactly what a favicon needs. Do not use a JPG, because JPG cannot hold a transparent background and can add specks around edges.
Step 3: Convert It to an ICO File
The classic favicon format is ICO, because it can hold several sizes inside one file. To make one, use our free PNG to ICO converter:
- Add your square PNG.
- It converts to a favicon-ready ICO file.
- Download your new favicon.ico.
Everything runs in your browser, so your image never leaves your device. There is no sign-up and no cost.
How to Add a Favicon to WordPress
WordPress makes this part easy, and it works with the Astra theme and most others. WordPress calls the favicon the “Site Icon”.
- In your dashboard, go to Appearance, then Customize.
- Open the “Site Identity” section.
- Under “Site Icon”, click “Select site icon”.
- Upload your square PNG. WordPress asks for at least 512×512 pixels, which is why we made it that size.
- Crop if needed, then click Publish.
WordPress then creates the smaller sizes for you and shows your favicon in browser tabs and on phones. This is the simplest route for most site owners.
If you prefer the classic method, upload your favicon.ico file to your site root and link to it in your theme header. But for WordPress users, the Site Icon method above is quicker and cleaner.
Tips for a Better Favicon
Keep these in mind when you make a favicon:
- Keep it simple. Detail vanishes at 16 pixels. One shape or letter is enough.
- Use high contrast. The icon should stand out on both light and dark tabs.
- Match your brand. Use your main brand color so people recognize your tab fast.
- Test it small. Zoom out and check that it still reads clearly.
- Use a transparent background if your icon is not a full square, so it looks clean in any tab.
Frequently Asked Questions
How do I make a favicon for free? Design a square image, save it as a PNG, then convert it to an ICO file with a free browser tool. After that, upload it to your site or add it in WordPress under Site Icon.
What format should a favicon be? ICO is the classic favicon format because it holds several sizes in one file. PNG also works well, especially for the WordPress Site Icon feature.
What is the best favicon size? Start with a 512×512 square image. From that, your tools can create the smaller sizes like 16×16 and 32×32 that browsers use.
Can I use a JPG as a favicon? It is not a good idea. JPG cannot hold a transparent background and can add specks around edges. Use PNG or ICO instead.
How do I add a favicon in WordPress? Go to Appearance, then Customize, then Site Identity, then Site Icon, and upload a square image of at least 512×512 pixels.
Why is my favicon not showing? Browsers cache favicons hard. Clear your browser cache, or open the site in a private window, and give it a little time to update.
Final Thoughts
Now you know how to make a favicon that looks clean in every browser tab. The path is simple. Design a square image, save it as a PNG, convert it to an ICO file, then add it to your site. In WordPress, the Site Icon feature handles the rest for you.
When you are ready, our free PNG to ICO converter turns your square image into a favicon in seconds. Everything runs in your browser, so your file stays private and never leaves your device.