| How to design a favicon? |
A favicon is that tiny icon shown on the browser URL bar, on the bookmark lists and, for certain browsers, on the navigation tabs. While a favicon won't radically change your traffic it will definitely improve the outward appearance of your blog or site, adding a singular icon and ensuring that readers can individuate your internet site within bookmark lists easily. Below you'll find a step-by-step guide to form a favicon. 1) General Guidelines: A favicon is nothing less than a sixteen pixels by sixteen pixels icon, and the file has a .ico extension. As might be imagined it is pretty tough to put complicated graphics in such a tiny frame. When designing your favicon, you must concentrate on straightforward photographs or letters. Ensure that the colour of the favicon reflects the colour of your site, so that readers will be well placed to associate the icon with the site. 2) Using Photoshop: Adobe Photoshop is perhaps the best alternative for a well-designed favicon. The standard Photoshop can not handle .ico, so the very first thing that should be done is to download a Windows Icon Photoshop Plugin. When you've the extension installed you must make a 64 x 64 pixels canvas and start to play with it. After you are done designing the favicon you are going to need to resize the image. Go to the Image Size menu and click Resample Image. This process will ensure that the image won't blur as you scale it down. Eventually just save the 16 x 16 image as favicon.ico. 3) Using MS Paint and web tools: Favicons are extremely simple image icons, suggesting even Microsoft Paint should be sufficient to form a handsome one. The simplest way is to make a 32 x 32 pixels JPEG image with Paint and then use the net service Favicon from Pictures to convert the JPEG image into a favicon.ico file. 4) Uploading the favicon.ico file: When you are done with the favicon.ico file you must upload it to your internet site. Just make absolutely certain you place it in the root catalog, which is the catalog where the index file is found. 5) Changing your header: The final step is to change your header, which is the code that goes between the <head> and <head> tags. All you need to do is to add the following line: 6) Testing : Everything should be in place now, just open your browser and point to your website to test whether the favicon is appearing or not. Bookmark the site and open 2 tabs to find out how the icon is looking, if you don't like it just return to the drawing board. |