How To Manually Add a Favicon To WordPress

Adding a favicon to your blog can really make it stand out and give it a more custom and professional look, not to mention a great way to brand your site. If somebody has a lot of tabs open and wants to navigate to yours quickly, a flashy favicon will make it much easier to pick it out from the rest.

What is a favicon? Favicon stands for “Favorites Icon”. It’s also known as a shortcut icon, website icon, URL icon, or bookmark icon, A favicon is a small 16×16 pixel image that appears next to the page title tab in a web browser.

Here’s what ours looks like in Chrome. It’s pretty similar in other browsers such as Firefox, Internet Explorer, Safari, etc.

Each site in your bookmarks menu also shows the favicon next to it:

There are three easy steps involved in getting a favicon onto your site:

[toc]

[blank]

Get Yourself a Good Looking Favicon

Find a graphic you would like to use that will be a good fit for your site. It should be clear, simple, and distinct as a small 16×16 image. Sometimes an icon will look good when it’s bigger, but after it’s shrunk down it can end up looking like a mashed up pile of discombobulated pixels!

There’s a ton of places on the web to find free favicons to use. A great resource that I use a lot for finding themed favicons (or to import my own images and convert them into favicons) is favicon.cc.

Another thing you could do is use the tool over at GetFavicon.org to grab any website’s icon to use as a starting point for designing your own. You obviously want to change it up and make it unique for your own site, unless it’s generic and would work for any site. It’s really up to you.

*You can also take an image and simply resize it using an image editor to be 16×16 pixels. Just be sure to save it as either a .png or .gif image format. A .ico will also work, but most image editors don’t support the .ico format. Any of the three formats will do the trick.

Upload Your Favicon To Your Server

*Note – This tutorial is mainly for themes that don’t have options for favicons built into the options panel. Before you continue with this tutorial, make sure you check to see if your particular wordpress theme supports favicons in the options. It’ll save you some time and hassle! If not, don’t worry about it.

Once you’ve got your image ready to go, upload it to your site’s root directory (or any directory you want). If you’re familiar with using an FTP program, it’s definitely the easiest way to upload files quickly and easily. Skip down to the next section after you’ve uploaded your image.

If you’re not familiar with FTP and have access to your site’s cPanel account, here’s a quick tutorial on how to upload a file to your sites root directory.

In cPanel

• Scroll down to the “File Manager” icon and open it up.

• Make sure that “Web Root” is selected and then click “Go”.

• This will bring you to the root (public_html) of your domain. From here you’ll click on the “Upload” button in the top menu.

• Click on “Choose File” and navigate to where your favicon is located on your local drive.

• After it’s done uploading, head on back to your root directory by clicking on the link that looks like this: Back to /home/user/public_html
• Check to make sure you can see your file in the listings. That’s it!

** You can use this method to upload any kind of file onto your site using cPanel.

Add the Favicon Code To Your Theme

Using either FTP or the cPanel file manager, navigate to your wordpress theme files. From the root directory (public_html):

wp-content –> themes –> (your theme)

Once you reach your theme’s directory of files, find the one named “header.php” and open it up for editing in either FTP or cPanel.

In cPanel:

• After you select header.php from the list, click on the “Code Editor” icon in the top navigation.

 

• Don’t worry about the encoding check stuff. Just click on “Edit”

• Once you’re inside the header.php file in your editor of choice, go down a few lines and find thetag. Immediately after this, make a new line and insert the following code:

[sourcecode language="html" gutter="false" toolbar="false"]<link rel="Shortcut Icon" href="http://content.besttipsforblogging.com/wp-content/themes/dynamik/css/images/favicon.png" type="image/x-icon" />[/sourcecode]

• Change “yoursite.com” to your own domain name and also change the name/extention of the image to match the one you just uploaded.
• Save header.php (in cPanel, click “Save Changes” in the upper right corner) and go open up your site (or refresh it) to see if the new favicon is showing up properly.
• If it’s still not showing up, you may need to clear your browser cache before you’ll be able to see it.
• ** Note – There are some themes that don’t have the header.php in the standard location. You may have to look around your theme files to find it. Also, look through other files and try to find the tag. That’s what you’re really looking for.

If it didn’t work out for some reason, grab yourself two beers and leave a comment below