Favicons, Widgets and QR Codes

Let's assume that you've built yourself a website (as I described here) and have added Google Analytics tracking code (see my post on this here). You have a good-looking, functioning, free website, and you know if it's actually being used or not. This post describes how you might like to add some final icing using a favicon, a Twitter or Google Maps widget, and a vCard QR Code. If you already know what all three of these things are, then scroll down a bit to find out how to add them to your site. If you'd like to find out exactly what they are, then keep reading.

Favicons are the small icons that appear on web browser tabs and when people bookmark your page. You can see examples of the BBC News favicon below. Having a good favicon is essential to help people quickly find your webpage if they have it open along with a bunch of other tabs, or to easily locate it in their bookmarks bar.

Follow the red arrows...

A widget is like a window into another web page, embedded within your own webpage. This allows you to easily give people access to information from other places without running the risk that they'll get distracted navigating away from your page and then not bother returning. Below are examples of  a Google Maps widget and a Twitter widget from one of the first websites I built. The Google Maps widget allows users to zoom in and out and navigate around, without leaving your website. The Twitter widget is a great way of easily updating your page with new information from anywhere in the world: your latest tweets will automatically appear, letting you inform people of new events, all with a few key presses from your phone or computer.

Google Maps widget

Twitter widget

Finally, a QR Code is a barcode which can contain a variety of information. They're usually used for website links, and almost all modern phones can scan them through their built-in camera and decode them. It's becoming more common to encode all your contact information into a QR Code to easily share it with people, and these are beginning to appear on business cards. Adding a QR Code containing all your contact info to your web page makes it easy for people who are browsing the page on their computer to save your details to their phone. If they're viewing their website from their phone already, they'll be able to download the image and decode it directly. If you scan a QR Code containing contact information your phone will probably ask if you want to create a new Contact, and save all the information in a single step.

A QR Code on the 'contact' page of a website

And on my phone all I do is open an app (in my case, QRDroid), and aim my phone's camera more or less at my laptop's screen:

My phone directly after scanning the code

So simple! And now I can make the call immediately without having to type the numbers into my phone one at a time. And even better, I'm encouraged to save the contact to my phone, meaning I'm more likely to do repeat business. If I had to type the number into my phone, I'd probably end up losing it a short while later once my call log had got too long to locate it.

So, that's that for explanations. Now I hope you'll be surprised when you find out how easy it is to actually add all these things to your own site!

Favicons

To create your own favicon, head to http://favicon.cc and get creative with the 16x16 pixels which you have to play around with. If you already have a logo, you can import it and edit it from there, though unless your logo is very simple the imported result may be unusable once it's been reduced to 256 pixels. Once you're happy with the result, download it and save it at the root of your website (for a normal website this is the same place as your index.html file). You don't need to add anything to your website's code at all! As long as it's in the correct place and is called favicon.ico then all modern browsers will automatically find it.

Widgets

You can ask sites like Google and Twitter to give you html code for the widget you want. For Google Maps, press the link icon (red circle below), click "customize and preview embedded map", and copy the HTML code to where-ever you want the map to appear on your own website. 

Step 1

For Twitter, the process is very similar. Sign in to your Twitter account, press the cog at the top right corner of the page, and go to Settings. Select "Widgets" from the menu on the left and press "Create New". You can customize some colours and the size again, and you'll be given the code to paste into your site. The nice thing about Twitter widgets is you can choose to make a widget of any public feed; not only your own. You can also have more than one Twitter widget.

QR Codes

Go to http://goqr.me/. The default option is to create a text QR Code, but you'll see options for Text, URL, Call, SMS, or vCard. Select vCard and enter your contact information. You can watch the code dynamically grow as you fill in more fields. You can then either download the image file and use that directly in your website, or GoQR can even generate HTML, exactly like the Google and Twitter widgets described above, for you to embed directly. Personally I prefer to download the image, as the less your website relies on other services, the better, but either way will do.

And your website can now probably be regarded as complete. Remember, the favicon, the widgets, and the QR Code are all free optional extras if you order our site through Websited.