1. How to create a favicon
2. How to make a favicon in Photoshop
3. How to save a favicon
4. How to insert favicon site
5. How to replace favicon
6. How to create more complex favicons

It is difficult to guess what a favicon is when you first hear this word. This is a miniature icon that is displayed on the tabs of browsers, in address lines and other areas, depending on the operating system you are using and the Internet browser. It can be safely called one of the most complex and capricious elements in website design.

Creating a good favicon is quite difficult, since the icon is small, it should be clear and display something related to your site. Creating a favicon that is compatible with all popular browsers can also be a daunting task. In this article we will deal with all the complex aspects of its creation. If you also need a logo, then we have article how to do it.

How to create a favicon

Let's start with the design of the favicon. Good design, despite its compactness, should reflect the essence of your site and be an organic part of the corporate identity. Typically, the icon is a graphic sign (icon) of a company and not a whole logo (icon, text and slogan).

As a favicon, these websites use their icons (or images close to them).

The text in the favicon should not be used, since this text will be unreadable due to the small image size. The only exceptions to this rule are world-famous text characters that are automatically associated with a specific brand. For example, the online resource Wikipedia left on the favicon its capital letter “W”, and Facebook - the letter “F”.

On these favicons there are letters that are strongly associated with a particular brand. For example, Facebook uses its graphic sign. Also note that pixels are visible on the Disney image. This is because the screenshot was taken on a Retina display, which is compatible with 16 × 16 icons, while websites use 32 × 32 icons.

Since favicons are small images, each pixel plays an important role. Sometimes after reducing the logo, individual pixels become visible, because of which the image becomes “blurred”. To achieve clarity, you need to edit the icon at the pixel level.

To avoid this, you need to resize the logo using special editors such as Photoshop or GIMP. First you need to reduce the size of the image to 64x64 pixels (this is the largest size favicon). Then you need to edit each pixel using the Pencil tool until the image is clear. This is a laborious process, but the result is worth it. When the favicon 64x64 is ready, you need to do the same job with the image of 16 × 16, 24 × 24 and 32 × 32 pixels. So many sizes you need to image correctly displayed in all browsers and gadgets:

• 64x64 - Safari browser bookmarks;
• 32x32 - high resolution displays (Retina);
• 24x24 - bookmarks Internet Explorer and MicroSoft Edge;
• 16x16 - Google Chrome and other browsers.

How to make a favicon in Photoshop

First you need to create a few canvases with the above dimensions.

Then you need to add an icon, a letter or another image to the canvas.

How to save a favicon

Having created icons of different sizes, save each one as a transparent PNG file (24 bit). In Photoshop, you can use the Save for Web feature available in the File menu. Then you need to merge all PNG files into one ICO file. You can use both PNG files and ICO files at the same time, but often even Safari and Chrome prefer only the ICO format. In my opinion, it is easier to create one ICO file. ICO format is not very common, but fortunately there are a number of tools that can help you convert your files to this format. For this purpose, I prefer to use X-Icon Editor . This is a free online service that instantly converts downloaded images into one ICO file, after which you can download it. This is nothing complicated, just follow the instructions on the site. If you consider yourself a desperate person, you can experiment with the pixel editor of this service and draw a favicon yourself. (Although I prefer to edit favicons in a more professional editor, for example, in Photoshop).

By uploading your PNG images to the X-Icon Editor, you will get one ICO file at the output.

How to insert favicon site

So, you already have an ICO file. Now you need to add it to the website. Rename the file to favicon.ico and place it in the root folder of your website (where the index.html file and other standard files are stored). After the successful addition, you can view it at your website .com / favicon.ico. Almost all browsers look for the favicon.ico file in the root folder. Therefore, it is important that you download the favicon in this folder. For compatibility with different browsers, it is better not to add any HTML elements or links that indicate its location. This trick works for all browsers, up to IE6. Also, if you have a WordPress site, then in many themes you can add a favicon in the theme settings. This method can also be used.

How to replace favicon

For some inexplicable reason, browsers add it to the cache. Therefore, when you upload a new ICO file, the browser may continue to show your old favicon. What to do in this case? You can add a temporary HTML file that indicates the location of your new favicon. Also at the end of the URL you need to add a short query string:

<link rel = "shortcut icon" href = "yours website .com / favicon.ico? v = 2 ″ />

So the browser will think that this is a unique URL, and, therefore, will be forced to display a new icon. After updating the favicon, this HTML code can be completely removed. If you need to make changes to the favicon, use the same technique, each time increasing the number after the “v” in the query string. Thus, the browser will every time perceive this URL as unique and display its new version. And do not forget to delete the HTML code after a successful update.

How to create more complex favicons

In this article, I wanted to describe a universal and easy way to create favicons that will work on virtually any platform. But in web design and development there is no limit to perfection. If you want to learn how to create more complex icons, you can try using the service favico.js . It allows you to create dynamic images with varying numbers. Thanks to this icon, you can see the number of unread messages, even when the corresponding tab is not active. If you want to create animated favicons online, you can try using a favicon generator favicon.cc .

More online generators you can find here .

If you want to share your tips on creating favicons or ask a question, I’m waiting for you in the comments!