Have you ever noticed them little graphics that display alongside the site URL when browsing on the web? Well they’re called favicons and they’re a great way to add an extra little touch of professionalism to a website. If you want to add a favicon to your site follow these simple steps.
- Open up your favourite image editing software (let’s assume Photoshop for this tutorial) and create a new document 32 pixels high by 32 pixels wide.
- Create your favicon icon. Remember it should be simple and easy to make out so don’t add to many details, keeping it simple is best.
- Once you’re happy with your favicon go to file > save as and select the ico format from the dropdown list. Save the file as favicon.ico. If the ico format isn’t available then save it as a gif for the moment.
- If you’re icon is currently saved as a gif you can convert it to the correct ico format by converting through one of the online convertors that are available (http://convertico.com/ is one i’ve used before).
- Now you’ve got your graphic in the correct ico format you can now implement it onto your website.
Simply copy the following code into the head section of your website ensuring the path to the graphic is correct.[html]<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />[/html]
- Make sure your icon graphic has been uploaded and thats all there is to it. If you refresh the page a few times you should now see your icon displayed at the top of the browser.