Newsletter

Please enter your name and email below if you would like to hear about future offers and information.

Bookmarks

Bookmark and Share

Logo Design

follow us on twitter

website maintenance

Website Templates

How To Create A Favicon.ico

Bookmark and Share

By Craig Deane, Blue Ice Web Design Limited

What is a favicon?

If you look just to the left of your url bar you will usually see a very small icon related to the site your are viewing, it's usually the website logo or similar. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. They are 16 pixels by 16 pixels in size and you can create one for your site in minutes using the guide below.

Design your favicon.ico

Open your favourite image editing suite such as photoshop, create a canvas of about 60x60 pixels. Why not 16x16? Well this is very small and will be difficult to create your icon that small, so the best thing to do is to create it at 60x60 and then resize the file to 16/16. For the icon you can create anything you like, make sure you test to see what it looks like at 16x16 though, you may try to downsize your logo or create a new icon based on your website colours etc.

When you have your desired icon, resize it to 16x16 pixels, if it looks ok then save the file as favicon.ico, in the drop down menu set the file as Windows Icon (ICO). Now you have saved the icon you now need to upload it.

Uploading favicon.ico

Now you will need to connect to your server and upload the icon as favicon.ico to your website root directory, make sure it is in the root (where your home page is) and is not inside an image folder. If it is in the root most browsers will automatically find and use your new icon file, however some require a link directly from the HTML source code to the file. To help these browsers, use the following code <link rel="Shortcut Icon" href="/favicon.ico">. Upload all modified files. Now test to see if it works, if your new Favicon does not show up right away, try refreshing the page or clearing your cache — or put a '?' at the end of the url, which will trick a browser into thinking the page is new and not cached.

Article created by Blue Ice Web Design

Author Information

This article was created by Blue Ice Web Design Limited, they are a website design company based in the UK that offers many website design services at competitive prices.

http://www.blueicewebdesign.co.uk

Website design, redesign, logo design, seo, internet marketing, website maintenance at competitive prices

Bookmark and Share

Please Note: If you are copying this article for use on your website then you must include the entire article unchanged including the links to the author site and the author information.

<<<<< Get back to the articles main page

Search engine optimisation available at great low rates.

Visit our search engine optimisation (seo) page or get a free no obligation seo quote today.

Website redesign and development + unlimited revisions + search engine optimisation (SEO) from just £130.

Visit our website redesign page for further details.