Which favicon sizes should you prepare?
Separate the size of the uploaded file from the size at which people see it. A large source can provide enough pixels, but it cannot rescue a shape with details that disappear at a tiny display size. Our practical starting point is to keep an editable square source and make small raster previews before you commit to a design.
| Job | Practical starting point | What to verify |
|---|---|---|
| Design review | 16, 32 and 48 px previews | Does the opening, silhouette or initial still read? |
| Website favicon upload | The dimensions and format specified by your CMS | Upload to its site-icon setting, not the header-logo field |
| Google Search eligibility | A square PNG larger than 48 px, such as 96 × 96 | Homepage declaration and crawl access |
| Home-screen or installed app icon | A separate export matching the platform specification | Do not assume a 16 px tab asset is sufficient |
At the time of writing, Google specifies a square favicon of at least 8 × 8 pixels and recommends dimensions larger than 48 × 48. Its published format list includes PNG and ICO. Google also requires crawl access to the homepage and icon, recommends a stable icon URL, and does not guarantee display. These are Search requirements, not a universal browser export recipe. Google Search favicon documentation.
PNG is a straightforward raster handoff option when your site accepts it. ICO can package several raster sizes. SVG can be useful in browser implementations that support it, but do not assume that browser support also makes it suitable for every search surface or upload field. Ask your developer or check your platform’s current instructions before choosing an SVG-only setup.
A worked example: one narrow opening, three sizes
For this article, we constructed two blue rounded-square shapes on transparent 256 × 256 canvases. Both have the same outer silhouette. The first has a 16-pixel-wide central opening; the second has a 64-pixel opening. We resized each with Pillow’s Lanczos filter to produce the actual PNGs shown below. These are teaching specimens, not Ficonica exports, client work, or screenshots of a browser tab.
| Original teaching shape | 16 px | 32 px | 48 px |
|---|---|---|---|
| Narrow opening |  16 × 16 |  32 × 32 |  48 × 48 |
| Wider opening |  16 × 16 |  32 × 32 |  48 × 48 |
Shown at their nominal CSS sizes. Screen density and browser zoom affect the appearance. Open the downloadable files to inspect the raster pixels directly.
The narrow opening scales to a nominal width of 1 pixel at 16 × 16, 2 at 32 × 32, and 3 at 48 × 48. The wider version gives it 4, 8 and 12 pixels respectively. Those values come from the geometry: opening width × output size ÷ 256. Resampling blends edge pixels, so nominal width is not a count of fully transparent pixels.
The useful decision is whether that opening is essential to recognizing your mark. If it is, give it enough space to survive. If it is decorative, removing it may be preferable to widening it until the shape changes character. Neither specimen proves that a particular gap works for every logo: diagonals, curved cuts, colors and adjoining shapes behave differently.
Download narrow 16 px PNG · Download wider 16 px PNG · Download wider 96 px PNG
How to choose the part of your logo to keep
Start with the feature people could recognize without reading the business name: a distinctive outline, a bold initial, or an existing symbol. A long wordmark with a tagline rarely offers enough room in a square. Creating a compact variant is an adaptation of your identity, not a reason to introduce an unrelated stock icon.
- Remove the tagline first. Decide whether it contributes anything at the actual target size.
- Keep one identifying feature. Avoid trying to preserve every decorative line.
- Balance the occupied area. Excess transparent padding can make a technically large icon look tiny. Too little can make it feel cramped.
- Review light and dark surroundings. A transparent background preserves flexibility; it does not guarantee contrast.
- Compare with your larger mark. The compact version should still belong to the same brand family.
Our editorial recommendation is to review alternatives side by side, then inspect the selected file in the actual site. Do not pick a winner only from a magnified mockup. If you are still exploring the identity, start with logo concepts in Ficonica and assess which symbol can support a compact version. This guide does not claim that a particular Ficonica plan automatically supplies every favicon export.
Install the file, then diagnose the right problem
In a website builder, use its favicon or site-icon setting. For a custom website, your developer can declare an icon in the HTML head. This minimal example assumes that the named PNG exists at the stated path; it is not a complete app-icon setup.
<link rel="icon" type="image/png"
sizes="96x96" href="/favicon-96.png">Browsers can choose between declared icons using attributes such as type, sizes and media. Avoid accidentally leaving competing old declarations in a theme or plugin. MDN’s icon relationship reference explains how those declarations work.
| What you see | What to check first |
|---|---|
| The old icon remains | Confirm the live declaration and file, then check a fresh browser session; caching may be involved |
| The new icon is tiny or unclear | Inspect padding, small details and the actual exported raster |
| A white box surrounds the mark | Check whether the file has an opaque background |
| The browser shows it, but Search does not | Check Google’s separate eligibility and crawl requirements; processing is not immediate |
Do not repeatedly redraw a logo when the site is loading an old file. Likewise, a successful upload does not prove the design is legible. Keep these as two separate checks: is the correct asset being served, and does it work in the intended context?
FAQ
Is 16 × 16 enough for a favicon?
It is a useful design test size. It should not be your only master or your default answer to every upload requirement. Keep a larger source and provide the sizes your destination asks for.
Can I use the same logo as my website header?
Yes, if its compact shape remains clear. A wide lockup may need an icon-only or initial-based variation.
Does a transparent favicon work on every background?
No. A dark symbol can lose contrast on a dark surface. Check the actual browser context and consider a controlled background or another treatment when needed.
Will changing my favicon improve my search ranking?
This guide makes no ranking claim. Its purpose is a recognizable site icon and a correct asset handoff.