That small icon sitting in a browser tab next to your page title — the favicon — is easy to overlook, but its absence is one of the fastest ways a website looks unfinished. A missing favicon shows a generic blank page icon; a good one reinforces your brand every time someone has multiple tabs open.
What You Need Before Starting
A simple, square image works best — your logo mark, an initial letter, or a simplified icon version of your brand. Favicons are shown very small, so fine detail, thin lines and small text tend to disappear or turn into a blur.
How to Create a Favicon
- Open Favicon Generator.
- Upload your logo or icon image.
- Generate the favicon files.
- Download the package.
- Upload the files to your website following your platform's instructions (usually the root folder, or a theme/settings upload for CMS platforms).
Simplifying a Logo for a Favicon
If your logo includes text or fine detail, it often needs a simplified version for the favicon:
- Use just the symbol or initial, not the full wordmark.
- Increase contrast so the icon stays visible at a tiny size.
- Test it small — shrink the image on your screen to about 16 pixels and see if it's still recognisable.
- Avoid thin outlines, which vanish at small sizes.
If you don't have a simplified icon version of your logo already, cropping just the symbol with the Image Editor is often enough.
Why Favicons Need Multiple Sizes
A single small icon doesn't cover every place it's used. Browser tabs, phone home-screen icons (when someone "adds to home screen"), and browser bookmark bars all render favicons at different sizes, and low-resolution icons look blurry when stretched. See favicon sizes explained for every device for the specific dimensions.
Adding the Favicon to Your Site
The exact steps depend on your platform:
- WordPress: usually uploaded in Appearance → Site Identity, or via your theme's customizer.
- Custom-coded sites: add a
<link rel="icon">tag in the page's<head>, pointing to the favicon file. - Website builders: look for a "Favicon" or "Site Icon" option in general settings.
Why the Old Icon Might Still Show
Browsers cache favicons more aggressively than most other assets. After uploading a new one:
- Hard-refresh the page (often Ctrl+F5 or Cmd+Shift+R).
- Open the site in a private/incognito window.
- Check on a different device if it still doesn't update after a few hours.
Small Detail, Real Impact
A favicon won't move rankings on its own, but it affects how your site looks in browser tabs, bookmarks and search results that display site icons — small polish that makes a site feel complete and trustworthy. For the broader basics of getting a site's technical foundations right, see what is technical SEO.
