A favicon is the small icon that appears in a browser tab, bookmarks bar, and search results next to your website's name. It might seem minor, but a missing or blank favicon can make your site look unfinished to visitors. Adding one is quick, and the steps depend on how your website is built.
What You Need Before You Start
Prepare your icon image first:
- A square image, ideally 512x512 pixels or larger, saved as .png or .ico.
- A simple design. Favicons display very small, so detailed logos or text often become unreadable.
- A transparent background if your logo isn't already on a solid color.
If you don't have an .ico file, you can usually use a .png directly. Most modern browsers and content management systems accept .png favicons without any conversion.
If Your Website Runs on WordPress
WordPress has a built-in way to set a favicon (called a "Site Icon") without editing any code:
- Log in to your WordPress admin dashboard.
- Go to Appearance, then Customize.
- Click Site Identity.
- Under Site Icon, click Select Site Icon and upload your image.
- Crop the image if prompted, then click Publish.
Some themes also let you set a site icon under Settings, then General, further down the page. Either method works the same way.
If Your Website Is Custom-Built (Not WordPress)
For a custom HTML site or one built without a CMS, you add the favicon by uploading the image file and linking to it in your site's code.
- Upload your icon file (commonly named favicon.ico or favicon.png) to the root folder of your website using your hosting account's File Manager or an FTP client.
- Open the main <head> section of your website's HTML, usually in a file like index.html or a shared header template file.
- Add a line similar to this inside the <head> tags:
<link rel="icon" href="/favicon.ico" type="image/x-icon"> - Save the file and re-upload it if you edited it locally.
If your site uses a different platform, such as an e-commerce system or a page builder, check whether it has a dedicated favicon or site icon setting in its admin area before editing code directly.
Why the Favicon Might Not Show Up Right Away
Browsers cache favicons aggressively, often more than regular page content. If you've uploaded a new favicon but still see the old one, or none at all, it's usually a caching issue rather than a mistake in your setup.
- Try opening your website in a private or incognito browser window.
- Clear your browser's cache, then reload the page.
- Give it some time. On some browsers the favicon only refreshes a day or two later, even after a cache clear.
For step-by-step instructions, see How to Clear Your Browser Cache to See Your Website's Latest Changes.