Design | Web 2.0 Css Templates

How to create a favicon

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

favicons A 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.

Photoshop

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:

^?View Code HTML4STRICT

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

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

Generate backgrounds online

admin » 23 April 2009 » In Web developer tips » No Comments

A nice background is very important on every website. But sometimes it can be hard to come up with a good idea on what background image or pattern to use. Luckily, there are some good online background generators on the web. This is a list of 15 background generators, that will create patterns, stripes, gradients and tartans!

1. Patterncooler
patterncoolercom

2. BgPatterns.com
bgpatternscom

3. Patterns from Colourlovers.com
patterns-by-colourloverscom

4. StripeGenerator.com
stripegeneratorcom

5. StripeMania.com
stripemaniacom

6. StripedBgs.com
stripedbgscom

7. StripeDesigner.com
stripedesignercom

8. TartanMaker.com
tartanmakercom

9. Dotter by PixelKnete.de
dotter-by-pixelknetede

10. Gradient Image Maker by DynamicDrive
gradient-image-maker-by-dynamicdrivecom

11. Ogim - Online Gradient Image Maker
ogim-online-gradient-image-maker

12. Gradient-Maker by SecretGeek.net
gradient-maker-by-secretgeeknet

13. Background Image Maker by Rails2u.com
bgmaker-by-rails2ucom

14. TileMachine.com
tilemachinecom

15. bgMaker by Ventdaval.com
bgmaker-by-ventdavalcom

As you see, there are a lot of options for making background for your website available on the net. Have you tried/used any of these resources? Please, write your opinion in the comment field below.

Web 2.0 Design Generators

admin » 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: