favicon service. A universal way to create favicons. Search engines Google, Yandex and favicon
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.
Hello, dear readers! Today's article is about creating a favicon (favicon.ico) for your website. From this post you will learn what a favicon is, what sizes this icon comes in, and why you should definitely make it and install it on your blog. In addition, the article will provide favicon generators that allow you to create a favicon online in a couple of minutes, as well as sites where you can download galleries and collections of ready-made favicons.
First, let's figure out what a Favicon is, why it is needed, maybe we can do without it altogether?
1. What is a favicon and what is it for?
Concept Favicon comes from two English words Favorites Icon, which can be translated as icon (small image) for “favorites”. “Favorites” is the name of the bookmarks in the main Internet browser Explorer. For example, they look like this in the Chrome browser:
For each resource there is a small image, something like a mini . Agree that it is more convenient to bookmark not the URLs of sites, but their small logos - favicons. By the way, in addition to this, the favicon is displayed in the browser address bar immediately before the URL open page site or in the bookmark title:
Favicon is a small file (16x16 pixels) with the extension .ico (this extension is used operating systems for storing icons). Almost every website has Favicon.ico, no matter what hosting it is located on or what engine/theme it uses. Online favicon generators and galleries allow you to make an icon in a couple of minutes from any image, draw it from scratch, or download a ready-made one, so if you don’t already use a favicon on your blog, then fix the situation quickly.
What is this small picture for? Firstly, this is a mini logo for your website, your visitors will remember it better. Therefore, if you decide to create it, then try to make sure that the favicon attracts the attention of visitors and is easy to remember. And secondly, the most popular in RuNet search engine In its search results, Yandex places its favicon next to each site, which allows you to distinguish your resource from others that do not have an icon. Users are more willing to visit those sites that have an image next to them (it doesn’t even matter which one), which means that the favicon allows .
By the way, Yandex even has a special bot that does not index content on the site, but only indexes resource favicons. Having created a favicon and installed it on the site, you will need to wait a little until this same Yandex bot indexes it, and this process usually lasts from a week to a month. There are three ways to check whether Yandex has indexed your favicon:
- Type the address of your site in the search box from Yandex (for example, http://site) and see if there is a favicon nearby.
- Follow the link http://favicon.yandex.net/favicon/ website(where you need to replace "site" with the URL of your site). If the icon is indexed, you will see it.
- Go to Yandex.Webmaster (http://webmaster.yandex.ru) and check for the presence of favicon.ico
2. Online Favicon generators and galleries
So, we have already figured out what a favicon is, which is so necessary for a site. We learned that it should be 16 by 16 in pixels, and its extension should be .ico. Now there are several ways to create favicon.ico:
- Download a ready-made icon from the favicon galleries.
- Make a favicon from scratch using Photoshop or an online generator.
- Make a favicon from a finished image (image dimensions are not important).
2.1 Collections and galleries Favicon
- http://www.thefavicongallery.com/ — a small gallery that includes icons on a variety of topics. Contains about 300 images. To download the picture you like, you need to click on it right click mouse and select “save as”, then save the favicon to your computer.
- http://www.iconj.com/— more than 3 thousand icons for every taste and color. It is possible to save the image in .gif or .ico format. You can even take the html code of the icon. There are animated favicons. The only drawback of the collection is that there are only 30 icons on one page, so you will have to look through many pages to choose the right image.
- http://www.favicon.cc/– a huge collection of favicons, but there are only 20 pieces on one page, it will take a long time to scroll through.
- http://www.favicon.co.uk/- also a good gallery containing many favicons. There are 144 icons on each page, which makes browsing very convenient. The themes of favicons are very different.
- — a small collection (84 pieces) of mini-images for your website.
2.2 How to make a Favicon for a website from scratch
The advantage of creating a favicon from scratch is that the resulting icon will be unique, and uniqueness is very important! Therefore, it is better not to be lazy and spend 5-10 minutes creating your own favicon.
There shouldn't be any problems with generating the icon, because... everything is clear here.
2.2.4 Favicon-Generator.org
Another good online favicon generator. You can get to it using this link - http://favicon-generator.org/.
There shouldn't be any problems with this generator either. The screenshot shows the functions of the online favicon generator.
2.3 How to make a Favicon for a website from an existing image
If you don’t want to make a favicon for your website from scratch, you can use some image that will become the basis of a mini-logo. In this case, you will need to prepare a picture in advance (preferably a square one, otherwise the pattern may be distorted when creating favicon.ico), and then use it in online service favicon generator. Let's look at the two most popular resources.
2.3.1 Favicon.ru
The online generator is very easy to use, it can easily convert any image of any size into a small 16x16 pixel icon. Now you will see for yourself how easy it is to work with this service.
There are two ways to add an image:
- Using the “Select File” button, find the desired image on your computer and upload it.
- Enter the address of the image on the Internet in the field (in this case this file may not even be on your computer), and the service will do everything itself.
After the file is downloaded, all you have to do is click on the “ Create favicon.ico!" and wait a few seconds. Next, you will only need to download the favicon to your computer.
2.3.2 Favicon.cc
This online generator is more powerful than the previous one, but also more complex. To get started, follow the link - favicon.cc, and then click “Import Image” (in the left window).
Next, click on the “Select file” button and upload the desired image. Based on it, a favicon will be created for your site. In this case, you will need to choose what to do with the image when reducing it:
- Keep dimensions – leave the aspect ratio of the image unchanged.
- Shrink to square icon – bring the sides of the image to a square appearance, but the image may be distorted.
Once you upload the picture, you can edit it in online generator or leave it unchanged. If you are satisfied with the resulting favicon.ico, then download it to your computer.
3. How to install a favicon on a WordPress blog
Most often, the favicon is located in the root folder of the site, in addition, it is more convenient, so we will consider this option. This is done in two steps.
FIRST STEP. First, you will need to find a line of html code in the theme that specifies the path to the favicon. For a WordPress blog, you need to find the header.php file (Header) and find the line, it should look something like this (it may differ slightly depending on the theme):
You need to replace this line with the following two:
< link rel= "icon" href= "/favicon.ico" type= "image/x-icon" > |
< link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" > |
IMPORTANT! These lines should be placed inside tags
AndSECOND STEP. Now you need to add a favicon to root folder site. Go to your hosting and place a file called favicon.ico(size 16x16 pixels).
If you did everything correctly, now your site has its own favicon.
Favicon (English: Favorite Icon) is a small icon (image, picture) in a special format that is displayed in the address bar of the browser when viewing a site, a browser tab or in its bookmarks (“Favorites”).
favicon is an additional decoration for your website, your mini logo. It is also shown when viewing a list of sites in Yandex and Google searches and makes your site stand out from the rest.
Why do you need a favicon for a website?
favicon is a trademark of your site. Many companies today have a distinctive favicon that sets them apart from their competitors. To make the icon better remembered by users, companies should display their logo in it, which should also be one of the elements of the site header. Another positive feature of using a favicon is that when viewing a large number of sites in a browser, you do not see the entire page title, but only the icon, and you can immediately and easily identify the tab where you wanted to go.
What is better to display on a favicon?
- The icon must correspond to the theme of the site.
- brand, if your website is associated with this brand. Moreover, for different pages Can display different brands;
- Use a favicon that you want to click on, this will increase the click-through rate when viewing in Yandex and Google searches;
- Make several favicon designs for different sections of your site.
- Make several favicon designs for different events (eg New Year, Valentine's Day or Cosmonautics Day, :).
How to make an animated favicon?
The ICO format does not support animation. But modern browsers allow you to use GIF format for thumbnails. It is possible to specify for modern browsers one animated file (favicon.gif), and for ancient ones, such as Intertet Explorer, another (favicon.ico). To do this, add the following two lines to the head section:
Naturally, you first need to place both files in the root folder of the site.
What to do if displaying images in the browser is prohibited?
If you make a favicon with an embedded image in the page code:
Then the icon will be shown in the browser even when the images are disabled. .
How to get favicon from a website
Not all webmasters place favicon.ico at the root of the site. To get the favicon address use the following script:
$url="http://сайт"; $html=file_get_contents($url); if (preg_match("/<([^>]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; if (strpos($favicon, "://")===false) $favicon = $url. "/" . ltrim($favicon, "/" ) ?>
Search engines Google, Yandex and favicon
Search engine robots cache website icons. Cached icons are available for the following requests:
In addition, Yandex can make you a “sprite” from icons of different sites:
Icons for iPhone and iPad
Even if you do not specify a link to the picture, the iPhone will still look for a file named apple-touch-icon.png in the root folder of the site and if it finds it, it will take the picture from it, round it at the corners and a highlight will be applied to it automatically. device. To avoid this, instead of apple-touch-icon.png you should write apple-touch-icon-precomposed.png owners of iPhones and iPads, because For them, we make a beautiful icon measuring 57x57 (by the way, it can be larger, but this is the standard size of the icon on the lunch screen), connecting it like this:
How to dynamically change favicon?
If you try to change the value of a tag property through the DOM, you will not get the desired result. To dynamically change the page icon, you must first remove the link tag with the old icon from the page title, and then add it with the new content. This is done like this: // Link to the new icon file var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // Find and remove the old icon from the HEAD tag var links = head.getElementsByTagName("link"); for (var i = 0; i< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);HTML5 and favicon
The sizes attribute was added to HTML5, allowing you to declare several different versions of the same icon, and these can be PNG files:
How to declare a tile for tablets on Windows 8?
The ad for Windows 8.0 looks something like this:
Windows 8.1 and IE 11 expect multiple versions of the image declared in browserconfig.xml. For example:
You don't have to declare it if the file name is not changed:
Honestly, I really love the favicon. I have a deep, equally chaste platonic love for him. This doesn’t mean that I tell my fellow webmasters stories about how I changed the favicon and traffic increased by 10% (although wait... maybe that happened), but it does mean that when the favicon of my new site appears in the Yandex index, the site itself is starting to seem a little more SDL to me.
What is a favicon?
Favicon (Favicon – short for “favorite icon”) is an image that is displayed in the browser’s address bar before the address, in the tab corresponding to the window with the open page of the site, as well as when adding a resource to the favorites tabs. These images can help the user better remember the brand or company and increase site recognition. Often, a reduced or slightly altered image of a company or brand logo is used as a favicon.
Benefits of using a favicon
Using a favicon brings benefits over time. For example, check out these options:
- When a user opens many tabs in the browser, he can immediately determine which of them the site is on, even if the text with the name is no longer displayed;
- In Yandex search results, the favicon is displayed to the left of the site or its page, which attracts the attention of visitors and distinguishes it from others;
- The picture is well remembered and remains in memory - as a result, the site becomes more recognizable and attractive to users.
Thus, a favicon is part of the site’s image, which performs not only an aesthetic function, but also makes it more convenient for the user to search for the portal in bookmarks, tabs, and search results.
Features of Yandex working with favicons
The Yandex search engine is one of the few that highlight site favicons and display them when building a list of search results. To do this, a special bot periodically indexes sites and updates information about the presence of favicons.
Previously, favicon updates occurred once every couple of months. Now, in 2018, Yandex indexes them much more vigorously and on some of my new sites the favicon appears within a few days.
To check whether Yandex displays a favicon, you can find your portal in the search list and see if the icon is visible to the left of it. You can also enter the following construction in the address bar: for Yandex - http://favicon.yandex.net/favicon/www.site.ru (where instead of www.site.ru you need to type the domain of your site). A correctly created Favicon will be displayed on a black background, and this means that Yandex sees it.
If the favicon is not visible, this may be due to the following reasons:
- The image size does not correspond to the required size: 16x16 pixels;
- The image format is not the same - it should be ico, jpeg or png (the first option is more preferable for Yandex);
- The picture is blurry or not unique - sometimes for these reasons the search engine blocks icons;
- Yandex is updating the system - then after some time everything should correct itself;
- The site is located further than the hundredth position in the search results - in this case, the favicon may also not be displayed.
After checking the picture according to these criteria, you need to correct the shortcomings. If after this the icon is not displayed, you can contact Yandex support.
For a favicon to be displayed in Yandex.Direct, it must be correctly designed and located in the right place on the site. Then the Yandex search robot will index it and start showing it in search results. This usually happens 2-4 weeks after the site is published with changes. There is no need to notify or ask Yandex to publish the favicon; this will happen automatically after a certain time has passed after it appears on the portal.
How to create a favicon
If you want to create an ico file from a large image in a format, for example, png, then it would be a good idea to install Adobe Photoshop first. Then the ICO plugin for Photoshop is installed (look for the plugin for your version of FS in a search engine). When it is installed, we copy the desired file ICOFormat.8bi (for 32-bit) or ICOFormat64.8bi (for 64-bit) to one of the following paths:
C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats
If there is no “Plug-ins” or “File Formats” folder, then you need to create it. Now in the save dialog you can select the ico format. The sizes of the created icons can be multiples of 8 (16×16, 24×24, 32×32, and so on, but it is most reliable to choose 16×16).
The image that is to become the favicon is then opened in Photoshop. Click “Image – Image Size” and the image size changes to 16x16 pixels. Then press “File – Save as” and select the ICO format (the file name should be favicon.ico).
I myself have recently been converting images into ico format without Photoshop. Using the service https://realfavicongenerator.net/.
< link rel = ”shortcut icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ > < link rel = ”icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ > |
After some time, the favicon will appear on the site.
Some smart people make a favicon in the form of an arrow, a triangle, and add red elements so that the user clicks. This, of course, can be done, but for this the site can be artificially lowered.
Yandex scares favicon nerds
When designing an icon, keep in mind that the image must be clear and clearly visible, despite the small format. Therefore, it is better to use as few individual objects as possible and not too many colors. You can look at competitors' favicons and think about how you can stand out from them.
Services
There are also special programs and resources for creating icons, among which the following are popular:
- favicon.cc - the simplest editor will allow you to create a simple image, the principle of operation is a bit like Paint. Colors are also selected, and a drawing is performed by clicking on the pixel squares that need to be painted over. There is a fix tool. The created image can also be saved to your computer as a finished favicon image. As you work, at the bottom of the screen you can see the preliminary result in the form in which it will be displayed in the browser. The resource also offers a large selection of ready-made icons;
- favicon.ru – here it is better to create favicons from ready-made images. The picture is downloaded from the computer, processed by the system and converted into a favicon.ico file, which can then be downloaded;
- iconj and audit4web are databases where you can find ready-made favicons.
There is also such a service:
You can turn to a designer to develop the image, but this will cost significantly more.
Another point is that the image for the icon cannot be animated, it is always motionless, even if a picture with any non-static effects was used as the basis.
Many people don’t take online icon editors seriously, but in fact, such tools greatly facilitate the workflow. Just a couple of clicks can save you hours of searching, browsing, or developing yourself. In addition, there is no point in using full-fledged services when there are special services with tailored functions for these specific tasks.
Icon editor sites like these are very effective. They allow you:
- easily and quickly create new materials;
- give existing developments a finished look;
- save the result in different formats (SVG, ICO & PNG);
- create icons for .
In this article, we selected the five best online free icon editors and, for comparison, tried to create a set in each of them.
IconsFlow
IconsFlow.com - vector icons + editor that allows you to create personalized sets and export them in good quality (SVG, ICO & PNG). The main advantage of the service is the presence of two editors:
- the main one, in which the palette, style, effects are selected;
- form editor, where you can change the current shape or draw a new one.
If you've already created icons in Illustrator, simply download the SVG files and experiment with different backgrounds. IconsFlow has certain restrictions when using it for free, so make sure you read them before you start. There are lessons and a help section for novice users, and it is also possible to work in the icon editor in Russian.
View of the IconsFlow vector editor:
Examples of work:
FlatIcons
With FlatIcons.net you can create your own flat icon (flat style) based on ready-made templates. Set the dimensions, choose a pattern and the main background (circles, rings, rectangles), change the color. This icon editor is free, but it has two disadvantages:
- Firstly, you can only download files in PNG format.
- Secondly, you will have to create each object separately, because... It is impossible to develop a whole set at once.
Despite the fact that the peak of popularity has already passed, many people use them in their designs. As an example, the developers allow you to download a free set of social flat icons. The result of working in the FlatIcons editor:
Launcher Icon Generator
The Launcher Icon Generator project is free and we think it is more suitable for advanced users. This online icon editor allows you to upload images/cliparts and add text. You can download one icon at a time in 5 sizes (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
The base clipart is a set of Material Design style graphics from GitHub. The service contains settings such as: padding, shape, background color or transparency, scaling + additional effects. Result:
Android Material Icon Generator is another tool for creating flat icons. The highlight of the service is definitely the effect in the form of a long shadow. If you need similar solutions, this icon editor will be an ideal option.
Start by selecting an image from the gallery, then determine the color, background shape (circle or square), shadow length, saturation, attenuation - and your icon is ready. Everything is extremely simple. The site is completely free for personal use.
After downloading, in the archive file you will find 6 PNGs of different sizes and an SVG vector file. The SVG icon will be blurry in Illustrator, but luckily it looks good in the browser. The end result is something like:
The Simunity site is an HTML5 generator where you can create an icon and then copy the code to display it in your web projects. Icons from Font Awesome are used as source materials, for which different parameters are selected: color, frame, size and style of shadows.
This service is useful if you need to quickly create simple, original icons for your website. Result of using Simunity:
Total. The online icon editors discussed above are excellent tools for optimizing the work of designers. There is no point in downloading any programs when everything can be done easily and quickly online. From this selection, perhaps, IconsFlow can be distinguished. It contains as many features as possible: icon gallery, SVG download, embed code, preview, create your own templates, export PNG, ICO and SVG, resize, fashion styles and built-in vector editor. In addition, this is the only free icon editor in Russian, if this is important to you.
If you know any other similar services, send options in the comments.