An easy way to brand your blog: personalize your favicon.

Life is getting easier in the WordPress world, you no longer need to access your cpanel to upload an icon, also known as a favicon to your site! This tutorial is going to show you how easy it is to set up a favicon for your blog. You have absolutely no excuse to not have a favicon.

A favicon is a simple way to complete your overall brand.

The first step is to design your icon. The recommended size, according to WordPress is 512 x 512 px. Once you’ve created your icon using your favorite design software save it to your computer and then head over to your WordPress dashboard.

Navigate to Appearances > Customize. This will open your blog with the customizer to the left hand side. Click the tab titled Site Identity and then under Site Icon click Select File.

Upload your icon and then save!

You now have an icon to represent your blog in the browser tab. Note: some browsers will take a few days to recognize the change of your favicon.

Original Post – use this method if your theme does not support the site icon feature.

I am excited to share this tutorial with you because how to create a favicon was my very first blogging related tutorial. A few years ago, I started a craft blog and I noticed a lot of mommy bloggers didn’t have a favicon for their blog. I decided to write a tutorial on how to create a favicon. It was a huge success and generated most of my traffic! It was that post that made me realize I enjoyed writing about blogging more than I did about crafting. I wrote a few more blogging tutorials and eventually decided to start this blog. I revamped that first tutorial for today’s post, and now you can create a favicon for your blog.

Adding your own favicon to your blog is another small way you can personalize your blog and make it more professional. Here is a screen shot of some favicons: Favicons are evolving. In the past, web browsers only viewed a favicon when it was saved as an .ico file. Today, all current web browsers support .png or .gif files. Although they support .png files, 2 of the browsers always search for an .ico file first.  I’m not going to bore you any longer, but if you want to read the complete history go read Jonathan’s post on icons. For now, I decided use an .ico file. Hopefully, in the near future, it will be more widely acceptable to use a .png file. Until then, here are the 4 steps for uploading a favicon to your blog.

There are 4 steps to adding a favicon to your blog:

1. Design a favicon
2. Convert it to a .ico file
3. Upload favicon to website
4. Activate your favicon

1. Design a favicon

Use your favorite editing software to create your favicon image. I have found that the best size for a favicon is 32 x 32 pixels. Some people recommend using 16×16 px. 16×16 px was good in the past, but currently (2014) it is a little small for most browsers and will appear blurry on browsers that display icons at 32 x32 px. Save it as either a .jpeg or .png file and name the file favicon. This is important when it comes to the coding, it will be easier on you in the long run if you do not name it anything else

2. Convert your images to an .ico file

Once that is done, you need to convert the file into an .ico file. Unfortunately, most computer programs do not have this option under save as. I searched high, low and in between all the cracks of the web to find an online converter that keeps the best quality when converting a .png to an .ico. I tried a lot. Some only converted to 16×16 px and we want to use a 32×32 favicon. The ICO Converter is my favorite. It allows you to choose which size you want the .ico file to be saved as and it allows transparency. Also, the quality wasn’t heavily diminished. For our favicon, I selected to output a 32×32 px .ico file with transparency.

3. Upload your favicon to website

Your faviocon file should now be called favicon.ico. Now you need to upload it to your server. To do so, head over to your cpanel a yourblog.com/cpanel Open up the file manager and select document root for: your domain. This will usually open up a new tab.Verify that you are in the file public_html and the click the upload button. Browse t to find your favicon and upload the file. You will most likely be prompted by a box that says, there is already a file called favicon. Click yes, you want to overwrite it. 

4. Activate your favicon

If you have a Genesis theme, scroll down to see how to activate your favicon.

If you don’t use a Genesis theme, you will need to add the code into your header file. To add the favicon code to your header file, go to your WordPress dashboard – Appearance – Editor. Then, click on the title in the right column called header.php. Look for the end header tag, it looks like this: </head>. Copy and paste the following code right above the tag (make sure to change the part that says yourblog, to your domain).

It should look like this:

Except, yours will have your own url in it. Unless you want to use my favicon. Tada! You did it, you coded. Sometimes, it takes a little while for the favicon to show up. Now you have a personalized favicon!

4. Activiate your favicon using Gensis

By now you should have uploaded your favicon to your public_html file in your cpanel (see step 3 if you haven’t). You also need to upload the favicon to your child theme. Inside your file manager, go to the folder called wp-content – themes – your child theme – images. Upload the favicon image just like you did before. You will be prompted to replace the favicon already there, say yes. As long as you saved your icon as favicon.ico you are done! Genesis did all the coding for you and you now have a personalized favicon!

What’s Next? Create a Gravatar