How to Add a Favicon to a WordPress Blog or Website
Favicons not only make your blog look more professional, but they also make it easier for people to find it in their long lists of bookmarks and favorites. Anyone can create a favicon and add it to their third-party hosted WordPress blog or website. Just follow the steps below to give your blog some extra brand power with a favicon.
1. Create Your Favicon File
Your favicon should be a 16x16-pixel image saved in .ico format with the file name favicon.ico. There are a number of free favicon generators online. For example, popular options include Dynamic Drive, Faviconer, and Favicon Generator. With these tools, you simply upload the image that you want to use for your favicon, click a button, and your favicon is instantly created. You can download it to your desktop in .ico format and move onto Step 2!Warning: It is possible to use a .png, .jpg, or .gif file as a favicon, but older browsers might not support a file format other than .ico for a favicon. For browsers that don't support these file types for favicons, visitors might see a "404 not found" error. Therefore, it's best to use a .ico file to avoid any potential problems.
2. Upload Your Favicon File to Your Blog Host
Once your favicon file has been created, you need to upload it to the root directory of your WordPress blog. You can upload it the file via FTP or log into your hosting account, navigate to the root directory, and upload it directly. Either way, the file must be accessible at yoursitename.com/favicon.ico.Warning: If you upload your favicon file to the wrong location, then you'll need to re-upload it to the correct location. If it's not in the right place, your favicon won't be visible to any of your blog visitors.
3. Insert the Necessary Code into Your Blog's Theme
Once your favicon file has been uploaded to the correct location, you need to log into your WordPress account and navigate to your theme editor. Find the header.php file in the list of theme files on the right side or your screen and click on it. The editor box now shows the header.php file code. To add your favicon to your blog, you need to enter the appropriate code between the
<head>and
</head>tags in the header.php file. The code you need to insert is:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">Just click in the editor box where you want to add the code and type it in. Click the Save button, and your done. Refresh your browser, and you should see your favicon next to your blog's URL. If you don't see it immediately, don't worry. Sometimes it can take a day or two for it to appear.
Warning: It's always a good idea to copy all of the contents in the editor box and paste them into an HTML editor, Notepad (for Windows users), or TextEditor (for Mac users) before you make any changes to the code. That way, if something goes wrong, you can always paste the original code back into your theme editor to revert to the prior version of code.
