How to add a favicon to your blog

Use favicons as a part of your branding. Even the tiny details are important if you want to create a consistent brand and look professional. Learn how to add a custom favicon to your blog in just 5 minutes | thatistheday.com


Have you ever noticed the tiny little logos in you browser’s address field? That’s a favicon. Now you want one of these too, right? It is time to get out your brand board because we’re making a favicon for your blog. If you don’t have a brand board you should check out my post.

Favicons

Favicons are a great way to implement your brand style for your readers to see. To make your blog recognizable every part of your design counts, right? Favicons are not only displayed in your browser’s address field or tab but also in your bookmarks. If you considered using Pinterest’s Rich Pins on your site, your favicon will also appear on pins from your site.

Create a favicon

If you already created your brand board, I think this step will be easy-peasy for you. You can take your logo or just part of your logo. I decided to use something from my pattern/elements field. Before starting you should consider that these icons are really teeny-tiny (okay, I will stop this baby talk right now!) and some things can’t really be displayed or are not readable.

My logo e.g. wouldn’t fit into the icon, that’s why I looked for a style element I use for my brand. The simpler the better and the more recognizable your icon will be. If you look on my brand board, you will see, I already had a small icon using just the initials of my blog, which is another way you could go.

ThatDay icon

old favicon

favicon-thatday

new favicon

Here you can compare my old favicon to my new one.
Which do you prefer?

 

Next thing to decide is transparency. Depending on where your icon will be displayed, you should consider a transparent background instead of white. Otherwise, you will always see a white box around your icon.

The favicon will be displayed in your browser in 16×16 px. There are lots of different sizes mentioned if you google it. WordPress recommended using a size of 512×512 px, which I went for in the end. WordPress will downscale your image accordingly. Coming back to the transparency issue, my tip is to save your file as png because a jpg can’t display transparent backgrounds. You can create your favicon in Photoshop or with PicMonkey, if you like.

Setup

The setup is really easy in WordPress. Just upload your file to your media library. Then go to your dashboard and to appearances. Select customize and look for site identity. Here you can upload your icon, save, and you’re finished.
If you are on Squarespace you should check out this post by Megan Corwin.


Setup- How to add a favicon to your WordPress blog in just 5 minutes.

This was just quick and easy, exactly how I promised. If this post was helpful to you, you might want to share it with your friends. Any questions? Just let me know in the comments. I am curious to see your favicon creations, so share a link to your site. 


Leave a Comment