Picture in address bar
Wondering how some websites display a picture in the address bar? These are called Favicon's, they are simple to make and easy to add to your website. They are displayed when you Bookmark or save a web address as a Favourite in the Internet Explorer browser [Define]
Step 1. Design your Favicon
You need an image to display in the address bar, this is usually a simplified version of your website logo. Remember it will only need to be roughly 15 x 15 pixels, so the simpler the better.
Step 2. Convert to a Favicon
Go to www.html-kit.com/favicon/ and click the "Browse" button next to the source image box. Select the image you created in step1. Ignore the scrolling text box, and click the "Generate FavIcon.ico" button. Now you need to download it to your computer, click the "Download FavIcon" button, if given the option, select "Save as" and choose to save it to your desktop.
Step 3. Add to your website
You will need to "unzip" the file you have saved to your desktop, you can do this with a program called Winzip, if you don't have it get it, because it is a very useful tool, get Winzip. Unzip the file to your Desktop so the files are easy to find.
You will have a Favicon.ico file and an "extra" folder. Save the Favicon.ico file to the "root" folder of your website. This is the folder where your home page is kept, i.e. index.htm, default.asp.
Now all you need to-do is insert a tiny piece of code into your web page. Open the program you edit your web pages, i.e. Dreamweaver, Frontpage, Notepad etc and select to edit the code or source. In between the <head> and </head>, known as the head section of the page, put the below code in.
<link rel="shortcut icon" href="favicon.ico">
You'll need to do this to each page of your site. Upload the modified pages and the Favicon.ico file to the Internet and then save your website as a favourite, and hey presto, your image will be displayed in the address bar.
More Web design tips
Step 1. Design your Favicon
You need an image to display in the address bar, this is usually a simplified version of your website logo. Remember it will only need to be roughly 15 x 15 pixels, so the simpler the better.
Step 2. Convert to a Favicon
Go to www.html-kit.com/favicon/ and click the "Browse" button next to the source image box. Select the image you created in step1. Ignore the scrolling text box, and click the "Generate FavIcon.ico" button. Now you need to download it to your computer, click the "Download FavIcon" button, if given the option, select "Save as" and choose to save it to your desktop.
Step 3. Add to your website
You will need to "unzip" the file you have saved to your desktop, you can do this with a program called Winzip, if you don't have it get it, because it is a very useful tool, get Winzip. Unzip the file to your Desktop so the files are easy to find.
You will have a Favicon.ico file and an "extra" folder. Save the Favicon.ico file to the "root" folder of your website. This is the folder where your home page is kept, i.e. index.htm, default.asp.
Now all you need to-do is insert a tiny piece of code into your web page. Open the program you edit your web pages, i.e. Dreamweaver, Frontpage, Notepad etc and select to edit the code or source. In between the <head> and </head>, known as the head section of the page, put the below code in.
<link rel="shortcut icon" href="favicon.ico">
You'll need to do this to each page of your site. Upload the modified pages and the Favicon.ico file to the Internet and then save your website as a favourite, and hey presto, your image will be displayed in the address bar.
More Web design tips
posted by giantmouse at
Monday, January 30, 2006
0 Comments:
Post a Comment
<< Home