Tuesday, 19 June 2012

Create a Favicon #blogathon2



Biannual Blogathon BashThis post is a mini-challenge hosted as part of the Biannual Blogathon Bash, June 2012. Anyone is welcome to join in, but if you want a chance to win prizes for participating, you'll need to register over at the main Blogathon Bash site and complete the challenge during the Blogathon.

Introduction

How often do you have a dozen or more blogs open in your browser? And how often do you see a row of orange B icons, the little Blogger symbol?

Having a personalised favicon is an easy way to make your blog stand out in a sea of tabs. You should choose a clear, easily recognisable design that matches your blog's style. Mine looks like this: 

Here are the steps to complete the challenge:

  1. Do some research
  2. Create an image
  3. Convert to .ico format
  4. Upload to your site
1. Do some research

Take a look at some of your favourite sites - which ones have a really distinctive look, even when you can only see the icon? What makes it work?

Facebook and Blogger both have bold white letters (F and B respectively) on a solid background, coloured to match their sites. The Gmail favicon is a little envelope image, and Yahoo's purple Y! is quite striking.

Most successful icons have an obvious tie to the design and logo of the site as a whole. Looking at a few examples will help get your creative juices flowing.

2. Create an image

A favicon is only 16x16 pixels, so you haven't got much to work with. Think about the best way to express your brand in such a small space - colour scheme is likely to be important. Do you want to use an initial, or would you prefer an image that really sums up your style?

You can try scaling down a larger image (in Photoshop or similar) but the results will often be fuzzy and not terribly clear. You may be better off starting from scratch, and colouring in one pixel at a time.

There are thousands of free images online, so someone may have done most of the work for you. For example, if you want a star as part of your design, there are loads of different 3D-effect stars available in appropriate (tiny) sizes already. But don't just use a free image without changing it, or you may find you're not as original as you think.


If you don't have image editing software, you could use http://www.favicon.cc, which allows you to draw a design pixel-by-pixel, online. But I'd be wary of this if you have any other options, as there's no way to save your work as you go along. However, it will also download your icon in the correct format, so you can skip over step 2.


3. Convert to .ico format

If you're on Blogger, you don't actually need to do this any more, so go straight to step 3.

But if you're hosting your own website, you can create a .ico file by visiting http://www.favicon.co.uk/, uploading the image you created in step 1, and saving the resulting favicon.ico file to your computer.

4. Upload to your blog or website

If you're using Blogger: Go to the Edit Layout section of your blog, and click on the 'Edit' link on the Favicon box (top left of the Layout tab). Select your file and click 'Save'.

For regular websites: Upload the image file (named favicon.ico) to the root directory of your site. As long as it's named correctly and in the right place, the display will happen automatically.

Once you've done this, you may need to refresh the page (or even close and re-open your browser) to see the change for yourself.

Verify Your Participation

Once you're done, come back here and leave your link in the comments, so we can all check out your new design!

Don't forget you can reach me on Twitter or Facebook, as well as by email, if you're having any problems.

29 comments:

Jennifer Cluff said...

Not 100% sure that I like mine yet, but after 6 versions, I'll go with this one for the moment! Thanks for this info - I had been using my blog button and it didn't really do anything for it!
Cheers,
Jen
http://www.mom-ology.ca

Liviania said...

http://inbedwithbooks.blogspot.com

Maybe I should go for a bolder favicon?

miki said...

it's really hard for me, first i find somei like but the changes are difficult to do ( color bit by bit, i'm not an informatic artist^^) but i'm not even sure of the result because i refresh again and again and i still have the B of blogger

Adelina Priddis said...

You are totally awesome!! I made a really simple one cropped from my blog button, but I think I'll play around with it more to get a little more color and definition.
http://homemaidsimple.blogspot.com

Karri Reiser said...

So here it is. It's weird because I can't see it on my computer but my son was able to see it. Hopefully you can also.
http://mylifesatreasure.blogspot.com/

Chrissie said...

I did it exactly as said here, I am on blogger and I closed my browser and all that and its not showing up. Can someone else tell me if it is for them and if now, I can't figure out what I did wrong.

http://savedbygrace82.blogspot.com

Clarinda Olenslager said...

I got the favicon loaded in to my media library but don't know where to go from there. I am on self hosted wordpress. Please help. Thanks.

Carol Hornby-Clements said...

Done. Enjoyed that and thanks for the instructions.
http://carolcsstuff.blogspot.co.uk/

miki said...

same as you chrissie and i don't see it ( but perhaps it's there because so far i haven't see one)

Kathryn C. Lang said...

I was COMPLETELY lost - until I looked up at my list of open windows to click on something and realized you mean the little box IN that list. DUH!

Got it built - now just have to get my computer to save it as an .ico :D Thanks for the tip!

miki said...

http://lectureaventure.blogspot.be/

Aeryn Lynne said...

I love favicons, but making them always bugged me, lol! I had one of a makeup kit that came from licensed clip-art that I'm able to use when developing websites, but I went and changed it to the yellow purse in my website logo. Not sure what it looks like yet, 'cause my browser caches really don't want to show me what it looks like with the new image (no matter how many times I delete the cache and refresh the browser, heh.) I know it's there though, 'cause when I click on the direct link to the image, it shows up with the right image. I'm not entirely happy with the new image, but at least I can say it's all mine, lol. http://geekwithstyle.ca/sites/all/themes/newlayout/favicon.ico

Monica said...

Upload the image file (named favicon.ico) to the root directory of your site?????

I've done it this far but have NO IDEA at all what this means? (I'm completely computer illiterate...lol}

Shai Smith said...

I Lurve my favicon!

http://www.thevagabondstudio.com

Jenny said...

I'm having the same problem as Chrissie. I can't get the icon to show up in Blogger on Chrome or Explorer :-(

http://choicecitynative.blogspot.com/

Savvy Suburban Mama said...

woohoo.. it worked! It took overnight to show up but if you go to the blog you can see my new favicon (favi-wha? my husband said - then I impressed him -)

http://savvysuburbanmama.blogspot.com

thanks for this challenge - I learned something new and it feels great to do stuff I didn't know how to do.

ps for those on blogger it might take until tomorrow - mine didn't come up until the next day.

Ann said...

I created the cute little Favicon; now to figure out where it goes....

Viari Rose said...

Man, 16 pixels is TINY! I made like 6 of them. I think it looks ehhh, BUT it's better than the B that blogger usually has.

http://theebookreviewers.blogspot.com

Kathleen (aka Callista) said...

I had favicons before but they went away when I bought my own domains. So I found my SMS book one and put that back but couldn't find my Callista's Ramblings one. Since I'll be getting a redesign anyways, I just created a very simple one with CR and used it. I never had one for the blogathon blog. I had a little trouble but it is a keyboard key with the letter b. I'll work on a better on some other time. You can see them all:
http://www.callistasramblings.com
http://www.smsnonfictionbookreviews.com
http://www.biannualblogathonbash.com

Amanda @ Letters Inside Out said...

I made one for http://www.lettersinsideout.net that matches my gravatar default images.

I think in a few days I might tweak it a bit more. ;)

Melissa Say What? said...

http://melissasaywhat.com

Leila Kennedy said...

My designers have made mine for both sites, but thank you for the instructions! At least now I know where to come back if I need to do one! Thank you!

Preet @ A Written Rhapsody said...

Did this a bit back, www.awrittenrhapsody.com

Create With Joy said...

Thanks for this challenge! I now have a favicon that works in Firefox and Chrome (but for some reason does not show up in IE!)

Create With Joy
http://create-with-joy.com

Meagan P - Sunshine and Sippy Cups said...

I have one right now that I made that matches my signature under my posts - but I'm not thrilled with either one. I've been toying with some new ideas - but these instructions from you make it WAY easier to change mine than the way I'd done it before :)

I'm at http://sunshineandsippycups.com

mglawler said...

I got me a brand new no gluten favicon!

http://kidsaregrown.blogspot.com/

Erin @ American Mom in England said...

Since I already have a favicon at http://americanmominengland.com, I created one for my second blog - which I'm hopefully launching the end of this month! =) I hope that's acceptable!

Kat Balog said...

Ok, I did not create my current favicon but I did go through the steps to make one. I used a picture of GoS and followed the steps. The only problem I ran into was converting the file type. My computer seems to not like it when I do that. In the end though, I like the picture of the cat that I have so I have my GoS saved for a rainy day :)

Audra Silva said...

Thank you for this! I added one to my blog. :)

Post a Comment

Thanks for dropping in! I'd love to hear what you have to say, and if you leave a URL, I'll be round to visit you soon. (Comment moderation is on because the spam has become overwhelming!)

Related Posts Plugin for WordPress, Blogger...