How to make a website favicon.ico with Photoshop

The so-called Favicon, that is, favorites icon abbreviation, as the name implies, is that it can let the browser's favorites in addition to display the corresponding title, but also by the way the icon to distinguish different sites. Of course, this is not just favicon, depending on the browser, the Favicon display is also different: in most major browsers such as Firefox and Internet Explorer (5.5 and later), Favicon not only appears in favorites, Also appear in the Address bar, when users can drag favicon to the desktop to establish a shortcut to the site, in addition, tabbed browser even has a lot of extended features, such as Firefox even support animation format Favicon.

Favicon.ico not only can play the role of identifying the site, what beautiful Favicon.ico can also create a website brand, to bring a good experience for users.

So how do you make Favicon.ico with PhotoShop?

Photoshop itself does not support saving pictures in. ico format, so we'll first download a Photoshop plugin that saves pictures in. ico format. Under the following:

64-bit download: icoformat-2.1b1-win64.zip,32 bit can search by itself. Then put the plug-in in the PS installation path around this location (CS 5): Photoshopcs5\adobe Photoshop CS5 (\plug-ins\file Bit) formats\.

The whole process of my design was to start by drawing a few of the styles I wanted to design on paper, then picking out a design that I was satisfied with, and then starting with the design in Photoshop. Because the 16x16 pixel canvas is too small to create an icon, let's create a 64x64-pixel document, and then use the image-and-image size command in Photoshop after the design is complete, In the pop-up dialog drop-down menu, select "Bicubic sharper" (Two cubic (sharper) option to restore the picture to a 16 pixel size. ”

Bicubic Sharper "This option will ensure that your picture is still clear and not blurred. It is important to note that the display quality of your images may look good in a 64-pixel canvas, but it does not mean that the picture is still of good quality when you change the size of the picture to 16 pixels. So, you have to look at the image quality of 16 megapixels, and if it doesn't look satisfactory, you should consider changing the style of the 64-pixel image. The specific style is designed by you, according to your own preferences.

Design a good pattern, save as ICO can be.

Have you found that your ICO file is vague and unclear? In fact, this. ico format picture can be packed into an. ico icon file in a package of different sizes.

If you are designing an. ico file for the 16-pixel-size perpetual profit casino, you will find it blurry when you view it under Windows, and to avoid this problem, we need to save the designed 64-pixel-sized picture in a different format. At least one of the 48-pixel-sized. ico formats will look good enough when placed in a theme file package. Of course, you just need to create a 64-pixel-sized icon in Photoshop, and then use the SIB icon Studio software to do the work of packaging. First in the SIB icon Studio software to open the 64 pixel size of the file, and then click the new Image Farmat icon, in the popup dialog box to select 48 pixels and 16 pixel size, added to the software interface to the right side of the sidebar, save the file, This way we have placed three different size icon files in an. ico format file, packaged and finished.

Sib Icon Studio can search for downloads by itself or use other similar software.

Once the icon is ready, you can use

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

It's on the Web, you got a personality?

How to make a website favicon.ico with Photoshop