≡ Menu

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.

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 the author: 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. She is NOT a medical doctor and does NOT offer medical advice. Connect with her on Google+, Twitter and Facebook.

{ 15 comments… add one }
  • url February 13, 2015, 2:34 pm

    In any case, sizing the conduit is present,
    check if everything is in place, and then they become obsolete.
    Portion anyone is Denver colorado electrician’s
    objective. Generally go for click here the long run having their work repaired.

    By finding the click here right electrician? If a
    complete installation of repair is found to be illegally set up.

    He will possess the required expertise to handle the load of responsibilities on these electrical specialists, it is your decision to hire an apprentice.

  • NuvoCleanse Reviews August 4, 2013, 9:50 pm

    Thanks for any other great article. The place else may just anybody get that type of information in such a perfect way of writing?
    I’ve a presentation subsequent week, and I’m at the
    look for such info.

  • smita singh July 15, 2012, 12:16 pm

    hi,

    Ur new fan….keep up the gud work

  • Kate Marlowe May 14, 2011, 4:10 pm

    I made a favicon several weeks ago, but those who use internet explorer can’t see. Any idea what I did wrong?

    • DP Nguyen May 14, 2011, 4:13 pm

      Internet Explorer is really screwy. It doesn’t always like favicons… or other design elements that you try to do. So it’s nothing you did, it’s just stupid Internet Explorer.

  • Katie Hurley January 25, 2011, 10:33 pm

    Love these blogging tips! Thanks for finding me on Bloggymoms. Please come by when you get a minute!
    Katie
    “Practical Parenting”
    http://www.practicalkatie.com

  • Gemma January 25, 2011, 5:05 pm

    Hi there followed your link from Bloggy Moms, now following you. Pop by and visit us http://lungsbehavingbadly.blogspot.com/

  • Ry January 25, 2011, 3:51 am

    thanks for the tutorial! it was really helpful! Also thanks for being my first commenter on Bloggy Moms!

    take a look at my blog and follow me if you’d like!

    http://differentbreed-lifeintheslowlane.blogspot.com/

    Ry

  • jared's mum January 24, 2011, 6:29 pm

    wow, thanks for this tutorial…will be waiting for tomorrow so i can upload it to my blogger account…:)

  • Misty January 24, 2011, 4:34 pm

    This is a great post. I created my favicon and will wait for your post about uploading it to blogger! Thanks for your lovely comment about my dog that passed away and my new addition, Princess Abby. I’m now following your blog and subscribed to your newsletter too!

    Misty
    http://MistysThoughtsToo.blogspot.com

  • Diana January 24, 2011, 3:04 pm

    following you back!
    any idea how to do this on blogger?

    http://deeluxuries.blogspot.com/

  • Babysbliss44 January 24, 2011, 1:21 pm

    Following you back from A World Of Crafts! Great posts. I never heard of that before!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.