Simple Steps to Create an Icon Image for a Website
If you are new here, Subscribe to Full Feeds or by Email or follow us in Twitter and receive free daily updates on Office and Windows Tips, Tricks and Tweaks..
Creating an Icon Image for a blog or Website is very easy but I find many sites are without an Icon Image. I also have seen some sites which offer creating an Icon Image for $20 or more. But these steps will help you to create an icon image in less than 5 minutes.
The benefits of an icon image:
It’s like a brand symbol which helps to identify a site easily. Moreover, these days all the browsers are tab enabled and the one thing that able the user to identify a site easily is by the Icon Image that is shown in each tab. It also helps to identify a site easily when the user bookmarks your site or stores your page as offline content.
Steps to create an Icon Image:
Step 1) Select an image of any size or resolution that you want to keep as your Icon Image, preferably in the shape of square.
Step 2) Icon images are in the format .ico, so to convert these images to the icon format use the form at FavIcon generator.
Step 3) Save the output image file. The icon image file will be of dimension 16×16 and 32×32.
Step 4) Host the icon in your sever and make a note of the location.
Step 5) Insert the following HTML tag inside the head section of your web page.
link rel=”shortcut icon” href=”location of your icon.ico”
Note: Use the opening and closing braces when you add the HTML tag.
Step 6) To check whether you have inserted the code properly, use Favicon Validator.
Tips:
1) Make sure the image is square when you create the icon image; this will make sure that the image is not shrunk inappropriately.
2) IF your image is on a white background, use the same image with transparent background for better results.
I wanted to try this but I still can’t think of what image to use for my site.
Are letters, like what you’re using, just fine? Any recommendation?
Yeah letters should do fine…but making it a little different will help a lot… the whole point is to stand out in the crowd…
If there could be favicon generated from letters it would be much better..
Funny thing, I was looking at my error logs and how high the count was. The majority of the errors was from not having a favicon.ico file in the root directory. An error gets generated everytime somebody bookmarks your site. In a way, this is a good thing to know how many people are interested in you (outside of RSS feed stats).
But the reason I stopped by to comment was I was looking for other people’s ideas on how to design them — objects, letters, colors, whatnot.
Yours is very recognizable, easy to see (read). So I guess that is the aim here.
BTW, I use Html-kit and forgot all about those two utilities you mentioned. They also have an online image optimizer if I recall correctly.
I just believe how simple this is! I’ve been meaning to do this for my website for over a year – wish I’d known sooner what a quick job it was!
Thanks very much for a great useful post, keep up the good work!