Friday, July 22, 2011

How to install your own favicon in Blogger

a.k.a. Personalised Favicons for All

Well, well, well.
It seems I ended my reign of alliterative madness and weekly freebie frivolity right on time, eh? EH?


Because Blogger has added a nifty little function that makes it lemon squeezy easy to install a personalised favicon (provided it is a small, square file). Previously, it was only easy.* /wink and gangly nudge.
I saw this feature was coming in Blogger in Draft, and I waited until (most of) the glitches were sorted before sharing it with you.

Now you can easily add your own!
(Joined the party late? Favicons are the tiny little images displayed next to website URLs - Blogger's favicon is an orange "B," for example, Striking Keys' is some piano keys.)

Go to Design / Page Elements / Favicon - it's right above your Navbar, to the left.

(Click to enlarge)

Extra tips:
  • You may wish to preview your image at a very small size to see if it will work - otherwise, upload and view, then reupload if you're not happy with the outcome.
  • Check if someone else can recognise what your favicon is (at a small size) without revealing what it is - you'd be surprised how much a "book" can look like "A rectangle?" to someone else, when to you, it's "Totally a book!" (because you uploaded the original source image).
  • I recommend working with a canvas 32 x 32 pixels wide, if you're designing your favicon (rather than uploading an image you already have), for workability, but keep in mind it will be about 16 x 16 on people's screens.
  • Use PNG files with transparency if you want parts of your favicon to display as transparent - willing the white areas around a symbol to disappear is insufficient.
  • Less is more; if you want to use letters, consider that very few characters will be legible when squished into such a tiny frame. Your font selection matters here too. Yes, your twirly handscript font may match your header, but will be virtually invisible at 0.2pt. Contrast also helps here too (again, matching may not be as important as visibility).
Well, winners of days past, you had something over them for a season, eh? I'd like to think the service I rendered wasn't completely redundant...that it was more than being ahead of the masses - it was also having help come up with something that looks okay at 16 pixels square.

*Previously, favicons were tailored by adding a string of code to a blog's html after the closing skin tag. Easy. Right? For many...but the new tool is easier.
Related Posts with Thumbnails