The HTML5 based application X Icon Editor is just the right kind of Icon Editor for you that is easy to use and obtain the results quickly. It has a very clean and user friendly interface and you can start drawing your icon right from the scratch or by importing one of your images and then working around on it. X Icon Editor was designed with an aim to let even the noobs design cool icons or say favicons for their website that appear on pinning on the taskbar in IE9.

In X Icon Editor, there are basically nine drawing tools like Text tool, circle tool, rectangle tool etc. The diameters and sizes of the tools can also be adjusted besides their colors. The grid on the drawing area is of the exact size of a standard icon which can be 16×16, 24×24, 32×32 or 64×64. Or if you like, you can also import any picture onto the artboard and then modify it with the tools. Once done, you can preview your icon created with the X Icon Editor and then export it as an icon( in .ico file format).

X Icon Editor is a really handy HTML5 based icon creator for website owners and developers.

The post Design Web icons with X Icon Editor appeared first on Tech Tips.

Gmail shows the number of unread emails in the tab itself. The title of Gmail gets updated whenever you receive a new email. But the favicon remains unchanged. You can apply a tweak so as to show the number of unread emails in your Gmail favicon. It can also let you know if someone has sent you a chat message. So, far this can be done just in Mozilla Firefox.

First head on to the Mozilla Firefox Addons page for the Faviconize Tab plugin[https://addons.mozilla.org/en-US/firefox/addon/3780/]. Now install it and restart your browser. This plugin lets you reduce the size of a tab to just about the size of a favicon.

Now, you’ll need a Greasmonkey script that does the trick for you. Install “Gmail Favicon Alerts” script to your browser. Installing is easy; just click on the Install button but make sure that the Greasemonkey is enabled on your browser(via the button at the bottom of the browser). After its installed, open up Gmail and you’ll notice that the number of unread emails are shown on the favicon.

When you have unread emails, you’ll see the number on a yellow badge on a blue Gmail Favicon.

When you have no unread emails, you’ll see a red Gmail Favicon.

When you get a chat message, you’ll see a chat bubble instead of the Favicon.

Similarly, the “GReader Favicon Alerts” script for Greasemonkey shows notifications on the Favicon for the number of unread feeds. When the number of unread feeds, is below one thousand, it shows the exact number. When the number is above 1000, it simply shows, 1K+ on the favicon.

With these scripts, you can make the favicons of Gmail to show the unread emails and show the Google Reader items that are unread.

The post Gmail and Google Reader’s favicons are more than just that appeared first on Tech Tips.

Actually Google had encouraged users to submit their ideas for the favicon and Google finally came up with this one, inspired by those submissions. Google says in its official blog that this design was inspired by a logo submitted by André Resende, a computer science undergraduate at the University of Campinas in Brazil. The new Google favicon is not exactly the same as submitted by André. His colors in the favicon are a bit dull and the “g” is exactly at the centre. Google has slightly changed the color layout and added a bit of brightness to the colors. Also the “g” has been moved a little to the left side. The same idea of colors was also seen in the logos submitted by Hadi Onur, Demirsoy, Lucian E. Marin, and Yusuf Sevgen (pictured below).

	by André Resende
	by Hadi Onur Demirsoy
	by Lucian E. Marin
	by Yusuf Sevgen

Google seems to be happy with its new favicon which truly stands out and gives a vivid glimpse of all its original criteria. Google though plans to update it again.

The post Google changed its favicon appeared first on Tech Tips.

Favicons are very useful because they add a touch of professionalism in your site and if saved in .ico format they can also be used as desktop shortcuts for your site. Almost every site uses it and some sites change the favicon at times. Besides, there are plugins that can make your favicon informative, like showing the number of unread emails in Favicon for Gmail. The main advantage however is that it makes the viewers easy to locate your site in Bookmarks or favorites list. Here I’ll show you how to add these favicons to your sites.

First you choose an image or design one for the favicon. Generally the size is 16px X 16px. Favicons can be in three images formats, .ico, .png or .gif. But it would be good if you save it in .ico format. If you use photoshop you can use ICO format Plugin. After downloading, copy the plugin file inside the “File Formats” folder of your Adobe Photoshop Plugins Folder. If you are already using Photoshop while you copied this plugin, quit photoshop and launch it again. Now open up your image and Save it in .ico format available in the dropdown of Adobe Photoshop file saving dialogue box. Give it the name Favicon.ico.

If you want to create your Favicon online, you can visit favicon.cc, where you can easily create one. Or use a dedicated software like add to any icon.

Now you need to upload it. If you use WordPress then upload the file to your “public_html” folder. After this, you will need to edit header.php file of your theme. Add  the following line of code to your header.php file:

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

Save your header.php file and then open up your website. Refresh the page and you’ll be able to see the icon before the URL of your page.

For Blogger Blogs:

You can add a custom favicon to your blog in blogger replacing the default blogger’s favicon. First you choose some place to upload your favicon like Google sites, Windows Live Sky drive, or any other. Copy the URL of the uploaded image. Then login to your Blogger account and go to Layout>Edit html in the Dashboard. In your template file you will find the following code at the top:

<title><data:blog.pagetitle/></title>

Now add the following lines of code just below the above one.

<link href=’favicon file url ‘ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>

Replace ‘favicon file url’ with the URL of the .ico image. Finally save it.

Now refresh your blog and see the favicon change from blogger’s default icon to your very own custom icon.

So, give your blog a professional look and make it easy for your viewers to bookmark it by adding a favicon to your blog.

The post How to add a Favicon to your blog appeared first on Tech Tips.