Working with web there are always those ‘little extras’ you should always try to include for your client. They can take you 10 minutes to do but they give the client the feeling of getting something extra, a complete site and also bragging rights when showing off their new website.
The two ‘extras’ Im reffering to is the use of Favourite icons in your web browser and web clip icons on your iPhone / iPod Touch. Below are two step by step guides in how create both of these for your next website.
Favicon
defn: A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark iconis an icon associated with a particular website or webpage.
Nothing new, these have been around for years but it still surprises me how many sites don’t have them. As I’m putting together these ‘little extras’ for Sunky Speaks I thought I would document a ‘how to guide’. I’ll go through this using Photoshop, sorry to all non-Photoshop users but it’s the easiest way to do it. Ok, lets get started.
- Stop. Think. Begin. Take the time to think about what you’re going to be putting in as the favicon, I mean really think about it. This icon will end up being 16px * 16px, so if it is a thin line drawing that is your clients logo then its not going to look that great at such a small size. With Sunky Speaks I would love to include the logo as a small icon, but once it gets to that size it will be near on impossible to read the words ‘Sunky Speaks’, so I’ve come up with an alternative idea.
- Plugin first. Next you’ll need the Windows Icon (ICO) file format Photoshop Plugin, this will allow you to export to the .ico file format. (download here) Make sure to install the plugin before you open up Photoshop. To install the plugin just copy it into your Photoshop plugin folder, for Windows: C:Program FilesAdobeAdobe Photoshop CS3Plug-Ins and for Mac: Applications > Adobe Photoshop C3 > Plug-Ins. Then open Photoshop and it will be installed.
- Design time. 16px * 16px is a small canvas area, it can be very difficult to create something clear in that space. So instead we will start our project with a canvas set at 64px * 64px (this is because it is always better to use even multiples when you plan on resizing files). Do this by selecting File > New, and opening a new canvas that is 64px * 64px pixels in size.
- Happy with the design?Best thing to do first is test the design, select Image > Image Size menu and enter 16px * 16px. Click on Resample Image and select “Bicubic Sharper” from the drop-down menu. This is the best setting for making sure that an image doesn’t blur as it’s being resized. If it’s still not sharp enough for you, always go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again. Like with anything, you may need to tweak the design to get it to look just right.
- Saving. Like with any file go to File > Save As and make sure you name the file favicon.ico. Under format you must choose Windows Icon (ICO) from the pulldown menu. (Note: This format will only be available in Photoshop after you download and install the plugin).
- Uploading and coding. Upload this new file to the root folder of your website, and then add the following code to your website in the <head> tag.
<link rel="Shortcut Icon" href="/favicon.ico">
- Testing. You should now have this appearing in your address bar:
But what happens if its not working, and you’re thinking “Wha Happened?“. Check your code and file first. Still no good, next thing to try is clearing your browsers cache and that should fix it. If you’re using IE6 (please upgrade) you will need to add the URL as a Bookmarked favourite before it can work.
iPhone / iPod Touch web clip icons
defn: The icon graphic that appears on your home screen when you add a web clip from Safari.
The biggest selling mobile device(s) in the past few years, that also boasts with the strongest web capabilities of any other phone out there and people are still not making sure their users get the full experience when visiting their site. If somebody loves your site and plans on visiting it on a regular basis, why not give them a pretty icon to view when using their phone rather than a tiny screenshot of your website.
Open up Photoshop, or your preferred editor.
- Name your file to be “apple-touch-icon.png”
- Set both the width and height to be 57px. If you’re resizing a larger logo or image, remember to set your resize option to be “Bicubic Sharper” like we did for the favicon, just gives your a sharper image.
- Save your file out and then upload it to your root directory of your website.
- To test that it worked, open up Safari on your iPhone / iPod Touch and add your website to your home screen. To do this, click the + button at the base of your browser and it will open the screen below. Finally select ‘Add to Home Screen’, if you’re doing this via your cellular network you might find it take a few seconds to display.
- Go back to your home screen to your new icon nested next to all your other apps, now doesn’t that look more at home than a boring old screenshot?
Thats it, hope you’ve found these guides helpful. Any questions just ask away.
