Web Design: Creating a Favicon for your site

Launching or re-designing a website or brand involves a lot of work. Whether you’re doing everything yourself or outsourcing to an agency like us, there’s a big checklist of images and assets to be created and uploaded. That includes all the imagery required for social networking profiles, but often an important but small part of website branding can be overlooked.

 

What is a Favicon?

A Favicon is the name given to the image which appears in locations relating to your website, such as an internet browser. It generally appears at a small size, just 16 x 16 pixels in the address bar and browser tab. But it’s important both in terms of usability for people to navigate to the right place when they have multiple tabs open, and also for branding and recognition.

If you’re using various popular CMS systems or website frameworks, you’ll also find that their developers use their own favicon by default, meaning that you’ll look less professional until you create your own – in the meantime you’re advertising their software and also displaying to customers and competitors what you’re using.

CreatingAFaviconExamples

Favicon examples from TheWayoftheWeb, OnlineRaceDriver.com and DanThornton.net

The good news is that any designer or developer should be aware of the need for a favicon. It’s certainly something we provide as a matter of course. It’s also relatively simple to create and upload for yourself if you are following a DIY approach or fancy making some changes.

 

Creating a favicon:

To generate your favicon you can either use any graphics or image editing software, or there are various online tools such as Faviconer.com, favicon.co.uk or Dynamic Drive.

We use either Photoshop, or the free, open source alternative, GIMP to create the image. Generally we start with a 64 x 64 pixel square to make it easier to edit and avoid issues when scaling down. Then when we’re happy, we’ll adjust the image size to 16 x 16 pixels.

It’s important to remember how small the favicon will be when displayed in a tab – in the case of this site, we considered that our logo was more important and recognisable than reworking the site logo to be bigger. The same held true for our gaming site OnlineRaceDriver.com, but I don’t have a logo for my personal blog, so I decided to pick my initials.

If you’re looking for inspiration, just take a look at what your favourite sites use.  When designing website assets for clients we’ll include the favicon as part of the package, along with website logos, social media images etc.

When you’re happy with your work, you just need to save the result as favicon.ico. (It’s listed in GIMP as ‘Microsoft Windows icon).

 

Uploading your Favicon:

Some CMS systems, such as Magento, allow you to upload your favicon directly. All you need to do is visit System > Configuration, and then look under General to find Design and the HTML Head section.

For WordPress various plugins exist to offer similar functionality, but it’s actually fairly easy to upload your new favicon yourself. That way you avoid adding extra software to your site, and having to download updates etc, for the sake of a task you might only ever do once every few years.

After creating a favicon.ico and saving it to your desktop you’ll need to login to your website hosting either via your website host and any FTP manager they provide, or via your own FTP Client (e.g. Filezilla).

First navigate to the Theme you’re currently using for your site, and when you can view all the related files, remove the existing favicon.ico file and upload your creation.

You can also upload an additional copy to the main directory of your site, e.g. http://thewayoftheweb.net/favicon.ico to ensure the icon also appears in RSS feedreaders and other locations.

Finally if you want to be compatible across some older internet browsers, you may also wish to edit the header of your page.

  • Go to your WordPress Administration Panel.
  • Click on Appearance.
  • Click on Theme Editor.
  • Select the file called Header or header.php to edit the file.
  • Search for the line of code that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />. Overwrite it, if it exists, or add the following code below the <head> HTML tag.
    <link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />
  • Save the changes

And that’s it. When you’re making code changes, we’d recommend using a copy of the existing code and making sure you have a backup in the case of any problems.

You should start seeing your new favicon fairly quickly, although sometimes it can take some time to display due to various cache settings – generally more modern browsers are faster.

A quick sneaky peek…

There’s not much there yet, but just had to share some of the excitement that’s building behind this image…

Jodanma digital design and development

And there’s a basic holding page at Jodanma.com if you’re at all intrigued, with a lot more to come (We can’t reveal our first clients yet, for example, but they’re great ones!)

Two results for December already!

Having written about how I was going to work flat out in December, it’s nice to be able to share a couple of examples of it working already.

Firstly – I’m pleased to say that a recent pitch has been successful, and I’ve now got a couple of new clients to work with. Happily news of my availability appears to be resulting in a steady growth in demand for my services – which is brilliant news both for me and my bank manager. And a big part of that has been down to the fantastic response by a group of wonderful people I’ve had the pleasure of connecting with over the years – your assistance continues to be invaluable, and without naming you individually, I just wanted to say a big thank you for all your support and more!

While I’m thanking people – every blog comment, link to my sites, reweet, like on Facebook, @ message, DM, recommendation to a social bookmarking site etc – these are hugely appreciated and they all have an effect on me personally as well as helping to improve everything I’m doing – so thanks to everyone reading this, whether it’s on the site, via RSS, a social network….

Secondly – I’ve been thinking a lot about the potential concerns clients may have, and finding solutions for them. One potential concern might be that by hiring what is essentially me on my lonesome, they might encounter some risks if I get abducted by aliens, or that I might not be able to offer the range of services that a larger, full-service operation might be able to provide.

So, I’m pleased to say I’ve been speaking to a small number of the very best people I know in various areas. That means that I’m not only able to plug-in respected experts to cover in the event of an emergency, but I can also offer project-managed delivery of various additional services, whether it’s a design for a social media profile, or a complete website or mobile application build.  So you really can go from nothing to a complete website, social media presence, and have content supplied whilst only ever dealing with one person!

Not a bad start for the month!

Did Microsoft China copy and clone Plurk?

Is Microsoft China’s MSN Juku a straight theft of code and design from Plurk, the microblogging service which has had major success in the Asian world?

Despite fading after initial interest in the West, Plurk now claims to be ten times bigger than Twitter in Taiwan alone, and the preferred method of microblogging in many Asian countries, despite access to the site being banned by China in April 2009. At the time, Plurk’s top five countries were Indonesia, Taiwan, the Philippines, the U.S and China, so it was a big issue.

Now the issue has got even bigger, as described in a blog post by Plurk co-founder and lead developer, Amir, which states what they think has happened:

  • Microsoft China officially launched its own microblogging service, MSN Juku/Hompy/Mclub, some time in November, 2009.
  • The service’s design and UI is by and large an EXACT copy of Plurk’s innovative left-right timeline scrolling navigation system.
  • Some 80% of the client and product codebase appears to be stolen directly from Plurk!
  • Plurk was never approached nor collaborated in any capacity with MS on this service.
  • As a young startup, we’re stunned, shocked, and unsure what to do next and need your support and suggestions.

And judging by the images and code displayed on the Plurk blog, it seems far too suspicious to be a mere coincidence.

Spot the difference:

image

And again…

image

And once more with feeling:

image

It’s pretty amazing that a company of the size of Microsoft China would even think about stealing code to power a new launch, and that it’s gone this far if so. The only logical reason could be that China’s internet laws and lack of access to the outside world could lead to people thinking no-one would notice.

The question the Plurk team is asking is how to tackle the problem?

My guess is that the bad publicity wouldn’t necessarily worry Microsoft China, but might worry Microsoft itself a little more, particularly given all the efforts to fight Chinese piracy and protect intellectual property that Microsoft has supported. It’s a big harder to do that when you’ve got a clone of a reasonably well-established and successful company sitting there for all to see.

Techcrunch has also covered the story, and I’m looking forward to seeing what, if any, response they get from Microsoft.

My guess will be that MSN Juku will go quiet for a while, before perhaps reappearing with a slightly more unique codebase and design. If not, perhaps the only other option will be for Microsoft to get into acquisition mode – something that didn’t work out well for Google and Jaiku, and isn’t likely to work when the starting point is a complete rip-off!

Update: The outcome is that yes it’s a clone, but apparently done by a third party developer when everyone else was obviously on holiday or in a meeting. The site has been taken offline indefinitely, and the only remaining question is whether Plurk, which is a pretty small and young startup, will bother to try and take matters further, which given the legal resources MSN has, is probably unlikely…

Posterous allows themes and custom html/css

I’m determined to get back into covering non-Twitter news, so here’s the latest on Posterous, which now lets anyone customise their microblog/lifestreaming/’blogging lite’ site with themes or custom HTML and CSS.

Until now it’s been one of the big differences between it and rival Tumblr – hence why Posterous also allows you to drag and drop your Tumblr theme into Posterous. This will make it easier for anyone considering the switch.

Personally I definitely prefer using Posterous due to the ease with which I can upload everything I want via email – and I already use it to autopost to Tumblr.

Here’s the handy site guide to themes:

PosterousScreenshot

 

The one thing I haven’t seen tried anywhere else, and that I’m keen to experiment with, is whether using custom HTML will allow advertising into the platform – it isn’t something I’d stumbled across on any Tumblr/Posterous sites yet, and given that it’s about the only reason I can find for picking Google’s Blogger over WordPress as a hosted service, it could be a major feature for either of the two lifestreaming sites.

Making money with Twitter backgrounds

The background of your Twitter profile seems to be a fertile place for people experimenting with making money from microblogging. I’ve previously written about individuals auctioning their Twitter profiles for charity and raising $1002, and also advertising service Twittad, which allows advertisers to place adverts on your Twitter profile (I’m currently testing the service – Twittad itself is advertising on my profile at $44).

Now a very different service is seeking to make money from Twitter profiles. TwitterImage.com offers custom images for your Twitter profile. At the moment there’s a special offer running with a free design if you have 2000+ followers and allow a small credit line for the service in your background. If you’ve got less than 2000 followers, then there’s a 25% off the normal price of $100. For your $75 you get a custom background, and one minor revision. Or you can pay the full price of $100 if you think you’ll need more than one design or revision.

For example:

Probloggers custom Twitter design by Twitter images

Problogger's custom Twitter design by Twitter Images

I wish them well with the service, but I have to admit to having my doubts about the viability of it. While I understand that designers need to be reimbursed for their talents, how many Twitter users would value their background enough to spend $75 or $100 on it?

Obviously you can insert your contact and bio details into the image – but there is a link for an about page on your site etc. And experimenting with your own imagery costs nothing if you use an open source image editor like Gimp, and have the time to play around with it, plus you still need to supply any imagery you want to be used.

And then there’s the issue that you’d be paying more to have a custom Twitter background than I’m aware of any advertiser paying – so if they’re not seeing the value yet, do you think there’s a huge advantage in having a custom made Twitter background? And are you valuing it at $75-$100?

Newspapers can do the web if they want to…

I’d just finished reading a very good post by my colleague Dave Cushman on the death spiral of newspapers and how to avoid extinction in the online world. I think he’s totally on the money about the two key missed opportunities of the print industry (Missing the quality advantage and missing the R&D advantage), and I agree there’s a slim but closing doorway of opportunity for those brave enough to make the change in the face of falling profits and a global credit crunch.

And in a wonderful bit of coincidence, my RSS feeds pulled in Mindy McAdams moments later, pointing to the winners of the Society of News Design multimedia design competition.

Both of the Gold Awards (See full details of all winners) went to the New York Times for two pieces which really demonstrate the power of online reporting and design, and the advantage a different thought process can bring.

The Crane Collapse in Manhattan shows brilliantly how animation and design can really add to the understanding of an event unfolded, particularly for anyone not familiar with how cranes work. Meanwhile Climbing Kilimanjaro is beautifully simple, using graphics and video for a personal account with a real personal touch.

The lesson isn’t that online journalism has to always include amazing graphics and design (but they help!). The lesson is that a different approach and understanding of the online world leads to a huge amount of success. Something which some of my colleagues have started utilising with great results, and something which is the norm amongst the most popular content sites (newspapers, blogs, and anything else) on the web.

I want great writing. I want great images. I want great video. I want great conversations. But I only want any of those things when they’re relevant to me and the need I have at that moment.

It’s all change on the interweb

As always my plans to spend a weekend dedicated to catching up, and even getting ahead, on my blogging etc seem to have been destroyed before Friday is even over, thanks to a horrible noise from the exhaust on my car. I guess that’s what you get for buying something cheap and unusual!

And that clumsily links into the amount of change that’s occurring at the moment to major sites:

New look Facebook has been talked about a lot, and it’s now available. And to be honest, I’m really undecided about the design. It certainly makes it more blog/lifestream than profile page, and it moves applications out of the way, which is good for dealing with application addicts. I’m surprised the advertising is moved out to a column where it is easier to ignore over time, although it did catch my eye the first time it logged.

And there’s new look Delicious. Notice the lack of del.icio.us, as it’s now become www.delicious.com, as they were seeing all sorts of versions of the name being used. A bit of a shame in some ways, as it was one major way to stand out from the crowd. Ma.gnolia might feel a bit silly now! Again the design is cleaner and more modern, and a little lifestream-esque.

And you may have heard the tiniest of whispers around the web that tiny new startup Google is being challenged by a new search engine called Cuil, which claims to index more pages than Google, and return more linked results. One interesting ploy is that they promise information for each search will be anonymous – fine in theory but what will happen in the event of a court case? At the moment, returns a bit flakey, like this one for Dan Thornton. But I’m going to give it some time before making a judgement – I was initially unimpressed with Mahalo, but I’ve grown to like it more and more as time goes by. The best thing about Mahalo’s human-powered search is that the official plugin allows you to display an information box alongside your Google results – meaning it can save you a few clicks if you’re researching something which is covered.

And rounding off a pretty quick skim, is the news for social media marketing, research and business people that Forrester has bought Jupiter Research, which is pretty big news in that space.

Now if I can just stop the exhaust falling off the car, I might be able to catch up with a  few things.

If you want a busy homepage, let your users organise it

My interest in web design is generally based on usability and accessibility, due to the fact I’m not the most artistic person in the world. I can appreciate attractive designs, but there are far better people than me in the world at creating them.

But something has struck me that I think could be a good rule for web architecture and design, based on my own experience of website redesigns, and trying to cram an awful lot of information onto a homepage in the fear that if it doesn’t appear, no-one will ever see it or find it. So here it is:

If you’re forcing homepage contents on your users keep it simple. If you want it to be cluttered, let your users pick how they organise it – or what it on it.

This is backed up by a few examples. For instance, Google is the oft-quoted archetypal example of a very simple homepage. And one that could make more money for the company if it was covered in banner ads – but that would wreck the essence of it’s success.

Meanwhile users can be overwhelmed by busy homepages – but when was the last time you saw an empty Facebook or Myspace profile, or an empty Netvibes page? Users are happy to have a cluttered page, as long as they’ve been able to create and organise the clutter – just the same as people are happy to work at a cluttered desk if they’ve worked out the clutter themselves.

The recent BBC homepage redesign is a good example of moving in this direction -without hopefully overwhelming too many users. Personally I was disappointed it’s still a walled silo of BBC content only – but it’s a start.The Google homepage - keeping it simple

An example Netvibes page created by a user