Easy steps to make a Website ICON

Easy steps to make a Website ICON

How can I get an ICON for my website? You’ve seen those little icons next to the url, or the name of the website in favorites. It is like a “mini brand” or your own personal little icon. It identifies you “by picture”. It is a FAVICON.

So how do you get one? You make it up. I’ve tested several ways of making them from the strict size dimensions to adding the tags in the head section of your index page using html coding. It is even more simple than that these days. Follow the steps below to make an easy icon for your website.

1. Use a image editor like Adobe photoshop or Adobe elements and create a blank 100 by 100 pixel square at 72 dpi. I used a transparent background.

2. Paste your image or logo in square. You can also type letters but note how bold the letter is. It will be easier it to read the bolder it is. Flowery or thin lines will disappear.
3. Test your image by making the image small (16 x 16 pixels) as that is the size an icon appears as. If you can’t read it or tell what letters you have then you need to adjust.
4. You may need to add a background by adding a layer and filling it in if you don’t want a white background. You can leave it transparent too.
5. You will then need to save the image. Select gif type for transparent background or jpg for all else or a white background.
6. Here is the important step. Use this file name when saving: favicon.ico Don’t use the .jpg or .gif or .png extension as icons have their own extension of .ico.
7. Upload the new icon to your root directory of your website i.e. in the same place as your home page or index page.
8. Alright, if you only wanted this to work on firefox, safari and opera, you’d be set! Unfortunately internet explorer as usual is different. So on your main index page (or those of you with blogs, the header section or page). Add the following code in the head section of your website (between the tags <head> and </head>).

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

Internet Explorer looks for this. Then refresh your page. You probably won’t see it though until you clear your cache and delete your history (On IE, go to tools >>internet options >> general >> browsing history delete).

Call your website up and check out your new icon! You can play and see which icon best represents your website but always use the same name favicon.ico. Hope this helps you and have fun!