A favicon is the small icon that appears in the browser tab, bookmarks, and sometimes search results. Adding a favicon to a static HTML website takes about ten minutes and only needs a few files and a few lines of code. This guide shows exactly what to create and where to put it.
What you will need
- A simple square logo or letter, ideally 512×512 pixels
- Access to your site files (public_html or your project folder)
- A text editor to change the
<head>section of your pages
Step 1: Design an icon that works small
Favicons are shown at tiny sizes, often 16 or 32 pixels. Keep the design simple:
- One bold letter or shape works better than a detailed logo
- Use strong contrast between the shape and the background
- Avoid thin lines and fine text
- Keep it square, with a little padding
Step 2: Create the files
For broad support, prepare these files:
| File | Size | Purpose |
|---|---|---|
favicon.ico |
16, 32 and 48 px in one file | Default request from many browsers |
favicon-96x96.png |
96×96 | Sharp PNG for modern browsers and search |
favicon.svg |
Scalable | Crisp on any screen (optional) |
apple-touch-icon.png |
180×180 | iPhone and iPad home screens |
A free generator such as RealFaviconGenerator can turn one image into all of these. You can also export the sizes from any image editor.
Step 3: Upload the files to your site root
Put the files in the top folder of your site, so they load at https://yourdomain.com/favicon.ico and similar addresses. Open each address in your browser to confirm it shows the image and does not redirect or return an error.
Step 4: Add the link tags
Paste these lines inside the <head> section of your pages:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Two rules matter:
- The tags must be inside
<head>, not<body>. - Use paths that start with
/so they work from every page and folder.
If your site has many pages, add the tags to every page, or to your shared header template if you use one. The home page matters most for search engines.
Step 5: Test it
- Save and upload your changes.
- Open your site in a private window and check the tab.
- Browsers cache favicons aggressively, so if you still see the old one, do a hard refresh or clear the cache.
- Open the developer tools, go to the Network tab, and reload. Look for the favicon requests and confirm they return status
200.
Common problems
| Problem | Likely cause | Fix |
|---|---|---|
| No icon at all | File missing or wrong path | Open the file URL directly |
| Old icon still showing | Browser cache | Hard refresh or private window |
| Blurry icon | Only a tiny file provided | Add the 96×96 PNG and SVG |
| Works on home page only | Tags missing from other pages | Add tags to every page |
| Icon URL redirects | Redirect rule catching the file | Fix your rules, see redirect loop fixes |
Will it show in Google search results?
Adding the tags is the first step. Google reads the favicon when it crawls your home page, and updates can take from a few days to a few weeks. Google's favicon guidelines list the requirements, including that Google must be able to crawl both the icon file and your home page. Read our guide to why a favicon is not showing in Google results and how long Google takes to index a new website for what to expect.
For background on what a favicon is and how it evolved, see the Favicon article on Wikipedia.
Quick checklist
- Simple square design that reads at 16 px
favicon.ico, a 96×96 PNG, optional SVG, and an Apple touch icon- Files uploaded to the site root and loading with status
200 - Link tags inside
<head>on every page - Tested in a private window
- Home page indexing requested in Search Console
The takeaway
Create one simple square icon, export a small set of files, upload them to your site root, and add four link tags to your page head. Test in a private window, then give Google a few weeks to pick it up.
