|This 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.|
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:
- Do some research
- Create an image
- Convert to .ico format
- Upload to your site
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.