A favicon is an icon or image used in the title bar of a tab in a browser when a particular website is open. Every website can have a 16×16 pixels image on the browser’s title bar, right before the title of the page. It can be used as a branding tool for websites on web browsers while giving visitors a way to identify the page that is open in their browser. The same icon is used in the bookmarks as well.
Every website can have a favicon. We just need to upload an .ico image file that is 16×16 pixels in dimensions. Other image formats like PNG works as well. Then we must add the link rel code before the </head> tag in the HTML of all the pages to use the image.
Here’s how to add a favicon to a WordPress powered Website:
Using Jetpack
The simplest way to add a favicon as well as a mobile icon is with the help of Jetpack and its module called Site Icon. You will have to activate Site Icon in Jetpack. Then use the tool to upload any image and turn it into a shortcut icon.
- Access Settings > General in the administration dashboard.
- Under Site Icon, click the Add a Site Icon.
- In the upload page, browse and choose an image that would fit as a shortcut icon.
- In the next page, crop the image properly. A demo preview for the site as well as mobile icon will be there on the right.
- Hit the Crop Image button to confirm.
You might be interested in: Which Jetpack Features/Modules to Enable and Disable in WordPress?
Manual Method
Create a Favicon
Design a 16×16 favicon image to use for your website. Save it as an .ico file. If your image editor doesn’t support saving files as ICO, then use this online favicon generator website to convert JPG, GIF and PNG images to ICO. They also have a huge pre-designed icon gallery that is free to use.
Adding Favicon
- Upload the created favicon file like favicon.ico to your web host using FTP or a File Manager. Remember the full URL of your favicon like http://www.yoursite.com/favicon.ico.
- Edit header.php of WordPress located as /wp-content/themes/<your-theme>/header.php.
- Add the line and save the file.
[php light=”true”]<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" />[/php]
If a line that like already exists, you will have to edit it or overwrite it.
Please note that after adding the site icon, the change goes into effect immediately. But to see it in your browser, you will have to clear the cache and restart the browser. Visitors who don’t have the website cached in their browser or first time visitors will directly see the favicon in their first visit.