design

Web Design: Creating a Favicon for your site

January 1, 2014 By Dan Thornton

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.

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. https://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.

Two results for December already!

December 8, 2010 By Dan Thornton

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?

December 14, 2009 By Dan Thornton

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.

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…

How Coke and Pepsi are wasting their online strategy

November 28, 2008 By Dan Thornton

I have to admit that as a non-coffee drinker, I’m pretty addicted to caffeinated soft drinks. To the point where I’ve just shocked myself by working out that, in conjunction with my partner, we spend about £957 per year just on Coke or Pepsi! The fact that I can happily switch between the two main brands without any hesitation probably also makes me a reasonable target for online marketing.

Pepsi:

Pepsi can by schnaars (CC licence)

Pepsi has recently launched a social media promotion to engage bloggers around a new Pepsi logo. They picked 25 top social media and marketing bloggers, sent them empty cans featuring all the previous designs, some full cans with the new design, and even a DVD of history of Pepsi. The approach had some criticism (why target the social media/marketing niche rather than the fans of Pepsi niche?), but the response was fairly favourable – see Jennifer Laycock and Chris Brogan for more. And they even started a room in FriendFeed – The Pepsi Cooler – and that’s where my problem lies.

Pretty quickly people saw the flaw in a room which only allowed contributions from 5 people, and enforced moderation for all comments. You can see some responses to Chris Brogan’s post. The fact that Edelman’s Steve Rubel was involved meant that there was a fairly quick response claiming it’s the tip of the iceberg, and the team were working quickly to approve comments.

The first problem has been that the team are all U.S based – so no approval for 12 hours if you’re in the wrong timezone. I did make the suggestion of getting a representative from other countries involved.
The second is that a topic effectively has to be discussed in the comment of something irrelevant, in the hope the 5 contributors will write about it – I wanted to chat about the fact Pepsi cans in the UK now came with QR codes on them on November 17 – but Bart, who acknowledged by comment appears to have disappeared since then.
The third is that with 5 contributors, there just isn’t the flow of content,contribution and conversation to keep any interest going. There’s now just a contribution every 3 days, which is pretty slow – and hardly anyone is commenting.

Put it like this – if I had a community of 312 members, I’d be pretty disapointed if only 5 of them posted, and only once every three days. They’ve said that ‘we need to make sure the conversation is clean, free of profanity, and does not have any personal attacks’, but if you’re using Friendfeed after targetting 25 leading social media bloggers, you’re not likely to be overun by flame wars!

It’s good that Pepsi has started trying to engage the blogosphere as part of their overall marketing strategy, and that they at least discussed and made a slight attempt to have some conversations – but it’s a akin to listening to Pepsi shouting at us through a megaphone, and then trying to chat back with a sore throat.

Coke:

Coke Machine by KB35 (CC licence)

It’s lucky Coke have also managed to make a mess of things, because it nicely balances the post! Way back in June,08, I wrote about the CokeZone loyalty scheme, which allows users to input a code found on Coke bottles to be rewarded with points, which can then be exchanged for a range of products – some of which are rather good. The problem I had, was that the site was incredibly unreliable and frustrating to use. Things may have improved slightly, but there are still bugs with entering login details, and the site moves at the same speed as evolution.

Luckily, I haven’t actually been fired for using cokezone, which happened to some Coke employees who accidentally infringed an employee limit on collecting points while they boosted and promoted the service (Shel Holtz has all the details).

But they have turned a scheme which was meant to promote loyalty into one of immense frustration.

About a week ago, I happened to be logging into the site to register some more codes when I caught sight of an offer for a Flip Mino on the homepage – with options to enter to win for 2 points, or get one for 300 points. It was something I wanted to make sure I got, so I thought I’d try to collect the extra 100 points I needed (33 1/3 2litre bottles worth!). Now it did state that there was a limited number of the Minos, but bearing in mind there’s been a message saying ‘hurry, just a few left’ on various T-shirts etc since about the time I joined in April or so, I thought there’d be a bit of time.

But there wasn’t.

Turns out it’s a special pre-Christmas promotion with a new product each week. So either all the Flips were handed out or they’ve just been deleted.

So after swearing and realising my mistake, I thought I’d check for some contact details, and maybe try a bit of pleading in case there was one left in a cupboard somewhere.

Now read the following very carefully:

In 2008, on an onlineregistered members loyalty scheme for a major global corporation, with an unreliable site, and transactions to the value of games consoles etc, the contact details for the site are by telephone or post. No email, Facebook, Twitter, GetSatisfaction or Uservoice page. Post or phone! Oh, and some FAQs – (How were people asking these Frequently Asked Questions? And where’s the one for ‘My God, is this the most unreliable site ever?)

How to fix this stuff:

The Pepsi Fix: Allow everyone to contribute and chat. Employ moderation after the event, only if it becomes legally necessary, or of a personal or offensive nature. Employ someone to do the moderation if you need to, or get volunteers around the world to spend an hour each day. And try and make sure there are some Pepsi responses more than once every 3 days. That way, you’ll find the Pepsi fans, not just the top bloggers in a category by ranking.

The Coke Fix: Ideally, remove some of the flashy yet unreliable gubbins and make the site simpler to use. Make the Ts and Cs regarding a week long competition really, really clear, because when a site takes as long to load as yours, I don’t spend any more time on the homepage than necessary. And for the love of God, put some useful contact details or customer service on there!

Two companies with whom I’ve spent significant amounts of money have both engaged with plans which should, on the face of it, been right up my street. And yet somehow, it’s resulted in me realising how much I’ve spent, and the potential health risks of overindulging, because of the quick research I did before composing this post, and because they didn’t commit and go the whole way. And there’s nothing worse than getting halfway to somewhere, stopping, and turning round again.

And do it quick, before I start loading my shopping trolley with bottled water or lemonade

Making money with Twitter backgrounds

November 19, 2008 By Dan Thornton

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:

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?