How to create a favicon
admin » 05 May 2009 » In Web developer tips »
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:
<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?
Continue reading...
Tags: design, html, layout, logo, style, web design, webdesign, website, xhtml
Generate backgrounds online
admin » 23 April 2009 » In Web developer tips »
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
2. BgPatterns.com
3. Patterns from Colourlovers.com
4. StripeGenerator.com
5. StripeMania.com
6. StripedBgs.com
7. StripeDesigner.com
8. TartanMaker.com
9. Dotter by PixelKnete.de
10. Gradient Image Maker by DynamicDrive
11. Ogim – Online Gradient Image Maker
12. Gradient-Maker by SecretGeek.net
13. Background Image Maker by Rails2u.com
14. TileMachine.com
15. bgMaker by Ventdaval.com
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.
Continue reading...
Tags: color, color scheme, colorschema, colorscheme, design, design generator, gradients, layout, online design tool, patterns, stripes, style, tartans, web design, webdesign
How to style external links with css
admin » 17 July 2008 » In Css Articles »
You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.
It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.
This is how you can style a link to an external site, using css:
a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}
|
What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” – which of course is an external link.
And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:
a[href$=".pdf"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}
|
This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.
Continue reading...
Tags: css, external links, style
