[To] Web site Address bar Small icon Favicon.ico how to make

Source: Internet
Author: User
Tags browser cache

Some people may be curious, some URLs in front of a beautiful small icon and some website icons will move, how is this done?

As shown in the following:

The little icon has a name called Favicon.ico, the website icon is small but can play a very good embellishment role, especially when the browser will put your site into the collection, the role of the website icon out, it can make your site in a number of sites highlighted, for the user experience played a very good role, good, nonsense not much to say, now to tell the big Home How to do favicon.ico this website icon file.

Although there are many websites that make website icons online now, the resulting icons are quite passable and do not support the transparent style of ICO, which is very bad, and it is a bit wasteful to install a professional ICO tool for a small file. In fact, with Photoshop can be very convenient to make a beautiful ico file, we know that Photoshop is unable to save the ICO format files.

What to do, download this dongdong icoformat, download the extracted files later copied to the "C:\Program files\adobe\adobe Photoshop cs2\plug-ins\ file format" in this folder.

After that, there will be an ICO option, so that not only can make transparent style of the site icon, and the production of the ICO edge is very smooth, more than the online production of a lot more beautiful. The tool is ready to start making.

Pick a favorite picture, adjust it to 16x16 size, and save it as Favicon.ico through Photoshop. Note that when you use the Icoformat plug-in, the picture size cannot exceed 256x256, otherwise the option to save as ICO is not visible when you save it.

After the production of the Favicon.ico upload to the root of the site, if it is the United States space, close the browser and reopen your site to see the site icon.

If you use a domestic host or do not see the website icon, do the following

Add between

<link rel= "shortcut icon" href= "Favicon.ico" type= "Image/x-icon"/>

and the dynamic website icon is very simple, is a GIF animation, the same 16x16 size, uploaded to the site root directory, in the "head" "/head" between the following sentence can be added.

<link rel= "icon" href= "Favicon.gif" type= "Image/gif" >

Add the following code to make the ICO in the other collection change.

<link rel= "Bookmark" href= "Favicon.ico"/>

Here if the operation is correct, you will see your own web site in front of the small icon, if you do not see, please ensure that the correct operation, empty the browser cache files, refresh the page can be seen. As for the dynamic website icon, it will only take effect with Firefox browser .

What needs to be clarified here is that In Favicon.ico, Favicon is the file name, ico is the extension, the file name can be arbitrarily up, but the reason is called Favicon, because in the foreign host market, most of the host if found in the root directory has a Favicon.ico file will be automatically defined as the site's icon, without modifying the process The source code of the order, we just save the good website icon file as Favicon.ico and upload to the root directory of the website, it is very convenient. But in the domestic host market, many still do not have this function, can only be modified by the way the source code to add Favicon.ico.

Finally, an online website for making website icons: http://www.html-kit.com/favicon/

Follow the prompts to step through, and finally you can download to what you need, including ICO files and source code.

Address: http://www.chami.com/html-kit/services/favicon/

Address: http://www.chami.com/html-kit/services/

Buddy Icon from Pics//convert the image to ICO format, and also make a background image in PNG format

Image Embellisher//create special effects images such as cubes, Windows logo waves

Original source

Original Funkey

Original link: http://www.ifunkey.com/1121.html

[To] Web site Address bar Small icon Favicon.ico how to make

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.