Have you seen the icons that every major website has? Would you like one? How do you make a toolbar icon? Having a favicon file or fav.ico image show up on your website is just another subtle way of branding your website and making it look professional.

Design it
For the design, look at a bunch of icons that other websites use. Note how it’s incredibly small and no room for features like a lot of shading or high resolution graphics. Keep it very simple. Look for a program that you can use to make it.

Size it
16 X 16 pixel or points – you can also design it in 32X32 or 64X64 but the smaller file will be just as good and help keep your website running fast.

Export it
You need to find a program that can export as an .ico file type. CorelDraw works great for that, and there are many other design programs that will work as well.

Name It
You must name it favicon.ico, so don’t get fancy and try naming it with your website name or anything like that.

Upload It
Once you have saved it, you need to upload it to the main folder or root directory of your website. For most hosting companies that is the public html folder.

Test It
Once you upload it, test it and see if it works. Remember to actually refresh your browser so it will clear the existing version out of memory.

Fix It
If that still doesn’t work, try putting this code in the header of your html. It also works in wordpress if you go to ‘edit’ and then work on the header.php

<link rel="shortcut icon" href="http://www.ginormasource.com/favicon.ico" type="image/x-icon" />

 

Love It
Enjoy your new icon and smile each time you visit your website and see you awesome icon popping up on tabs everywhere.

 

Here are some icon samples – you can learn from them and they can help you design better icons.

image

Share

Tagged with: • • •

Filed under: computer • laptop

Print This Post Print This Post

Like this post? Subscribe to my RSS feed and get loads more!