How to quickly create a favicon

By | March 14, 2008

Favicons are small images that you can place in the URL bar in your Web browser, and these little icons will show up next to your URL whenever someone visits your site. If you have your own website, getting a favicon to display is pretty easy. I’ll show how it’s done in a few easy steps.

my-logo-favicon.jpgBut, first of all, why get a favicon? For some, they might not even know what is a favicon. A favicon is a 2 word combo of both favorite and icon. Favicons help a website to stand out from the crowd. They help in identifying bookmarks, and to brand a site. Certainly better than having just a blank space beside the URL, if you ask me.

What is suitable for a favicon?

Anything but copyrighted images and logos. Creating a favicon with your own site logo is the best way to go. Assuming you have a logo or picture ready, all you need is an image editing software. Not willing to spend on Photoshop? No problem, go and get Gimp. You don’t need expensive software for this.

Open the image that you want to designate as your favicon in the image editing software. Resize it down to a size no greater than 16 by 16 pixels (px). That’s pretty small, so it’s best that your favicon has bold colors that stand out.

Save it as a JPG file somewhere on your computer. Now, go and get yourself a free favicon generator. Favicon generators are small programs that will generate an icon file, with the .ICO extension. There are numerous ones online, so I’d rather not mention any here. All you need to do is open the small JPG image which you earlier saved somewhere on your computer. Save it as “favicon.ico.”

Now, upload the favicon file using an FTP program into the public_html directory of your site. You then need to open up the header file, or the part of your site that contains the header HTML tags of <head> and </head>. On HTML sites, that means every single page!

Just place this line of code somewhere between these two HTML tags, and you’re done.

<link rel=”shortcut icon” href=”favicon.ico”>

Free favicons online

Assuming you don’t want to through all the “trouble” earlier, you can also get free favicons online. Just upload an image and generate it as a favicon using some free online tools like this one at Dynamic Drive.

Share This:
FacebooktwitterreddittumblrFacebooktwitterreddittumblr