PixNudge
English

How to Make a Favicon (ICO) for Your Website

A favicon is the small icon shown in browser tabs, bookmarks and search results. A missing or blurry favicon makes a site look unfinished. Here is how to create a sharp one from your existing logo.

What you need

  • A square version of your logo, ideally a PNG with a transparent background.
  • At least 256 × 256 pixels, so even the largest icon size is sharp.
  • A simple design. Fine details and small text disappear at 16 pixels — a single letter or symbol works best.

Create the ICO file

  1. Open the PixNudge image converter.
  2. Choose ICO as the output format.
  3. Select the sizes to include. 32 px is selected by default; for a complete favicon, also select 16, 48 and 256.
  4. Add your logo and download the .ico file.

All selected sizes are stored in a single file, and browsers and Windows automatically pick the best one for each place. Use the Preview button to see every size at its real pixel size before downloading.

Which sizes do you need?

Size Where it is used
16 × 16 Browser tabs on standard screens
32 × 32 Browser tabs on high-resolution screens, taskbar
48 × 48 Windows desktop and file explorer
256 × 256 Large Windows icons and high-DPI displays

If you only choose 32 px, the icon will look blurry wherever a larger size is needed, because it gets stretched.

Add it to your website

Rename the file to favicon.ico and place it in the root folder of your site, so it is available at https://yoursite.com/favicon.ico. Most browsers look there automatically. To be explicit, add this line inside the <head> of your pages:

<link rel="icon" href="/favicon.ico" sizes="any">

For iPhones and iPads, also export a 180 × 180 PNG of your logo and add:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Why does my favicon look blurry?

  • The source image was too small. Start from at least 256 × 256 px.
  • The logo has too much detail. Simplify it for small sizes.
  • You are viewing it enlarged. Image viewers stretch a 32 px icon to fill the window. Check it in a real browser tab instead.
  • The browser cached the old icon. Open the favicon URL directly and refresh, or try a private window.

Summary

Start from a square, high-resolution logo, convert it to ICO with sizes 16, 32, 48 and 256 using the free PixNudge converter, and place it at the root of your website.

More guides