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)
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
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:
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:
- Choose a small piece of your logo like an image or icon.
- 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.
- 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:
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:
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.”
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:
- Notice how Brooke uses the first letter of her last name in the same font with the same color background
- A cute play on the original logo using the first letter of the blog name
- Nice example using two initials
- Another nice example with two initials
- This favicon uses three letters and it just barely fits
Favicons using transparency:
- This cute little blossom is part of this blog’s header
- The flower is part of this header as well
- Great example of creating an image that reflects your site. Even though there is no actual image of a bee on the site, it’s in the name.
- This horse image was taken from the logo
- I love this idea of taking a few dots from the header and creating a favicon!
Favicons without transparency:
- This favicon incorporates one of this blogger’s illustrations
- Little hand-drawn star from the header on a blue background to make it stand out more
- This cute seashell is part of the logo. I think it would have looked better with a transparent background, but it still looks alright.
- A snip from her navigation background
- Another star taken from the logo
These favicons kinda missed the mark:
Links not included to protect the innocent 😉
- 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.
This is the quick and easy way. Go to Settings > General > Site Icon and upload your favicon.
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:
FYI: The root directory is the main folder that houses all your WP files like the index.php, and the wp-admin, wp-content + wp-includes folders. Be sure to place the favicon.ico on the same level as these folders and the index.php.
<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.
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!