A universal way to create favicons. A universal way to create favicons Collections and galleries favicons

Favicon - the term literally translates as "favorite icon" - is considered one of the most complex elements of modern web design. This is a small image that is located in the browser tab, in the search bar and other places, and plays an important role in the personalization of the site.

Due to its non-standard format and small size, creating a favicon can be challenging, both from a technical and design point of view.
An equally difficult task is ensuring favicon compatibility with different browsers.

In this article you will learn how to make a favicon - we will give design tips and tell you about services for creating a favicon, and how to add a favicon to the site.

What is a favicon and why is it needed?

Despite the fact that a favicon is a very small graphic object, it is extremely important in website design and in general.

Click to enlarge the picture.

Firstly, A favicon makes your site more personalized and consistent with other graphic elements, such as a logo.

Secondly , a favicon distinguishes your site from other web resources in the search results list. A site without this mini-icon will look dull and lose to competitors. In a word, a favicon is simply a “must have” for websites.

Thirdly , a favicon allows the user to quickly find your site in the directory of bookmarks or other icons on the desktop.

Creating a favicon design

The favicon should reflect the essence and brand in a tiny sign the size of a smiley face. A simplified version of the company logo would be a good solution, but keep in mind: a full-fledged logo with text and trademarks is not suitable for this purpose.

These websites use a graphic of their brand (or at least something similar to it).

Don't use text

You should avoid using text, because due to the small size of the favicon, the inscriptions will be unreadable. Place 1, maximum 2 letters on the icon - for example, the first ones in the name of your company or web resource; in this case they can still be distinguished.

Favicon pixelation

Favicons are so small that every pixel matters. Often, when you make a full-size logo smaller, the image appears blurry.

This is a fragment of the full-size Facebook logo after it was reduced to 32x32 size. It is easy to notice that the image “floats” around the edges. To avoid such a defect, editing should be done at the pixel level.
When working with icons, I prefer to use raster image editing programs (such as Photoshop or Pixelmator). First, I scale down the full-size logo to 64x64 pixels because that's the largest favicon I'll need. The work is very painstaking, it can take a whole hour, or even two, but the result is simply excellent.
If you do not have the time and skills for such operations, it is better to use online services such as Logotizer.ru

Favicon size

Having received a 64x64 icon, I create icons of 32x32, 24x24 and 16x16 pixels in the same way. Each of them has its own purpose:

– 64×64 – “Reading List” in Safari and Windows
– 24×24 – Pinned sites in IE9.
– 32×32 – For high resolution screens.
– 16x16 – Typically used in browsers such as IE, Safari, Chrome, etc.

But creating smaller favicons doesn't stop there: additional editing is often required at the pixel level. You can also add an alpha channel if you see fit. If this previously caused difficulties, now almost all browsers support transparency in favicons.

Favicon formats

Previously, when only Windows ICO files were supported, we could save time by saving the 16x16 favicon as a GIF and giving it the .ico extension. This technique worked flawlessly! But now this method is not necessary as tools for creating ICO files can be easily found on the Internet. Moreover, and are now used for favicons, but the most common are still only the following two.

ICO

The palm belongs to the ICO format. Unlike PNG files, ICO files can come in different resolutions and bit depths (which is great for Windows). Internet Explorer uses favicons of various sizes (for example, 32 pixel taskbar icons in Windows 7), and therefore the ICO format is the only option in this case.

PNG files are very convenient because you don't need any special tools to create them. This format supports an alpha channel and allows you to create very small files. Perhaps the only drawback of the PNG format is that it is not supported in the Internet Explorer browser.

There are other options:

– GIF and animated GIF formats have no advantages other than compatibility with very old browsers.
– JPG format is not recommended, even if the image is in the form of a photograph. This format lacks the sharpness of PNG, and its only advantage is smoother transitions between colors - a nuance that is completely unnoticeable in a very small image.
– SVG could be a great option if more browsers supported favicons in this format. For now, there is only compatibility with Opera.
– There is also a so-called “sub-format” of PNG – APNG (animated PNG), which is supported in Firefox and Opera. However, the feasibility of its use remains questionable. An animated favicon can be distracting and even annoying to the user.

Create an online favicon – tools and online services

We have selected for you the most useful services that will help you create an online favicon.

Logotizer

Logotizer is a new, simple and convenient service for creating a favicon and logo for your website.
With this online maker you can create a favicon from scratch. The service is aimed at beginners, so developing a good design will not be difficult.

How to create a favicon using the Logotizer online generator

The main work area is on the left. On the right you can see how the favicon will look on different media - a browser tab, a computer taskbar, or a smartphone screen. Very convenient and clear.

First, you should choose a shape for the favicon. There are a lot of them, more than 50. We advise you to choose simple and uncomplicated forms to make the favicon easy to perceive and remember.

At this stage, you also determine the color of the form, which goes as the background of the favicon, and select a frame. Look at what color dominates your logo (if you have one) and what colors are the main ones on your website. It is within this range that we recommend creating a favicon design.

Below the “Shape” block there is a collection of shapes (symbols). There are not many of them, it’s a pity that you can’t upload your own options; but the choice is still quite interesting.

Change the color, size, location of the figures! In a word, experiment, fortunately, the service allows you to do this.

Once the shape is selected, you can add your text. As I wrote earlier, it is better to use 1 or 2 letters, no more.

There is an extensive selection of fonts. This is definitely a plus. As with shapes, you can change the color, size, and placement of text.

If you decide that some favicon layer is temporarily bothering you or is not needed at all, you can simply hide it.

After creating a favicon, the service will offer to save it. Register an account (in 2017 there is no way without registration), and after that you can download files for a small payment - 199 rubles.

The site also contains small instructions on how to add a favicon to the site, so you should not have any problems adding a favicon to the site. Similar recommendations are also provided below in this article.

After payment, the user immediately receives 10 favicons of different sizes for all devices needed today (Apple touch icon, Microsoft Application Icons and others).

The favicon.ico file itself is multi-sized and contains icons of 4 sizes in 1 file (16px, 24px, 32px, 64px). Accordingly, if you add a site to your browser bookmarks or open your history, you will be able to see icons of different sizes, but they will be displayed clearly and without blur.

Overall the service is good. Simple, convenient, nothing superfluous.

RealFaviconGenerator.net

is a simpler favicon generator that allows you to create favicons for any platform. Moreover, you can test the favicon on the resource. Enter your site's URL and you'll see what your favicon looks like on every browser and operating system. Real Favicon Generator will also tell you how to fix the flaws and make your favicon even better.

Favicon.by

Favicon.by is another free and easy-to-use favicon generator that converts PNG, JPG and GIF files to .ico format. Upload an image from your computer, select a size (16x16px or 32x32px) and click on the “Create” button. To save the resulting favicon on your website, follow the instructions.

The service also makes it possible to draw a logo pixel by pixel, but, to be honest, not everyone can do this. For example, I couldn’t. That's how crooked I am :)

How to add a favicon to a website

You can add a favicon to your site by making a few changes to the HTML code of the site page.

Step 1: Upload the “favicon.ico” file to your hosting server.

To do this, go to your FTP server using this link:
ftp:// [email protected]
Enter your username and password. These can be obtained from your hosting company's admin panel.
Upload favicon files to the root directory. The root directory is usually called “public_html” or “www”.

Step 2: Add favicon to HTML.

Keeping the FTP server window open, download the “index.html” or “header.php” file.
Then you need to download the code. The code you download depends on your website.
If your site is in HTML, find the HEAD area in the index.html file and paste the following code:

If your site is on WordPress, find the HEAD area in the header.php file and paste the following code:

/favicon.ico" />

Using these codes, browsers will be able to find your favicons.
So, you've installed your favicon!

How to Add a Favicon on WordPress and Other Platforms

If your resource is based on WordPress or another CMS, then adding a favicon to the site is very simple. In general, the algorithm for adding a favicon for different platforms will be the same.
1. You need to go to the site console.
2. Find the “Design” or “Appearance” section.

3. Go to the “Theme Settings” section and find “Favicon” there.

4. Upload the favicon from your computer.

5. Save and refresh the page.

How to create more complex favicons

This article discusses simple and quick ways to create favicons that are compatible with almost any browser and operating system. But when it comes to web design and development, the sky is the limit. If you want to learn how to make more complex favicons, touch icons for iOS home screens, icons for the Metro interface in Windows, icons for Google TV and much more, I recommend you check out these materials: favicon cheat sheet. It contains complete information on the topic and provides good sources. This is a great option for those designers and developers (myself included) who are constantly looking to expand their knowledge.

With Favico.js you can create dynamic favicons with numbers.

You may also need a dynamic favicon, which has an icon with a changing number. To create such favicons, I recommend using the service favico.js, available on Github. Dynamic favicons are not yet compatible with all browsers. But for those browsers that support them, these icons can be an interesting and useful addition.

If you would like to add another tip to this article or have a question, please leave a comment below!

How to create a favicon for a website - tips and services updated: February 7, 2018 by: admin

Favicons are a very small, but by no means the very last part of each site. They appeared with the birth of the Internet and remain in demand to this day. There are several ways to create them. You can use plugins for programs, or you can use special web utilities. Let's talk about them.

X-Icon-Editor

Unlike the previous tool, favicon.cc contains fewer drawing tools. Here you can only draw individual pixels with a specific color and transparency. This tool also allows you to import images, edit them as needed, and export them as favicons.

Thanks to a special panel, while drawing a favion you will immediately see how it looks within the Internet Explorer browser.

Antifavicon

The standard favicon size (16x16) is, of course, too small for text. However, Antifavicon allows you to fit two lines of text into that small space. The font used is certainly not that great, but what can you do :).

The given framework, of course, constrains. However, after looking at some examples, you can come up with something quite interesting.

Faviconist

The last service we'll look at is Genfavicon. Here you can upload an image, convert it into an icon, and immediately see how it will look in the browser. After that, you can download an icon of a given size.

All the services we discussed today have their pros and cons. However, among them there are those that can provide something more than their competitors. So bookmark these sites. They will definitely be useful to you.

Greetings, dear visitors of my blog. Today I have prepared for you a selection of 10 services that will help you make a favicon online. And also at the end of the article I highlighted the 5 most convenient sites, in my opinion.

To begin with, it’s worth understanding what a favicon is? I think many of you are familiar with this concept, but I will tell you again. In a word, this is the icon of your site. When searching in Yandex, you saw a small 16x16 icon next to the site, so this is a favicon. It can also be seen in the address bar and in bookmarks in some browsers.

This little picture is first and foremost your brand. People will recognize your site by it. Therefore, it must be original and memorable so that it is immediately visible in Yandex searches. It is difficult to draw such a small icon on your own, and online services come to the rescue that will help you make a favicon from a picture. Let's look at some of them in order and identify their strengths and weaknesses.


    • Convenient to use.
    • It is possible to make a favicon from a picture or draw it yourself.
    • You can order from professionals.
    • Preview of the resulting result.
    • I think there are none, everything you need is available on the site, I can only highlight that there is no gallery of ready-made icons.


    • You can create one from a picture or draw it yourself.
    • After generation, an example of a link to add to the site is shown.
    • Everything is in English.
    • Ugly design.
    • It is impossible to crop an image when creating it.

  2. 3 www.Chami.com


    • Beautiful user-friendly interface.
    • It is possible to make a favicon from a picture or draw it yourself.
    • Large palette of colors for drawing.
    • No preview.
    • Everything is in English.
    • There is no gallery of ready-made icons.


    • User-friendly interface.
    • Nothing extra.
    • There is no gallery of ready-made icons.
    • Impossible to draw by yourself.
    • You cannot crop the image during generation.


    • Convenient beautiful interface.
    • Nothing extra.
    • It is possible to draw it yourself or generate it from a picture.
    • There is a gallery of ready-made icons.
    • You can keep the size of the icon when creating it or compress it.
    • Preview.
    • You can make an animated icon.
    • A huge number of colors to paint.
    • Everything is in English.


    • There is a choice of icon sizes 16×16 and 32×32.
    • There are no additional functions, only creating a favicon from an image.
    • No preview.


    • Preview.
    • Large collection of ready-made icons.
    • It is possible to crop the image.
    • Everything is in English.
    • There are errors on the site.
    • Inconvenient interface.


    • You can choose the icon size from 16×16, 32×32, 48×48 and 64×64.
    • Everything is in English.


    • Nothing extra.
    • It is possible to select the icon size.
    • You can draw it yourself or make a favicon online from a picture.
    • There is no option to crop the image.
    • No preview.

I only introduced you to 10 online services, although there are many more. In my opinion, these are the most popular among all. If you use any others, write them in the comments, I and other readers will be interested to know about them.

And now, as promised, the TOP 5 convenient and high-quality services, in my opinion.

These are my top five. I want to know which service you will put first and which service last? I will be glad to hear answers in the comments.

P.S. If you haven’t come up with a favicon for yourself yet, be sure to check out the website Faviconka.ru. On it you will find more than 2,000 ready-made icons for every taste. I hope the article was useful to you and you found your service to make a favicon online.

Favicon - (from the English FAVorites ICON, translated as “icon for favorites”) - a website icon sized 16x16px or 32x32px, which is displayed by the browser in the address bar or next to a saved bookmark. Traditionally, the name and extension of the icon is favicon.ico.

Our service is capable of converting your chosen image (up to 175 KB in size) into an icon for the site icon (16x16px or 32x32px in size). After generation, you just need to upload favicon.ico to the desired site hosting directory.

The absence of an icon is a technical optimization error for a resource; it reduces brand awareness, reduces the CTR of search snippets, worsens the search for a web resource using browser bookmarks, etc.

Yandex has a special bot that individually indexes the favicon of all sites. The frequency of adding new icons to the search ranges from approximately two weeks to one month.

Where can I upload a favicon to have it online?

To display the favicon.ico you created as a site icon, you need to upload it to the root directory of the site (or to any directory) and specify the absolute or relative path to it in the site template code (), code example:

Why specify the path to the Favicon?

When using one site icon on the entire site, if favicon.ico is located in the root folder, you don’t have to specify the path to it - browsers will find it themselves and display it as a site icon. Large or unique resources use different site icons for each of their categories. To do this, the paths to different favicon.ico are specified in the corresponding templates.

A new lesson in workshop style and this time we learn the secrets of the favicon. Favicon - a small icon that appears in bookmarks and the browser bar. If you have your own website and want to stand out from others even in small things - favicon necessary. Of course, it looks most advantageous among bookmarks, against the background of a faded list of addresses without any graphic identification. However, our lesson is not so much about how to attach a favicon to the browser bar, but about how to draw your own favicon in Photoshop.

In what format should I save the favicon?

It all depends on the browser. For Microsoft Explorer suitable icon format ICO. We have already encountered this format when we made the cursor. For other browsers from Google Chrome to Apple Safari regular will do GIF or PNG. Favicon may be translucent. To do this, you need to save it in translucent PNG, and then convert to the format ICO. This can be done in a good program IcoFX. However, there are a lot of third-party sites for generating favicons, and the most obvious of them is www.favicon.ru

How to place a favicon on a website?

How to be sure that favicon will it work? 4 conditions must be met.

  • The file should be called - favicon.
  • Favicon size 16 on 16px
  • The optimal place for a favicon is the root folder of the site.
  • Write the address of the icon in the meta tags heder in the site index.

In HTML expression it looks like this:

You can create several icons for different browsers, for example one in the format ICO, and the other in PNG and indicate all this through the tag link . Modern browsers most often search for a file in the root of the site called favicon, however, to be sure, it doesn’t hurt to indicate the exact links.

Create a favicon in Photoshop

Create favicon very simple. Do you want to make one like this? favicon like VKontakte or Odnoklassniki? Good favicon can’t be done by reducing large images in all sorts of favicon “generators”, which are full of them on the Internet. The favicon is very small. In fact we are kind of pixel art, which has its own characteristics. You can't write a letter and just reduce it to 16px .

Like favicon will be blurry and indistinct, since the edges of the letter will overlap by several pixels when resizing. It will turn out kind of anti-alias, which is usually good, but in the case of pixel art such transitions are just not needed. On the other hand, you should avoid excessive “tattering” on the roundness, otherwise you’ll end up with hello 1999 gifs.

Create a file of size 16 X 16px . We'll create a very simple translucent favicon s in the form of a letter, with a bit of depth. Depth will be created through shadow and gradient.

Drawing the background

Why in the intro of this lesson do you see a huge smooth and licked favicon? Because I enlarged it for the intro for the lesson. How did I manage to enlarge the image qualitatively? 16px? Very simply, I always work in vector if it is possible to use it and if it makes sense. And the vector easily endures any transformation and does not lose quality.

Select a tool Rounded Rectangle Tool. In the settings panel, select mode, which will allow you to draw in vector. In the drop-down menu of the panel there is a check mark - Snap To Pixels. This is necessary so that vector paths are snapped to pixels and not drawn “between” them.

We have a surface favicon, and translucent edges will create a smooth roundness. Now it's time to get rid of the white background, it's not needed. Turn off its visibility. Or double-click on the layer, turning it into a regular layer, and then delete it.