This article will show you how to add a favicon to your WordPress website.
What is a Favicon?
It’s a small icon that shows up in your browser to the left of the web address.
It also helps distinguish your site in your browsers bookmarks and is also used in some social bookmarking sites as well. Here’s how you can easily create the file and make it show up on your website.
Adding a favicon to WordPress
1. Create a favicon image.
Find an image on your computer that will work small. It should be square and can be a gif, jpg, png, or bmp file that’s not too large.
- Visit Faviconr.com and press the Browse button.
- To make a favicon from your Twitter profile image click here.
Save the file to your desktop ready to be uploaded.
2. Add your favicon to your site.
The favicon can be added using your theme (if it has the feature), a plugin, or using code.
Using a Theme
If you have a theme that has facility for favicons, upload the .ico file using its system then preview it in a fresh browser window.
Using a Favicon Plugin
1. Install the All In One Favicon plugin.
Navigate to Plugins >> Add New and enter ‘All In One Favicon’ into the search field.
After activation go to Settings >> All in one favicon.
2. Upload your .ico file.
In the ICO Frontend section, click the Upload button and navigate to your .ico file.
Click the Save Changes button.
3. Preview your new favicon.
You may need to to a hard-refresh for the icon to show up.
To do this hold down the SHIFT key while pressing the refresh button on your browser.
Using Code to add a Favicon
If you’re comfortable with a little coding and don’t want to add another plugin you can use this method.
1. Login to your WordPress website.
2. Click on the Media tab and select Add New.
3. You can select the file manually or drag and drop it into the upload window.
WordPress will automatically upload the file.
4. When it’s finished you will see a small preview of the image. Click the Edit button.
We’re looking for the File URL.
5. Navigate to Appearance >> Editor. Find the theme files section on the right and click on the Header (header.php) file.
6. In the main code window find the
<head> tag. Place your cursor directly below it.
7. PASTE in the code below, changing the url to the File URL we copied previously.
<link href=”http://thefullurl/to/the/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
8. Click the Update File button.
9. Preview your favicon.
You will need to refresh your website page to see the favicon in action.
The easiest way I have found to test that all is working is to use a different browser to load your page fresh.
If all is done right you should be sporting a new tiny favicon. Yay!