Set the icon in front of the URL in the browser address bar

Source: Internet
Author: User
Tags favicon generator

I am interested in this problem by chance. Baidu and csdn have a small icon at the beginning of the URL in the address bar. This is also a way to personalize the website. It is very interesting. I decided to clarify it.

I asked my colleagues how to search online:

In fact, it is very simple. You only create an ico icon named favicon. ICO and upload it to the bottom of your page.
Add code to the corresponding page
Add OK.
How do ICO icons work?
1. Generate favicon. ICO online
Address: http://www.chami.com/html-kit/services/favicon/
2. Create the ICO software for the next one.

Example:
Favorites icon builder: http://www.html-kit.com/e/favicon.cgi

Favicon. ICO is a favorites icon, which can be seen in the address bar of a favorites or browser. In addition, favicon allows users to quickly locate the tag they need in a multi-tag browser.

The "favorites" icon has its own specification: The Icon size is 16*16, 32*32, 48*48 three formats (in pixels ), in the favorites folder, 16*16 and favicon are displayed. ICO file generation is still difficult: it is not a standard bitmap file, and must be generated using a dedicated favicon Editor, such as microangelo 98 and favicon.com. Now we have found an online favicon Generator Service: directly upload your own images (in GIF/jpg format) and generate a 16*16 pixel favicon. ICO files can also be previewed and downloaded online.

The following statement is embedded in the page:

After <title> </title>, add:
<LINK rel = "shortcut icon" href = "favicon. ICO">

 

Step 1: Prepare an icon production software.
First, you must understand that the so-called icon is a special graphic file format, which uses. ICO as the extension. This format is not available for common image design software. Therefore, you need to download an ico icon tool. Common Software on this site already exists. We recommend powerful microangelo to easily create ICO icons.

Step 2: confirm the specifications of the "favorites" icon.
In the favorites folder, 16*16 is displayed. The best color score should not exceed 16. (For clarity), if you are not clear, you can find it on drive C *. ico-format icons should be able to find those website icons in the IE cache. You can open these icons to know what format to use, just like others.

Step 3: design an icon of your own.
You can make the logo of your website into a thumbnail or design a distinctive pattern as a "favorites" icon. In short, it must belong to you and can represent the style and personality of your website. Name the icon file favicon. ICO. It can be made more eye-catching. For example, I am making a white-bottom blue/"ADU/". I feel good about myself ~~~~

Finally, you only need to upload this icon file (favicon. ico) to the root directory of the server where your website is located.
The folder where index.html is located.

In this way, you do not need to make any changes to your webpage files. ie5 will automatically search for the root directory of your website as soon as it discovers favicon. the ICO file displays the icon in the visitor's address bar and Favorites list.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.