Wednesday, June 25, 2008

Free Tutorial - How to Make an URL Icon


Free Tutorial - How to Make an URL Icon! (Some basic html knowledge and your own web domain/hosting is needed)

Aren't you sick of this little icon? Your URL icon is everywhere, in your tabs, in your bookmark links, in your URL bar! You can personalize your website and blog with an EASY html tag and your very own icon.gif.

1). Make your icon. Open photoshop or your photo/painting program and create a new document 16 pixels x 16 pixels, and 72 pixels per inch resolution. Copy and paste in the image you want to use and scale it down to fit in the little 16 x16 viewfinder.

2.) Save as .GIF (If you have Photoshop you can "...Save for Web" and optimize your gif even smaller by selecting less colors.) Name it "icon.gif"

3.) Upload your .GIF. If you have a web domain, you should have info such as host name, user name, password and you can upload your GIF using an FTP connection. Drop it in your designated images folder.

4.) Type the following text right before your head tag closes, right before you see this, < /head>



For your personal website you need to add the code for each .html page. For your blog, go to the Edit HTML section and paste the code in there. Here is my icon.gif, !!

3 comments:

Anandi said...

tiki - have you done this for your blog? Because all I see in IE 7 is the standard IE favicon, not your custom one.

Just wondering...

Mint Bunting said...

Thanks for the comment Anandi - I have no problem seeing my icon on Safari and Firefox. Hmm, I will have to look into it.

KMCdesigns said...

Thank you tiki! I could never get those things working in IE!
I had no idea you could do this on blogger!!
Mel x