Favicon Tutorial

james.ukjames.uk Junior MemberShared Hoster
Well, im not one to normally type up tutorials but hey what the heck.

Just let you know this is more a Photoshop tutorial than anything else. But of course i will include the code on how to link the favicon to your site.

Favicon's, now im assuming you don’t know what they so i'll give you a little hint. A favicon is that little image you can see in your url section just before the site address begins. Ok hopefully you don’t need glasses to in able you to see a foot and half in front of you (sorry if you do). That icon is what im gonna tell you how to change.

Now most browsers save your favicon when your visitors bookmark your site and this is a good way to catch your visitor’s attention. Now im sure if you open up your favourites/bookmarks you'll see at least one site whose icon is different from the others.

So enough blabbing, lets get started..

Open a new document in Photoshop which is 16px – 16px and create your icon. It’s up to you of your design im not going to show that bit because it half eleven and im lazy.

ps_src.gif

Now Save it as bmp and name it favicon (File>Save As name it favicon and choose bmp as file format). We're now done with the graphical part of your favicon.

Now open your ftp client and upload it to your server. Once uploaded rename it from favicon.bmp to favicon.ico .
To have it load into your website you just have to add this simple html line to your pages, its almost the same as adding a cascading style sheet (CSS) to your page.
<link rel="shortcut icon" href="images/favicon.ico" />

Just copy this code as below:
<html>
<head>
<title>Untitled Document</title>
<link rel="shortcut icon" href="images/favicon.ico" />
</head>

<body>
</body>
</html>

Hope this makes sense, any problems leave a message ;)
A psychopath with dyslexia

Comments

Sign In or Register to comment.