How to Display a Web Logo in the Address Bar
When you visit a website, you may see a small logo in the browser's address bar. Web developers call this logo a "favicon." If you bookmark a page that has a favicon, its image will appear in your bookmarks and on your browser tabs. Favicons allow users to identify websites quickly. You can create a favicon logo for your website using a graphics editor. However, it is often faster to make one online using a favicon generator.
Other People Are Reading
Instructions
-
-
1
Visit one of the favicon generator websites listed in Resources.
-
2
Upload an image file according to the instructions on the website. The site will convert the image into a favicon and prompt you to download it.
-
-
3
Download the file and save it to a folder on your hard drive. The file will have an extension of .ico.
-
4
Open your web page in Notepad or an HTML editor.
-
5
Add the following line of code after the document's <head> tag:
<link rel="shortcut icon" type="image/x-icon" href="xyz.ico">
Replace "xyz.ico" with the full path name of the favicon file that you downloaded. For example, if you save the file to "C:\images\clouds.ico", make the code look like this:
<link rel="shortcut icon" type="image/x-icon" href="C:\images\clouds.ico">
-
6
Save the HTML file and open it in your browser. You will see the favicon logo in the address bar.
-
1
Tips & Warnings
You can also use logos that you find online without downloading them. If you know a favicon's URL, use that in the <link> statement. In the following example, the link points to a flower favicon stored on a hypothetical site named "http://www.xyz.com."
<link rel="shortcut icon" type="image/x-icon" href="http://www.xyz.com/favicon.ico">
Website favicons must be 16 pixels wide and 16 pixels tall. If you visit a favicon generator site that gives you a choice of image file sizes, choose the 16-by-16 format.
References
Resources
- Photo Credit kind am laptop image by Yvonne Bogdanski from Fotolia.com
