What is Favicon.ico? Favicon icon production and production techniques

Source: Internet
Author: User

Founder Vision often meet customer requirements in the page tab to add a small picture, looks cool, the production is actually very simple, it is called Favicon, Favicon.ico, favicon icon. Favicon.ico will be displayed in the browser's address bar, on the Browser's tab page and in your favorites, creating your own online brand that details work.

So everybody knows what is Favicon.ico? The following founder Visual said Favicon production skills, is the production of favicon icon.

There are only two steps to making the Favicon icon:

One, do a 16*16 pixel favicon.ico picture, uploaded to the site root directory.

Two, put this piece of code in the head area of the page on the line.

For professionals look very simple, that no foundation of the people, do not worry, the following founder visual to expand, detailed description of the Favicon.ico icon production process.

The first step: Favicon.ico picture making

We need to use online production tools, save time and effort, http://www.favicon.cc/this is a foreign online production tools, powerful, interface affinity.

Now the site construction of customers will have their own logo, so here first, directly upload the logo method:

Click Insert Picture

Select the file, if this is the AI format of the logo to save a second, save into a JPG format, of course, there are other formats, the picture above has written very clearly.

Then click Upload, the short wait will appear below the style, the middle is your logo pixel image.

The following will also be very intimate to show that the actual effect

Click Download Favicon will generate Favicon.ico icon, download to this machine on the line. Such a favicon.ico picture of your business is done.

Maybe some enterprises do not have their own logo, then do not worry, we can make a simple favicon.ico ourselves.

Click the top left corner to create a new file

The following interface founder vision to translate for everyone, the purpose of each button:

First look at the right color painting, we all understand, just like the window with the drawing tool, the following three small buttons are "rubber" "Color" "Move"

Eraser: Try the drawing on the middle canvas, then click on the Eraser tool and rub it.

Take color: Sometimes see the color is very beautiful, but can not find the exact location, use this to take the color.

Move: The picture is crooked? Not afraid, point him, move to like the position on the line.

The four buttons below the canvas each represent: Clear the scene, create the next scene, copy the previous scene, and delete the scene.

The use of these buttons is a bit more advanced, because Favicon.ico can also make GIF animation effect, is not very cool, but each action must be done by ourselves, whether the movement is coherent to see you do not thin, this is a careful work, founder vision is not here to say more. Interested friends can have a try.

Step two: Put the code into the head of the page:

Play enough, also make a favorite Favicon.ico icon, it is necessary to let Favicon.ico show.

Here inserts a small common sense, now most website program is the CMS system, the CMS system's page is produces with the template form, the general template file also places in the website root directory "Templets" file

After the point of the general will have a "header" switch file, suffix name may not be the same, find this file, with Dreamweaver software Open, the content will be different, but as long as the focus on the line.

Add the code above: it's OK, and no need to worry about anything else up there.

Here Favicon.ico icon to complete the production, Hope Fangzheng visual articles can help everyone.

Said more, but are firsthand experience, hands-on practice, I believe it will help friends. Founder Visual Www.whjianzhan.com A5 First, we reproduced please indicate the source, indicating the source of resources rolling, flow, thank you!

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.