How to create a Blogger Favicon

You know when you open a blog in a tab, and you have a little icon to the left of the blog title in that same tab? Well, that's a favicon. It also shows up in bookmarks, and sometimes next to the blog name itself in the address bar on your browser.

If the blog is a Blogger blog, then the default setting for the favicon is a not-very-attractive white stylised 'B' on an orange background. This standard favicon is eye-catching but not necessarily for the right reasons...

Even if you do think that design is pretty, it still does nothing to distinguish your blog from any other Blogger blog someone may be reading. It just tells everyone your blog is a Blogger blog.

To help you stand out, and to make the overall design of your blog a little more cohesive, you can, using your own images, create your own favicon and use that to replace the Blogger one.

Interested?

Read on...

Chose your image

 

You can use a stock image (either free or paid for, but do check conditions of use) for a favicon, but for the purposes of this post I'm going to assume you have a pile of your own photos that you use widely on your shop and blog. A good idea can be to take a detail from the header you use on your blog, and that way common colours and images it may display will also be apparent in your favicon.

Size is everything

Do bear in mind that favicons are tiny. I know, that's kind of obvious, but it does have a bearing if you wish to use an image of something specific, rather than just a colour or a letter - it needs to be well defined enough that people can recognise what it is. And if that isn't possible, then the colours it displays should make sense within your banner or blog colour scheme.

What I did... 

 

Chose a photo 

 

I decided to stick with my current muted colour-scheme of silver and grey, and so chose this image from my virtual stack of photos -

 

Edit the image

1. I uploaded it to picmonkey, rotated it, and then cropped it square.

I lost a little bit of the top and bottom of the leaf, but figured it would be easier to work with if it was a square photo from the outset, as favicons are always square. Making the dimensions exact can be tricky in picmonkey, so just get them as close to equal as you can.


2. Then I resized it to around 70px square, to make uploading it later on easier - it's only going to get smaller, so image quality loss isn't an issue here. Also, resizing at this stage gives you an idea of how small the photo is going to get, and how well, or not, your chosen image may work. Concentrate on light, shade, and colour and that should give the best result - you can always resize the image even smaller in picmonkey, to see how it works as a tiny image.

I saved the image to my computer in picmonkey, using a simple filename that made sense. Also I saved it to my desktop, somewhere I could easily find it again as I needed it straight away

Create the favicon

Next I opened up favicon.cc - this site helps you actually create the favicon itself, turning the small photo into a favicon.

3. On the left hand side of the page, I clicked on Import Image.

4. Then I was taken to an upload page - (this is why you need to know where you've stored the image) - to browse and find my edited photo.

Here I also chose Keep dimensions as I'd already made my photo square, but if you haven't cropped it already, you can chose Shrink to square icon - if you think your image is too far from square, despite your best cropping efforts, then chose this option, but do bear in mind it may well change the way it looks a little too much.

Next I clicked on Upload. My file size was small so this didn't take long.


5. The site took me back to its main page... and my extremely pixelated favicon...

This is normal. And correct. The favicon is so tiny that it can easily be shown pixel by pixel like this.

(It also gives you the opportunity to experiment with changing the colour of pixels, if you wish, by using the Color Picker to the right of the favicon. This is fun, if potentially disastrous! I couldn't find a back or undo button although I would imagine one exists somewhere.)

Save the favicon

Anyway, I then saved the favicon by scrolling down the page and clicking on Download Favicon. When given the option in the pop-up download screen, I clicked on save. (The file was saved to my downloads on my computer automatically - I wasn't given the option to chose where I wanted to save it, as happens on picmonkey. If you have trouble finding where your downloads are, and consequently the favicon, you're looking for a tiny file named favicon.ico)

Upload favicon to blog

The final thing I had to do was upload the favicon to my blog.

6. I went to layout in Blogger, and clicked on edit in the Favicon box

7. I then browsed to where the favicon.ico file was - I'd moved it to my desktop - and clicked on save to upload it to blogger.  

8. My new favicon showed up on my blogger layout screen straightaway but took a little longer to filter through the system and show up when I opened a new tab, so give it time if this delay also happens to you.

You can edit or change your favicon whenever you like. I redid mine after the first attempt looked vague and unclear when downsized to such a small size. I also edited using the pixels on the favicon site, adding brightness where the leaf was a little shady. I'm still not entirely convinced I'll stick with this one, but it's good enough to be getting on with.

Do leave a message if you've made a new favicon, I'd love to go and have a look at it!

More info

You can do a lot more with the favicon.cc website. You can find and use favicons that other people have created (click on Latest favicons and Top Rated favicons on the favicon.cc site), and that have been released under a CC (Creative Commons) license which means you are able to use other people's work. Or you can try creating your own favicon from scratch, by filling in pixels with various colours. If it's any good you can use it on your site or release it for others to download and use.

Happy pixelling!