Tutorial: How to Create a Favicon For Your Blog

Regardless of whether you are using WordPress or Blogger (or another blogging platform), adding a favicon will help make your blog stand out. Just like with your blog button, a favicon is a branding tool. It allows you to say to the world, “Hey! My blog or website is unique, different from the rest.”

What is a Favicon?

Anyone who uses the internet has seen a favicon. They are the little custom icon or graphic that appears on the left side of the website’s URL in the address bar. Almost all browsers support favicons. Virtually all professional organizations have a favicon. Take a look at Yahoo, CNN, MSN, Google – they all have a small icon (favicon) that makes them distinct!

Here’s my favicon (I used a pregnant woman’s belly because it neatly describes what my blog is about – pregnancy and babies!):

Favicon is short for Favorites icon. They are sometimes called “bookmark icons.” Favicons appear on tabs of tabbed browsers (such as Firefox, Chrome, Safari), your bookmarked sites, internet shortcuts on your desktop, and etc. If you are looking to build an audience and carve a niche for yourself on the web, you must have a favicon. Or else, you end up blending into the crowd – just another blog out of the billions on the net.

How to Create a Favicon – The Easy Way

Here are some favicon basics you should know. Favicons are 16×16 – they are tiny! Favicons usually have the extention .ico, but in some cases, you can use .JPG, .GIF, and .PNG files for your favicon. (If you are self-hosting your blog, you need to create a favicon.ico file and upload it to your server.)

If you have access to Photoshop, you can easily create your own favicon from scratch. Photoshop gives you the option to save the file as .ico. (For this blog post, I am showing you the easy – non graphic designer-way of creating a favicon. All you need is a photo or logo that you want to use.)

If you are a newbie and have no graphic design experience, there are a variety of websites that help you create a favicon.ico file. Just google “Favicon Generator” and you’ll come across several websites.

Here are a few Favicon Generator websites that I’ve come across.

• Favicon.cc (http://www.favicon.cc/)
• Dynamic Drive – Favicon Generator (http://tools.dynamicdrive.com/favicon/)
• Favicon from Pics – (http://tools.dynamicdrive.com/favicon/)
• Favicon Generator (http://www.degraeve.com/favicon/)

Step-by-Step Picture Favicon Tutorial – Using Favicon.CC

You can use any of the above websites to create your Favicon, but I will use the Favicon.cc website as my example. I like the overall design of the website best, and it’s the least cluttered with ads.

Step 1: You will need a photo or image that you want to use. You import the image that you want to use.

Step 2: I will use my professional headshot as an example. You can choose to keep dimensions or shrink to square icon. I choose to shrink to square icon to make it easier for me.

Step 3: You will be taken to a screen that looks like this (screenshot below). Your image will look fuzzy, but that’s because it’s zoomed in. (Remember that a favicon is only 16×16!) Look below the fuzzy image and see where it says “Preview.” It shows what your favicon will look like. I’ve circled it for you. Click “Download Favicon.” (You don’t need to right-click. Just click on it with your left mouse button.)

Step 5: The Favicon will be automatically downloaded into your browser’s default download folder. (It will be downloaded as an .ico file – which is exactly what you need!)

Step 6: Rename the file so that it says “favicon.ico.” That’s it. You have created your favicon for your blog or website!

Upload Your Favicon.Ico File to Your Server

Once you have created your favicon file, you need to upload it to your server. This process varies from hosting companies. Contact your individual hosting company to get specific instructions on how to do this.

However, as a rule of thumb, you need to place the favicon.ico in the same directory as your home page. Place it in the “root folder” of your site. Most browsers will be able to find your favicon.ico file automatically.

If you are using self-hosted WordPress, (which is what I am using), go to your File Manager and find the folder “wp-content.”

Within the “WP-Content” file, go to “Themes” and find the WordPress theme that you are using.

Next, open the “Themes” subfolder and find the WordPress theme that you’re using. Find the images folder within that theme and upload your favicon.ico file. Save your work.

Here’s how it looks on my server:

Alternative Method: Adding Favicon in WordPress.Org Blogs

If you want an alternative method of creating a favicon in WordPress.org – not all bloggers want to deal with uploading files to their servers, you can edit your theme via your Dashboard.

1). Login to your WordPress account. (www.YourURL/wp-admin)

2.) On the left side, scroll down to Appearance –> Editor –> Header.php.

3.) Insert the following code in the Header.php. Replace the Favicon.ico URL with your own.

<link rel=”shortcut icon” href=”http://yourwordpress.org/favicon.ico” type=”image/vnd.microsoft.icon”/>
<link rel=”icon” href=”http://yourwordpress.org/favicon.ico” type=”image/x-ico”/>

4.) Save the file.

Congratulations!

That’s it! You are done. Go to your blog or website and you will see the favicon next to your URL!

Good luck! Let me know if you have any problems, or if you’re confused about anything. I’ve tried to explain it as easily as I can!

Tomorrow, I will expand this topic further for bloggers on Blogger (Blogspot). I will show you how to upload the Favicon for use on Blogger!

If you enjoyed this tutorial, please spread the world. Tweet, Stumble, share on Facebook . . .  Share this post with others!

About DP Nguyen

DP Nguyen is founder and editor of Hip Chick's Guide to PMS, Pregnancy and Babies. She’s an expert pregnancy and women’s health blogger, and she’s available for blog consultation, ghost writing, and general writing services. She is NOT a medical doctor and does NOT offer medical advice. A graduate of Vanderbilt University, DP spends her free time writing children’s novels and loving on her dog, Gracie Lu. Connect with her on Twitter and Facebook.