Blog

How to Make a Favicon: Sizes, Formats and the HTML You Need

· 4 min read · by the ProFigma team

How to Make a Favicon: Sizes, Formats and the HTML You Need

The favicon is the small icon you see in a browser tab, in bookmarks and in search results. It is tiny, but it makes a site look finished and helps people find your tab among twenty others. This guide shows how to make one, which files you need, and the code to add.

What files do you need?

The old advice was "just add a favicon.ico". Today a complete set covers browsers, phones and home screens:

  • favicon.ico containing 16, 32 and 48 pixel versions. Older browsers and many tools still ask for this file by name.
  • favicon-32x32.png and favicon-16x16.png for modern browser tabs.
  • apple-touch-icon.png at 180 × 180 for iPhones and iPads when someone saves your site to the home screen.
  • android-chrome-192x192.png and 512x512.png for Android and for installable web apps.
  • site.webmanifest, a small file that lists the icons and your app name.

Make them in one go

You can make a whole set from a logo, a letter or an emoji with our free favicon generator. It runs in your browser, so your logo is never uploaded.

  1. Drop your logo, or switch to Text or emoji and type a letter.
  2. Pick a shape (square, rounded or circle), a background color and the padding.
  3. Check the preview of the browser tab and each size.
  4. Press Download favicon pack (ZIP).

The HTML to add

Upload the files to the root folder of your site, then paste this into the <head> of your pages:

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#7c3aed">

The generator gives you this snippet ready to copy, with your colors.

Design tips for a tiny icon

  • Keep it simple. At 16 pixels, detail turns to mush. A bold shape or a single letter reads best.
  • Start from a square image that is at least 512 by 512 pixels.
  • Add a little padding so the logo does not touch the edges, especially in a circle.
  • Test on a dark tab. A dark transparent logo can disappear in dark mode, so a colored background is safer.
  • Apple icons can't be transparent. iPhones fill transparency with black, so give the Apple icon a solid background.

Why isn't my new favicon showing?

Browsers cache favicons for a long time. Try these:

  • Open the page in a private window.
  • Add a version to the file name, like /favicon-32x32.png?v=2.
  • Make sure the files are in the right folder and the HTML points to them.
  • Be patient with Google. It can take days or weeks to update the icon in search results.

An SVG favicon that follows dark mode

An SVG favicon can change color with the visitor's theme, which a PNG can't. Put a small style rule inside the SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #7c3aed; }
    @media (prefers-color-scheme: dark) { path { fill: #c4b5fd; } }
  </style>
  <path d="M16 3 29 28H3z"/>
</svg>

Link it with <link rel="icon" href="/favicon.svg" type="image/svg+xml"> and keep the favicon.ico after it as a fallback. Browsers that do not support SVG icons will use the ICO.

What Google looks for

For the icon next to your result in Google Search, the file must be crawlable, the image should be a square, and its size should be a multiple of 48 pixels, such as 48, 96 or 144. Use one stable address for it and do not block it in robots.txt. After you change it, Google can take days or weeks to refresh it, and you cannot speed that up.

Adding it to common platforms

  • WordPress: go to Appearance, Customize, Site Identity and upload a square image of at least 512 by 512 pixels as the Site Icon.
  • A static site or a framework: put the files in the public folder so they are served from the root, then add the link tags to the shared head.
  • Shopify, Wix and Squarespace: each has a favicon setting in the theme or site settings. Upload a square PNG.

A quick troubleshooting list

  1. Open yoursite.com/favicon.ico directly. If you see a 404, the file is in the wrong place.
  2. View the page source and check that the link tags point to files that exist.
  3. Check that the files are not behind a login or a redirect loop.
  4. Test in a private window to avoid the cache.
  5. Check the file is really an image. A renamed PNG can fail in some browsers when it is saved as .ico, so use a proper ICO export.

Frequently asked questions

What size should a favicon be?

32 by 32 pixels is the classic size. Also provide 16, 48, 180, 192 and 512 for full coverage.

Can I use an SVG favicon?

Yes, modern browsers support it, but keep a favicon.ico for older ones.

Can I use an emoji as a favicon?

Yes. It is a quick way to get a recognisable icon. The generator can turn an emoji into a full set of files.

Make yours now: open the favicon generator.

Keep reading