Tutorial: How to Create a Custom Favicon for Your Blog

Tutorial: Create a Favicon for your Blog! @ www.designyourownblog.com

Tutorial: Create a Favicon for your Blog!

This post was updated on 2/11/2015.

Do you have a custom favicon for your blog? You really should. It just adds a finishing touch to your blog branding and design. I still see many blogs and websites that are using the default favicon that comes with their blogging platform or don’t have one at all. So if you’re one of those bloggers without a custom favicon, follow this simple tutorial on how to create a custom favicon and get one step closer to blog design bliss!

First of all, what the heck is a favicon?

I’m glad you asked. Favicon actually means “favorite icon.” It’s used to help visually identify a website in your bookmarks and it’s also that tiny little icon you see next to your site or page name in the browser tabs.
(see image below)

Blogger default favicon | No favicon | Transparent favicon | Square favicon

Blogger default favicon | no favicon | Transparent favicon | Square favicon

A favicon is small and square: only 16 pixels high and 16 pixels wide.

How to Make Your Own Custom Favicon

For this tutorial, I’ll show you the process I used to create my own favicon for DesignYourOwnBlog.com.

1. Create the graphic

Using an image editor like Photoshop, PS Elements, Pixlr or PicMonkey you want to create a square version of your logo. I took my logo above and cut it up so that it created a square:

Design Your Own lovely Blog square logo

2. Resize it to 16×16 pixels

Now using your image editor, resize the logo to 16 pixels by 16 pixels. This is quite tiny and you’ll notice that my logo doesn’t translate very well in that size: Unreadable for a favicon

Your logo may look just fine and if it does, you can skip ahead to step 4

3. Plan B

If your whole logo, like mine, does not translate well at that small of a size, you have a couple of choices:

  1. Choose a small piece of your logo like an image or icon.
  2. Choose the first letter of your logo or two to three initials. For example if your brand is two words like your name, use the initials. You may be able to fit 3 letters depending on the font you use. But you should use a font that is in your logo if possible.
  3. Create an image you feel reflects the content of your site.

I went with option A because to use “DY” or “DYO” from option B didn’t really make much sense. DYOB would definitely not fit (I tried). I didn’t go with option C either because I thought option A was the best choice for me.

4. Create the icon

I decided to take the circle in my logo because I’ve created a circle theme throughout my blog. My dilemma though was that I couldn’t put the word “lovely” in the circle like it is in my logo because at such a small size, you’d never be able to read it. So what I did was take the first letter of my brand (d) and insert that into the circle using the same font and color as the word “lovely.” This is what I came up with:

designyourownblog.com's favicon - enlarged

Notice that it’s currently at 100×100 pixels in size. I did this so that I could work with the graphic a little more easily. Now let’s see what it looks like at 16×16 and see if it’s readable. Looks like it is: designyourownblog.com's favicon image

Ok, undo the resize (this is important) and then resize it again to 32×32 and save it as a .png, .jpg or .gif. *see next step

5. Background: transparent or not?

Now I could have left the mint area around the circle transparent so that you only see the circle without a box around it, however when the background turns white (like it does when the tab is active in some browsers), then you won’t see the circle at all, just the “d.” So that’s why I decided to leave the mint box around it.

And yes, I did try a border too, but that just made the circle inside the border too small and hence the “d” was unreadable.

You’ll have to play around with yours to see if a colored or transparent background makes sense. As you can see in the first image above, Pinterest’s favicon looks much better with a transparent background so there’s no white box around its logo.

Remember that if you decide to have a transparent background, you’ll want to save your image as a .png file as .jpg’s do not support transparency and .gif’s will probably produce an unfavorable jagged edge around your icon.”

Favicon Showcase

Before we move on, let’s take a look at some nice (and some not-so-nice) favicons for inspiration. Explanations and links are listed in order of appearance.

Favicons using initials:
favicon inspiration with initials

Favicons using transparency:
favicon inspiration with transparency

Favicons without transparency:
favicon inspiration without transparency

These favicons kinda missed the mark:
Links not included to protect the innocent πŸ˜‰
favicons that need some work

  • This circle would have looked so much better on a transparent background
  • This is supposed to be a bird and a beard (from the logo). Can you tell?
  • It’s a photo of….something
  • Part of the cute logo, but at this size it just looks like a pixelated mess
  • This orange dot has nothing to do with any design elements in this blog. Their colors are pink and grey and the design uses triangles throughout, no circles.

6. Generate Your .ico File

Now that you have your 32×32 icon, we have to convert it to an .ico file. We’ll use this favicon generator to create our file. Upload your image and select the checkbox for Merge with a 32×32 desktop icon. This will create two sizes of the favicon but the cool thing is that they are both stored in one file.

You can view a preview of the favicon in the generator. If you’re happy with it, click the Download Favicon button and it will save a file named favicon.ico to your computer.

7. Adding Your Favicon to Your Blog

Depending on which blogging platform you are using, there are several ways to do this:

This is easy: In your dashboard, go to Layout. At the top left, click on Edit next to the Favicon box and upload your favicon.ico you just created.

There are two ways to add a favicon to your WordPress blog.

Option A
This is the quick and easy way. Go to Settings > General > Site Icon and upload your favicon.

Option B
For those that don’t want to activate Jetpack, there’s a slightly more complicated way to do it.

Upload your favicon.ico to your site’s main (root) directory and also to your theme’s main folder via FTP. Overwrite any that may already be in there.

Then you’ll need to add a reference to the icon in your site’s <head>. If your theme allows you to add code to the <head> in the Theme Settings, then you can add this code to the Header Scripts:

<link rel="shortcut icon" type="image/x-icon" href="http://www.YOURURL.com/favicon.ico"/> replacing YOURURL with your own domain name.

If your theme does not offer this option, then in your dashboard, go to Appearance > Editor. On the right side, look for the file called header.php. Open it up and look for the line of code that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />. If it exists, overwrite it with the following code:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Otherwise add that line of code above the </html> tag.

Follow this link to learn how to do this in a WordPress.com blog: http://en.support.wordpress.com/avatars/blavatars/

Note that even though they say it takes several hours for your favicon to appear, the forums say that it can take several days. Do not keep uploading it over and over or you will create an even longer delay.

Don’t See Your Favicon?

You may not see your icon right away after uploading it. If that’s the case, verify it’s there by typing http://YOURURL.com/favicon.ico in the browser’s location, where YOURURL is your site’s address.
If you still don’t see it, clear your browser’s cache and refresh. If using Safari, you’ll have to reset it.


When designing your blog, you want to make sure that you don’t leave out the details, even the tiniest ones. It’s really not that difficult to add a favicon and it’s one little thing that shows you’ve thought your design through and that you care about details.

Try not to think too hard about what to use for your favicon image. I mean, don’t stress yourself out about it. Yes, it’s tiny so it needs to be thought out a little bit, but as long as it’s something unique and can be identified with your blog, that’s great. I’m sure there is at least one unique element to your blog that you can create a favicon with, like a heart, a flower, a bird or even a little piece of your logo.

Your Turn

Please let me know in the comments if you need help identifying something to create your favicon with.
Do you have any questions about how to create your icon? Or just have suggestions on how you created yours? Please share with us!

And if you’ve enjoyed this tutorial, please share it by clicking one of the icons below!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com


Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge