Adding a Favicon to Your Blog (the right way)

If you’ve been blogging for awhile, you might know that it’s the little details you add to your website that can make or break your blog’s brand.  One of these ‘little details’ that I see missing from a lot of blogs is the favicon. You might know your favicon better as the little icon that appears by a site’s name when you’re looking through the tabs on your web browser–like the rainbow-colored G on your Google tab or the sleek black and white ‘B’ of the Bloglovin tab. How about your favicon? Does it tie in to your brand? Is it uniquely you?

If you can answer no to these questions, read on–today I’ll be talking about the right way to add a favicon to your blog on either the Blogger or WordPress platforms.

You might not think so but a favicon is a simple way to make your site look more professional. Today I'm showing you how to add a favicon to your WordPress or blogger blog.

 

If You’re on Blogger:

As always, Blogger tends to be a little simpler….so if you’re still seeing the little orange/white B next to your blog name up on your Tabs manager, it’s a really easy fix. First of all, you’ll want to create your favicon. You can use any photo editing software you’re comfortable with–Photoshop, Picmonkey, or Canva are just some of your options. Just be sure that 1) your image is SQUARE and 2) the background of your image is TRANSPARENT. Be sure to save your image in PNG format and you’re ready for the next step. Your image should look something like this:

add-favicon-1

Next make sure you’re logged in to your Blogger blog. Click on the blog you want to add your favicon too and look for LAYOUT on your menu (it should be on the left side of your screen). Once you click on the Layout tab, you should see FAVICON as one of your gadgets. Click edit–a new page will open you’ll be able to select the file you want to choose as your favicon. Click SAVE and you’re done.

add-favicon-2

Congrats–you now have your own personalized favicon! (If you don’t see it pop up on your blog tab right away, not to worry–sometimes it takes a few minutes for you to see the changes.)

 If You’re on WordPress–OPTION 1 (available on some WP themes):

Of course, you’ll want to be signed in to your WordPress account. Check out your toolbar menu on the left of your screen–you should see an option called CUSTOMIZE. Click on it and you’ll be taken to your customization page–you should see a menu on the left of your screen. Choose SITE IDENTITY and click on it. On this page of your menu, you’ll be able to choose an image for your SITE ICON aka your favicon.

add-favicon-3

Be sure to check the specifications (for example my theme requires your icon to be an at least 512 pixel square) and adjust your image accordingly. Save your image as your site icon and you’re done!

If you have a Genesis theme (and you really should), Option 1 should work perfectly for you. However if your theme doesn’t have the option to choose your favicon through the Customize menu, continue on to Option 2.

If You’re on WordPress–OPTION 2 (works for all WP themes):

For this option, we will be diving into the backend of your blog, so the first thing you’ll want to do is backup your theme. Don’t worry though–in this tutorial, we’ll pretty much just be wading through folders and only changing one item at the very end. You’ll need to have access to your CPanel and know the specific name of the theme you’re working on (you can find this under Appearance<Themes) so gather all that information before we start.

Also for this option, you’ll need to slightly alter the favicon you’ve created–you’ll have to change your file format from PNG to ICO. I use a free site called ConvertICO to accomplish this–all you’ll have to do is choose the image you’ll be using and it will automatically change it to an ICO format. Save your new favicon–be sure to name it FAVICON and check to be sure the file format says WINDOWS ICON IMAGE (aka ICO).

add-favicon-7

Once you’ve saved your new favicon, log in to your CPanel via your hosting manager (I use A Small Orange) and be sure you’re in File Manager.

add-favicon-4

Look for a folder called PUBLIC_HTML and click on it. You’ll probably see a few options depending on how many sites you run–click on the folder named YOURBLOGURL.COM (that would be ladyofthehouseblog.com for me). The folder will open up and you’ll be in the backend of your site!  Click on the folder named WP-CONTENT.

add-favicon-5

In your WP-CONTENT folder, you’ll see yet another folder called THEMES–click on it. Take a deep breath. We’re almost there! Take a look at the folders in your Themes file. You should see one that looks almost exactly like the theme name I told you to write down earlier. Click on the name of your theme.

add-favicon-6

Finally a folder that’s manageable!! Check for your IMAGES folder and click on it. You should see a file called FAVICON.ICO. Delete this file and upload the ICO icon you created in the first step. Again, be sure that the file names match exactly (if they don’t, your new favicon won’t appear). Once you’ve uploaded your new favicon, save and log out of your CPanel, wait a few minutes or delete your browser cache and check out your brand new favicon!!

And there you have it! Wasn’t that easy?!

LET’S TALK:

Is there a blog design tutorial you’d like to see me tackle? Leave me a comment and let me know!

Subscribe to the Newsletter

Subscribe to our monthly newsletter and get access to our exclusive library of printables!