ToolsOfWeb
Open menu
ToolsPDFImagesTextDevCalculatorResume
Blog
Try tools

How to Create a Favicon for Your Website (Free, No Upload)

A favicon is the little icon in the browser tab next to your site’s title. It also shows up in bookmarks, browser history, mobile search results, and on phone home screens. Sites without one look unfinished — and a blurry, pixelated one isn’t much better.

This guide shows how to create a favicon for your website free, without uploading your logo anywhere, which files you actually need in 2026 (it’s fewer than you think), and how to install them — plus fixes for the most common “my favicon isn’t showing” problems.

Which favicon files you actually need

Old tutorials tell you to generate 20+ files. You don’t need them. Five files plus a manifest cover every modern browser, phone, and PWA install prompt:

  • favicon.ico — the classic. One file containing 16, 32, and 48px images for tabs, bookmarks, RSS readers, and tools that still request /favicon.ico directly.
  • favicon.svg — vector icon for modern browsers (only useful if your logo is vector to begin with).
  • apple-touch-icon.png — 180×180 for iPhone/iPad home screens.
  • android-chrome-192x192.png and android-chrome-512x512.png — for Android home screens and installable web apps.
  • site.webmanifest — a small JSON file that tells Android which icons to use, plus your app name and theme color.

Skip the legacy extras — Windows tile XML files and Safari pinned-tab SVGs are dead weight in 2026. Fewer files means less to maintain and nothing for browsers to misinterpret.

Step-by-step: generate your favicon package

  1. Open the Favicon Generator.
  2. Upload your logo — PNG, JPG, WebP, or SVG. Square artwork at 512×512px or larger gives the crispest results; non-square logos are center-cropped automatically.
  3. Enter your website name and pick a theme color (it tints the browser UI on mobile and goes into the manifest).
  4. Choose an icon background. Transparent keeps your logo as-is, but note iOS displays transparent touch icons on black — white or your theme color avoids surprises.
  5. Click “Generate favicon package”, then download the files individually or as one ZIP.
  6. Copy the HTML snippet the tool gives you — you’ll paste it into your pages next.

Everything runs in your browser. Your logo is never uploaded, which matters if it’s an unreleased brand asset.

How to add the favicon to your site

Upload all the generated files to your website’s root folder (the same folder as index.html), then paste the snippet inside the <head> of your pages:

<!-- Favicon & app icons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

On WordPress, skip the manual HTML: go to Customizer → Site Identity → Site Icon and upload the 512×512 PNG — WordPress generates its own sizes from it. On website builders (Wix, Squarespace, Webflow), look for “favicon” or “site icon” in the site settings and upload the 180×180 or 512×512 PNG.

Design tips for a favicon that stays crisp

  • Simplify ruthlessly. At 16×16 pixels, fine detail turns to mush. Use a bold mark, a single letter, or a simplified version of your logo — not the full lockup.
  • Check contrast on dark tabs. Many users run dark mode; a dark logo on a transparent background disappears. Test on both.
  • Leave padding. iOS rounds the corners of touch icons, so keep the important parts away from the edges.
  • Preview at 16px before shipping. If you can’t tell what it is at tab size, simplify further.

Common issues (and quick fixes)

1) My favicon isn’t showing up

Almost always caching. Browsers cache favicons aggressively — test in a private/incognito window, or hard-refresh (Ctrl+Shift+R / Cmd+Shift+R). If it’s a brand-new site, wait a few minutes and check the file URLs directly (yoursite.com/favicon.ico) to confirm they load.

2) It looks blurry in the tab

Your source was probably too small or overly detailed. Regenerate from a 512px-or-larger master, and simplify the artwork — the multi-size .ico exists precisely so the 16px version is rendered from a clean source, not downscaled in a lossy way.

3) iPhone home-screen icon has a black background

iOS composites transparent PNGs onto black. Regenerate with a white (or brand-color) background selected, and the touch icon will look intentional.

4) The SVG favicon doesn’t show in some browser

Older browsers don’t support SVG favicons — that’s exactly why the .ico is listed first in the snippet. As long as favicon.ico is in place, every browser falls back to something crisp.

5) Google search shows no icon (or the wrong one)

Google requires the icon to be at least 48px and crawlable. The 48px image inside favicon.ico (or the 192px PNG) satisfies this — then it’s just a matter of waiting for Google to recrawl, which can take days.

Related tools