How to create your favicon?

Recently added a favicon to the blog, that is, the small icon on the left side of the browser's address bar, has also been done several times did not succeed, the main reason is that the icon is done, 16 pixels multiplied by 16 pixel size, can be placed in the theme of the package, found particularly blurred, and other people's theme bag pictures are particularly clear , but the file size appears to be 16 pixels, and I don't understand why. Later know that the picture in Windows to view the thumbnail, is displayed in 48 pixel size, no wonder that the 16 pixel image is blurred! In fact, this. ico format is a picture in which you can package pictures of different sizes into an. ico icon file. It is like a big bag of different sizes of toys, in different circumstances, you will see different sizes of toys, but the look is the same. Is there some kind of technical content? So creating a favicon for your blog is definitely worth a try. So how do you create your favicon?

One, download plug-ins

Because we want to create this icon in Photoshop, we first want to download the Photoshop plugin that can save the picture in. ico format. Photoshop itself does not support saving pictures in. ico format, and with this plugin, you can easily save the pictures that you have done in the format that we need.

Second, start design

The whole process I designed 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 to design in Photoshop. Because the canvas of the 16x16 Pixel is too small to create an icon, we first create a 64x64 pixel document, and then use the image (image size) command in Photoshop to select the Drop-down menu in the pop-up dialog box. Bicubic sharper option to restore the picture to 16 pixel size. The "bicubic sharper" option will make sure your picture is still clear and not blurry. It's important to note that the quality of your images may look good on a 64-pixel canvas, but it doesn't mean that you change the size of the picture to 16 pixels, and the quality of the picture is still good. So, you have to look at the quality of the 16 pixel image, and if it doesn't seem to satisfy you, then consider changing the 64-pixel image style. Specific style by your own design, according to their own preferences to come, I do not say more here, my design effect in the end the following figure:

After you have designed it, save the 64 pixel size picture in. ico format, as shown in the following figure:

Three, the different size of the picture packaging

As I mentioned above, if you're designing an. ico file with a size of 16 pixels, you'll find it blurry when you view it under Windows, and to avoid this problem, we need to save the image of the 64 pixel size in a different format. At least have a 48 pixel size of the. ico format, so it looks good enough to put in the theme file package. Of course, you only need to create a 64 pixel icon in Photoshop, and then use SIB icon Studio software to complete the package work. First in the SIB icon Studio software to open the file is 64 pixel size, and then click the new Image Farmat icon, the pop-up dialog box selected 48 pixels and 16 pixel size, add to the software interface to the right side of the sidebar, save the file, So we've put three different sizes of icon files in an. ico format file, packaged and finished. The following figure:

Put the picture in the root of the theme package

The next thing you need to do is to put the icons directly into the root directory of your WordPress theme, or upload them directly to the server. The root directory here means that you want to be in the same directory as the index.php file. You will find this code in the header.php file:

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

That is, reference Favicon.ico code, if you do not have this code, hurriedly added to the code

Five, test

Refresh the page in the browser after uploading the picture, or clear the browser cache, or add an English question mark at the end of the URL of the browser's address bar? "Brush the page again, which will make the browser mistakenly think that the page is a new page."

Six, a variety of different styles of beautiful Favicon