</>DevUtilityKits
One Toolkit. Every Developer.
⌕Ctrl K
Explore Tools →
Web Generators

How to Add a Favicon to Your Website (All Sizes)

A favicon is the small icon in browser tabs, bookmarks and search results. A complete setup has more than one file, because browsers, iPhones and Android devices ask for different sizes. The steps below take you from one logo to a working favicon.

Last updated: 2 November 2026

Open Favicon Generator →

Step-by-step

  1. Choose a simple, square logo, ideally at least 512 pixels wide. An SVG or a transparent PNG works best.
  2. Open the Favicon Generator, upload the logo and check the preview at 16 and 32 pixels. If it is hard to recognize, simplify the image.
  3. Choose the files to include and generate the package, then download the ZIP and unzip it.
  4. Upload the files to the root folder of your website, so that /favicon.ico loads in a browser.
  5. Paste the generated HTML code inside the head section of every page, or into your site template.
  6. Open your site in a private window and check the tab. If the old icon still shows, clear the browser cache.

Which files you need

Each file has a job.

  • favicon.ico holds 16, 32 and 48 pixel images. Browsers and other tools request /favicon.ico automatically, so it is the safest fallback.
  • PNG icons at 16, 32 and 96 pixels cover browser tabs and high-density screens. Google Search recommends a favicon whose size is a multiple of 48 pixels.
  • apple-touch-icon.png at 180 pixels is the icon used when someone adds your site to an iPhone or iPad home screen.
  • android-chrome icons at 192 and 512 pixels, listed in site.webmanifest, are used by Android and installed web apps.
  • favicon.svg is optional. Modern browsers scale an SVG to any size, and it is the sharpest option when your logo is a vector.

The HTML code

The generator writes the link tags for the files you chose. They look like this: a link with rel icon pointing to /favicon.ico, links for the PNG sizes, a link with rel apple-touch-icon, a link to /site.webmanifest and a theme-color meta tag. Paste them inside the head section, and keep the file paths matching where you uploaded the files.

Frameworks and site builders

In a Next.js project that uses the app folder, place favicon.ico, icon files and apple-icon files in the app folder, and Next.js adds the tags for you. On WordPress, open the Customizer, then Site Identity, and set the Site Icon, which should be a square image of at least 512 pixels. For a plain HTML site, use the generated code in your template.

Transparent backgrounds on iPhone

iPhones fill transparent areas of the Apple touch icon with black. The Favicon Generator always gives that icon a solid background color, so choose a color that suits your logo.

USE THE TOOL

Finish the task with DevUtilityKits

Use the relevant online utility, check the result, and continue with your development workflow.

Open Favicon Generator →Open ICO Converter →
FAQ

Frequently asked questions

What size should a favicon be?

There is no single size. Use a favicon.ico with 16, 32 and 48 pixel images, PNG icons such as 32 and 96 pixels, a 180 pixel Apple touch icon, and 192 and 512 pixel icons for Android.

Why is my favicon not showing?

The most common causes are a cached old icon, a wrong file path, a favicon file that returns a 404 error, or missing link tags. Open /favicon.ico in your browser to check the file loads, then test in a private window.

Why does my favicon not appear in Google Search?

Google must be able to crawl your home page and the favicon file, and it can take days or weeks to update. Make sure robots.txt does not block the icon, and use a square image whose size is a multiple of 48 pixels.

Do I need both ICO and PNG files?

It is best to include both. favicon.ico is the universal fallback, and PNG files give sharper icons on modern browsers and devices.

Can I use an SVG as my favicon?

Yes. Modern browsers support SVG favicons and scale them cleanly. Keep a favicon.ico as a fallback for older browsers and tools.