Let’s add a Favicon to our WordPress website. A favicon is the little icon in the browser tab.
You need to make the favicon image before you can add it to your site or you can use a pre-made icon. It’s best to use an image that will still look good at the smaller size – that is 16px x 16px.
You can use your website logo, if it looks good in the smaller size.
An example of a favicon icon can be seen in the 2 Google websites in the image below.
Let’s make our own Favicon!
- Go to the web browser > type the following:
- http://tools.dynamicdrive.com/favicon/
- Go to Browse and select an image off your computer (business logo)
- Click on Create Icon
- Click on Download Favicon
- Save to a folder on your computer or your desktop
- Do NOT rename the file
- You will see it has a different file extension – .ico
- This is correct
Now login to your WordPress admin
- Go to the Plugins panel
- Go to Add New
- Got to Search and type in All In One Favicon
- Locate – All In One Favicon
- Click on Install Now – OK
- Once installed – click on ActivatePlugin
- Go to Settings panel
- Click on– All in one Favicon link
- In the settings
- Go to ICO Frontend:
- Upload your Favicon image here
- Click on Save Changes
- Go the web browser and refresh the page to see your Favicon icon
Sometimes it may take a few days to show depending on the browser.
Add a Favicon to a non WordPress site.
If you want to add a favicon to a non WordPress site then you will have to put some code into the head tag of your home page and drag the favicon.ico image onto your server into the root folder (the main folder) via FTP. You can use FileZilla to FTP files to yoour server. You just need your login details to access it and then simply drag and drop your icon into the main folder inside www.
This is the code that you need to place into the head tag of your home page.
<html>
<head>
<title>Title of page</title>
<link rel=”shortcut icon” href=”/favicon.ico” />
</head>
<body>
page content
</body>
</html>
By Jodi Allbon
Original content 2013
