How to Create a Favicon in 5 Minutes
Creating a favicon takes three steps: design a simple mark that survives 16 pixels, generate every size (ICO, PNGs, Apple touch icon), and paste the HTML tags into your site's head. Do all three free with our favicon generator — the full walkthrough is below.
Step 1: design a mark that survives 16 pixels
Favicon design is an exercise in ruthless simplification, because your canvas is 16 by 16 pixels — 256 dots total. Use one bold element: a single letter, a simple geometric mark, or a minimal symbol. Full wordmarks turn to gray mush; detailed logos become unrecognizable blobs. Test candidates with the squint test: shrink the design to 16 pixels (or squint at it from arm's length) — if you cannot identify it instantly, simplify further. Contrast is everything: the mark must read against both light and dark browser themes, so either use a solid background shape (rounded square in your brand color with a white letter) or a mark with enough weight to survive transparency. Prototype background treatments with our CSS gradient generator and lock exact brand values with our RGB to hex converter before you commit. Avoid thin strokes, gradients that band at small sizes, and text smaller than the mark itself. Brand-color backgrounds are the professional default — they make your tab findable in a sea of white tabs, which is the favicon's actual job. If you have an existing logo, extract its simplest element rather than shrinking the whole lockup: the Nike swoosh alone, not the swoosh plus wordmark. Spend your design minutes here, because no generator can fix a mark that was too complex to begin with. Our CSS gradient generator can help prototype background treatments before you commit.
Step 2: generate every size from one source
Start from the largest, cleanest source you have — a 512x512 PNG or an SVG of your mark — and generate downward; upscaling a 64-pixel source to 512 produces blur that no export setting fixes. Upload the source to our favicon generator and download the complete set: favicon.ico bundling 16, 32, and 48 pixel versions for legacy browsers, PNG files at 16x16, 32x32, and 48x48 for modern browsers, apple-touch-icon.png at 180x180 for iOS, android-chrome-192x192.png and android-chrome-512x512.png for the PWA manifest, and optionally an SVG favicon for crisp modern-browser rendering. Check the 16-pixel output specifically — this is where generation reveals design flaws, and it is far cheaper to simplify the mark now than after deployment. Convert your brand colors to exact hex values with our RGB to hex converter so the generated set matches your palette precisely, and keep any SVG
Step 3: install with the exact HTML
Place the files at your site root (https://yoursite.com/favicon.ico) — browsers and tools still request the conventional path — and declare them explicitly in your HTML head. The modern snippet: link rel='icon' href='/favicon.ico' sizes='48x48' for the legacy container, link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' and the 16x16 equivalent, link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' for iOS, and if you have the SVG, link rel='icon' type='image/svg+xml' href='/icon.svg' listed first so modern browsers prefer it. For PWAs, add link rel='manifest' href='/site.webmanifest' with the 192 and 512 icons declared inside the manifest. Include the tags in your site template, not on individual pages, so every page inherits them. Two gotchas: the apple-touch-icon must have an opaque background (iOS does not support transparency here — it renders transparent regions as black), and the manifest icons need 'purpose': 'any' at minimum, plus a maskable variant with padding inside the safe zone for Android adaptive icons. Validate with the checks in our favicon size guide — desktop tab, iOS home screen, Android install, and Google Search.
Testing across browsers and devices
Favicons fail silently and cache aggressively, so test methodically. Desktop browsers: check Chrome, Firefox, Safari, and Edge — each has slightly different fallback preferences, and a setup that works in Chrome can show the default globe in Safari if the ICO is malformed. Hard-refresh or test in a fresh profile, because browsers cache favicons far longer than page content; a 'broken' icon is often just a stale cache. Mobile: use 'Add to Home Screen' on both iOS and Android to verify the touch icons render as designed rather than as page screenshots. Google Search: confirm your icon appears in mobile search results — Google's requirements (multiple of 48px, square, stable crawlable URL) are stricter than browsers'. Dark mode: toggle the OS theme and check tab visibility in both modes. Bookmarks bar: bookmark the page and confirm the icon appears in the bookmarks bar and history. If anything fails, work the checklist in order: files at correct paths, tags spelled correctly in the head, image files valid (open each PNG directly), no hotlink protection blocking, then cache-clear and retest. For a catalog of what goes wrong at the design level, common favicon mistakes covers the visual failure modes, and favicon vs app icon clarifies which asset each platform actually wants.
Keeping your favicon fresh
A favicon is not lifetime infrastructure — revisit it on a schedule. Rebrand check: any logo, color, or typography change must propagate to the favicon set the same day, or your tabs and search results advertise the old brand. Annual audit: once a year, re-run the cross-platform verification — browsers change fallback behavior, Google tweaks its search display requirements, and OS updates alter home-screen rendering. Seasonal variants are a legitimate engagement trick some brands use (a holiday-themed favicon in December), but weigh the charm against the cache-invalidation headache — most users will not see the change for days. Monitor Search Console for favicon warnings; Google explicitly reports when your icon fails its requirements, which is free QA. And keep your source files: the original 512px master and the generation settings, stored with your brand assets, turn a future rebrand from a redesign project into a ten-minute export. If you ever need to document the setup for a developer handoff, our Markdown to HTML converter formats the snippet and file list cleanly. The ongoing cost of a favicon is near zero; the ongoing cost of a broken one is paid in brand impressions every single day.