How To Create Site Icon For Blog

Does your blog have a custom favicon? If not, it really should. Today we'll learn what a favicon is, why you need one, and finally how to create a favicon for your blog or website.

I still see tons of blogs without one, so if your blog is one of them, do yourself a favor and create one now using the tutorial below. I promise it won't take long and it's also kind of fun!

Updated: 11/4/2020

Disclosure: This post may contain affiliate links (denoted by a *) which means that I may receive a small commission should you choose to make a purchase with my link. I appreciate your support and will never recommend products I do not stand by myself.

First of All, What is a Favicon?

A Favicon, pronounced fave-icon, is short for Favorites Icon which was named because they show up in your list of website bookmarks, in other words, your favorite websites. Favicons are a small version of your logomark that appears as a browser tab icon, a bookmark icon, or a shortcut icon.

Favicons are a quick way for users to recognize your website on first glance. Take a look at my browser tabs below. Do you recognize most of the websites I have open here?

Why Do You Need to Create a Favicon?

When you don't assign a custom favicon to your blog or website, either a generic icon or no icon at all gets assigned to it. At worst, your blog uses your hosting company's favicon. At best, each browser assigns its own thing for you: Chrome adds a little globe (see image above), Safari adds the first initial of your website's URL in a gray box (see image below), and Firefox adds nothing at all. Either way, talk about BORING!

Look again at the browser tabs above. Having recognizable icons makes it easy to click back and forth quickly between websites doesn't it? If you save a website to your bookmarks, you will also see the favicon in your bookmarks list. This makes it easy to quickly find what you are looking for. Help your readers quickly find your blog in their tabs or bookmarks by incorporating a favicon.

There's another place I bet you didn't think of where favicons appear: If you have websites you visit frequently on your phone, you can always add them to your phone's home screen as a shortcut. If your readers love visiting your site often, they may want to add a shortcut to it from their home screen so you definitely want them to have a nice looking icon to stand out from the other app icons they already have added.

And here's a new tab page from Safari. Picture your website shortcut here. You don't want your blog represented by a boring gray icon like the "C" icon below do you?

How to Design a Favicon for Your Blog

Some Design Rules for Creating a Favicon

First, let's talk about some best practices for designing your favicon.

Your favicon should be noticeable and instantly recognizable
The best way to make your favicon recognizable is to use your logo as a starting point. Even if your blog isn't super famous yet, that's ok. Using consistent design elements and themes throughout your branding will help it stand out from the rest and help people eventually recognize your brand.Here are a couple of options for you to consider as you design your favicon:
- your logo or logomark
- simpler variation of your logo
- a symbol or icon which represents your brand
- the initials (or just the first initial) of your brand name – make sure the style of the initials matches your initial logo's design and style
- a simple photo – lately I've been seeing bloggers using their profile photos to create a favicon
Your favicon should use a very simple design
Take a good look at the favicons your browser tabs right now. What do you notice? They're tiny! The typical favicon is displayed at 16 x 16 pixels. For this reason, it's important to make sure that you use a very simplified version of your logo or branding element. Detailed and elaborate graphics won't scale well at such a tiny size. They'll most likely look like a blurry mess.
Make sure your favicon contrasts well with light and dark backgrounds
Depending on your readers' preferences, their browser tabs can be white, black, light or dark gray. For this reason, you'll want to make sure to create a favicon with colors that contrast well on both light and dark backgrounds.Some favicons have transparent backgrounds and they work because their colors contrast well on any background. If your graphic is too light or too dark, it may help to add a solid colored circle or square behind the graphic or logo to help it stand out and be readable on any colored tab.
Look at your browser tabs for inspiration
Click around the web and look at the favicons used on your favorite websites. Notice if they will work on light or dark backgrounds. Does the graphic have a transparent background or is it on a colored square or circle?

Favicon Inspiration

Favicons using transparency

Notice how these icons can stand out on either a dark or light background, except for the last one, 'Say Yes.' That one should have probably been placed on a white square. And it's a little hard to tell, but the fourth icon, the lotus flower actually has a very fine black outline. This way you can see it easily even if it's viewed on light colored tabs.

Favicons using a colored background

These favicons were designed with a square or rounded square background to ensure that they are clearly visible on both dark and light tabs.

Favicons using initials

Some of these initials icons use a colored backround, some use a transparent one. Either way, make sure it is readable.

Favicons using a profile photo

Using a profile photo seems to be a new trend that's catching on. If you go this route, make sure to use the same profile photo in all your online profiles so that it is instantly recognizable.

How to Create a Favicon for Your Blog

Create a Favicon File Step-by-Step

Create the Graphic in an Image Editor
Using an image editor like Photoshop (sign up for free trial)*, Pixlr, BeFunky or Canva,* create your favicon file at 512 x 512 pixels. Even though it is displayed at only 16×16 in browser tabs, it will also be displayed at larger sizes in some of the other applications I mentioned above.
Preview Your Favicon in Tiny Size
If you're done creating a graphic favicon, zoom out of the image until your graphic gets tiny, about the size of the favicons you see in your browser. Is it still readable? Does it make sense? If it does, great, move on to the next step.
Save the File
First, save your graphic as an editable file in your software program so you can go back and fine-tune it if you need to.Next, save it as a PNG file.
Generate a Favicon.ico File
Use a favicon generator to convert your PNG file to an ICO file. This step is necessary since some browsers will only read ICO files.

Alternatives to Designing Your Own from Scratch

If you want a quick and easy way to create a text or initials favicon, use the Text > ICO favicon generator. I quickly created this one for DYOB:

You can also use the Emoji > ICO favicon generator if you really want to make it easy on yourself.

Finally, Add Your New Favicon to Your Blog or Website

WordPress

The easiest way to add a favicon in a self-hosted WordPress blog is to log into your dashboard. Then go to Appearance > Customize, then click on the Site Identity tab. Under the Site Icon section, select your new favicon.ico file to upload.

And boom, you're done, check it out in your browser! Note that you may need to refresh a few times and/or clear the cache in your browser before it appears.

How to add a favicon to a WordPress.com blog.

Squarespace

It's very easy to add a favicon to Squarespace as well.

Blogger

Log into your blog and click on Settings in the left column. Then click Favicon under the Basic section. Next, upload your favicon.ico file, save and boom!

Test Your New Favicon

If you want to test what your favicon looks like in various platforms and settings, use this Favicon Checker. If you wish to edit the way your icons look in any of the platforms, say iOS (iPhones), you can use the generator to optimize them for each setting. Then just follow the instructions to add them all to your blog.

You Just Learned How to Create a Favicon

Congratulations! When designing your own blog, you want to make sure that you don't leave out any details, even the tiniest ones. Adding a custom favicon to it not only helps your readers quickly locate your blog in their tabs or bookmarks, it shows that you care about keeping your branding consistent.

Now it's Your Turn

Let me know in the comments if you have any questions about how to create a favicon or if you need help identifying a type of favicon to create for your brand. Otherwise, please share your favicon with us in the comments!
And if you've enjoyed this tutorial, please share it by clicking one of the icons below my signature!
This post was originally published on 8/14/2013 and updated on 2/11/2015, then again on 11/4/2020.

Hey friend, want free DIY design stuff?

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

Hooray!! Thanks for subscribing friend! Now go check your email for your VIP Library access. (You may have to check spam or another tab in your gmail).

Marianne signature for DesignYourOwnBlog.com