Tag Archive > logo

How to create a favicon

» 05 May 2009 » In Web developer tips » No Comments

faviconsA favourite icon, called favicon, is the small icon that is displayed in the browser address bar, and it will also show in your bookmarks. It is a lot easier for the user to find the bookmark of your site, if you have created a favicon, and attached it to your website. If you look in your browser bar right now, you can see a pink little graphic square, this is the favicon of this site, making it easy to remember that you may have visited this site earlier. In short: using a favicon will improve the overall look of your website. So, how do we create a favicon? The favicon of this site is made in Adobe Photoshop.

Favicon information

Favicons have the extension .ico, and they must be named favicon.ico. The dimension of the icons must be 16×16.


To make .ico files in Photoshop, you need to download a plugin. This can be found here, it’s a Windows Icon Photoshop plugin. When you have done this, then you can start by creating a new file, but remember that it needs to be downsized to 16×16, so you can create a new file with the dimensions 128×128, 64×64 and so on (you get the idea?). Then, design your new amazing looking favicon, and last but not least, go to Image Size and click on Resample Image. This option is better than just selecting Image Resize, because it will make sure that the image does not blur when you scale it down.

Upload the icon

The only thing you need to remember here, is to upload it to your sites root directory.

Edit your header

You also need to edit the header section of the files in your website. It should look like this:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

That’s it! Now you can test in your favourite browser, it looks better now, right?

Continue reading...

Tags: , , , , , , , ,

Web 2.0 Design Generators

» 08 May 2008 » In Web developer tips » 3 Comments

What about spicing up your website with some Web 2.0 design? Web 2.0 styles have been very popular in the last couple of years, and thus, many online generators have been made. If you’re looking for web 2.0 buttons, badges, logos or backgrounds, there is a free online generator waiting for you!

Stripe Generator:

Web 2.0 Stripes Generator

Stripe Designer:

Stripe designer

Quick Ribbon:

Ribbon Generator

Web 2.0 Logo Creator:

Web 2.0 Logo Creator

Ajax Loader Generator:

Ajax Loader generator

Tabs Generator:

Web 2.0 tabs generator



Web 2.0 Badges:

Web 2.0 badges




Continue reading...

Tags: , design generator, , online design tool, web 2.0,