An article in which we will consider how to make the right favicon for the site.
A favicon is an icon that is associated with a particular website or web page. The presence of a favicon at the site allows, as a rule, to make it more recognizable. This is due to the fact that this website (each of its pages) will have an icon, by looking at which the user will know what kind of resource it is. The site's favicon icon can be seen in various browser elements, such as a tab, address bar, browsing history (log), bookmarks bar, etc. In addition, the favicon icon can also be found in Yandex search results next to the site name. The favicon icon is also used when placing a link (to a website page) on the main screen of iOS (Safari), Android (Chrome), Windows 8 and 10 operating systems.
How to add a favicon to a website
The process of installing a favicon on a site usually starts with its creation. Due to the fact that the requirements for the resolution and format of the favicon icon on different devices are different, it is better to first prepare it in svg (scalable vector graphics) vector format. This action will allow, using a single image (svg), to get a favicon icon in excellent quality both with a resolution of 16x16 pixels and 512x512.
As a tool for working with svg graphics, you can use a professional free vector editor like Inkscape.
Prepare image for favicon
Consider the basic steps for preparing an image in svg format for a favicon.
The image that will be used as the site's favicon icon can be drawn, or obtained through a Google or Yandex service image search. It is desirable to search for an image (icon) in the svg format. But if you cannot find a suitable icon in svg format, then you can choose another format (for example, png or jpg). And then in the Inkscape program, using a special tool, convert it into vector graphics (vectorize a raster).
For example, consider how you can use Inkscape to prepare an image (door icon) in svg format for a favicon.
Examples of prepared images (red arrow, light bulb, butterfly, clock, heart and book) for favicon (for download - in the context menu of the image, select the "Save image as ..." item):
Favicon generation for all platforms
We will generate a favicon icon for all platforms (iOS, Android, PC, MAC, etc.) online at http://realfavicongenerator.net/.
To do this, click on the "Select your Favicon picture" button and select the prepared image (door.svg) in the dialog box.
After that, you need to set the background colors and enter the name of the application for the Android (Chrome) operating system.
After that, select the option "I will place ...", which says that the resulting favicon files must be placed in the root of the site. This action will ensure its support in most browsers.
After this action, the realfavicongenerator.net service will generate the favicon icon and HTML code. The result of this operation will be displayed on the screen.
Installing a favicon on a website
After completing the preparatory operations, let's start connecting the favicon to the site. All the basic steps for adding a favicon to a website are given on the "Install your favicon" page.
Basic steps:
For example, on CMF MODX, connecting favicon (HTML code) to pages is usually done in a chunk, which is used to form the head section of the document.
Website favicon check
Checking the favicon of the site is carried out using the link provided in paragraph 4 (check your favicon). This action can also be performed through the main menu Favicon -> Favicon checker.
To start validating the favicon of the site, select the site protocol (http:// or https://) in the form presented, enter the domain name and click on the "Check Favicon" button.
After that, we make sure that the favicon of the site has been tested on the realfavicongenerator.net service and is displayed correctly on all platforms.
Favicon indexing by search engines
The process of indexing icons for different search engines takes different times. For example, at Yandex, this process can take several months.
Using the following URLs, you can check how search robots see the site's favicon icon:
- Yandex - https://favicon.yandex.net/favicon/domain_name
- Google - https://www.google.com/s2/favicons?domain=domain_name
Instead of domain_name, you must specify the name of the domain (for example, site).
Note: using animated images (gif) as a favicon is only supported by some browsers (Firefox). Other browsers will use a static image as the favicon.
A new lesson in the style of a workshop and this time we learn the secrets of the favicon. favicon - a small icon that is displayed in bookmarks and the browser bar. If you have your own website and want to compare favorably with others even in small things - favicon necessary. The most beneficial, of course, it looks among the bookmarks, against the backdrop 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 line, but about how to draw your own favicon in Photoshop.
In what format should the favicon be saved?
It all depends on the browser. For Microsoft Explorer fit icon format ICO. We already encountered this format when we made the cursor. For other browsers from Google Chrome before Apple Safari normal fit gif or PNG. favicon may be translucent. To do this, it must be saved in translucent PNG, and then convert to the format ICO. You can do it in a good program IcoFX. However, there are many third-party sites for generating a favicon, and the most obvious of them is www.favicon.ru
How to put 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 the 16px
- The best place for a favicon is the site's root folder.
- Write the address of the icon in the meta tags header in the site index.
In HTML 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 all this is indicated through the tag link . Modern browsers most often themselves look for a file in the root site called favicon, however, to be sure, it does not hurt to indicate the exact links.
Create a favicon in Photoshop
Create favicon very simple. Do you want to do the same favicon like Vkontakte or Odnoklassniki? Good favicon You can’t do it by reducing large pictures in all sorts of “generators” of favicons, which are abundant 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 fuzzy, since the edges of the letter will extend by a few pixels when resized. Get kinda anti-alias, which is usually a good thing, but in the case of pixel art, such transitions are just not needed. On the other hand, it is worth avoiding excessive “tatteredness” on roundness, otherwise it will turn out hello gifs 1999.
Create a file of size 16 X 16px . We will create a very simple translucent favicon with in the form of a letter, with a bit of depth. The depth will be created by the shadow and the gradient.
Draw the background
Why in the intro of this lesson you see a huge smooth and licked favicon? Because I increased it for the intro to the lesson. How did I manage to enlarge the image 16px? Very simple, I always work in vector if it is possible to use it and if it makes sense. And the vector easily transfers any transformation and does not lose in quality.
Choose a tool Rounded Rectangle Tool. On the settings panel, select the mode, which will allow you to draw in vector. In the drop-down menu of the panel, check mark - Snap To Pixels. This is necessary so that vector paths snap to pixels and do not draw "in 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, we don't need it. Turn off its visibility. Or double click on the layer, turning it into a regular layer, and then delete it.
Favicon (eng. Favorite Icon) is a small icon (image, picture) in a special format, which is displayed in the address bar of the browser when viewing the site, in the browser tab or in its bookmarks (“Favorites”).
favicon is an additional decoration for your site, your mini logo. It is also shown when viewing the list of sites in the search for Yandex, Google and highlights your site 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 icon that sets them apart from their competitors. In order for the icon to be 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 the browser, you do not see the full title of the pages, but only see the icon and you can immediately easily determine the tab where you wanted to go.
What is better to depict on a favicon?
- The icon should match the theme of the site.
- brand, if your site is associated with this brand. At the same time, different brands can be displayed for different pages;
- Use a favicon that you want to click on, this will increase clickability when viewed in Yandex, Google search;
- Make several favicon designs for different sections of your site.
- Make some 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 the GIF format for thumbnails. It is possible to specify one animated file for modern browsers (favicon.gif), and for ancient ones, such as Intertet Explorer, another one (favicon.ico). To do this, in the head section, add the following two lines:
Naturally, you first need to place both files in the root folder of the site.
What if the display of images is prohibited in the browser?
If you make a favicon with an embedded image in the page code:
That icon will be shown in the browser even when images are disabled. .
How to get a favicon from a site
Not all webmasters place favicon.ico in the root of the site. To get the address of the favicon, use the following script:
]*)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 site icons. Cached icons are available for the following requests:
In addition, Yandex can make you a "sprite" of icons from different sites:
Icons for iPhone and iPad
Even if you do not specify a link to the picture, iphone will still look for a file with the name apple-touch-icon.png in the root folder of the site, and if it finds it, it will take a picture from it, round it in the corners and a glare will be automatically applied to it by itself. device. To avoid this, instead of apple-touch-icon.png, you should write apple-touch-icon-precomposed.png owners of iPhones and points, because. for them, we make a beautiful icon 57x57 in size (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 change favicon dynamically?
If you try to change the value of a tag property via the DOM, you won't get the desired result. To dynamically change the page icon, you must first remove the link tag with the old icon from the page header, and then add it with the new content. It's 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
HTML5 added the sizes attribute to allow multiple different versions of the same icon to be declared, and these can be PNG files:
How to declare a tile for tablets on Windows 8?
The announcement 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 instance:
It is possible not to declare if the file name is not changed:
Favicon - (from the English FAVorites ICON translated as "icon for favorites") - a 16x16px or 32x32px website icon that 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 able to convert your chosen image (up to 175 Kb in size) into a website icon (16x16px or 32x32px in size). After generation, you only need to upload favicon.ico to the desired site hosting directory.
The absence of an icon is a mistake in the technical optimization of the 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 is approximately from two weeks to one month.
Where can I download a favicon so that it is 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 can not 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, they have the path to different favicon.ico in the corresponding templates.
The topic of today's article is how to make an online favicon for a website or blog on WordPress. If for some reason you still do not know what it is and why this file is needed, then I recommend reading the articles I have already written on this topic:
In general, every site should have this little picture.
How to create a favicon.ico for a website
So, now I will try to tell you where, how and how to make a favicon. But first you need to know what size the favicon should be for the site?
favicon is an image in ICO, JPEG, PNG, BMP and GIF formats, which can have different sizes, starting from 16x16 pixels. An icon of exactly this size must be uploaded to the site for indexing by the Yandex robot.
Other sizes have a secondary role and are not displayed in Yandex search, but are used to display in browsers, for example, on the iPhone or iPad. If you want your site to stand out in search results, remember the following rule.
If there are several favicons of different sizes, the path to the 16x16 px image should be placed first in the page code, since the Yandex favicon robot reads only the first address.
The easiest way is to draw a favicon in Photoshop or any other graphics editor. You can do even easier and take a ready-made picture or photo and simply convert it to the required format and size. Since such an icon is very small, small details of the image will not be clearly visible on it. Therefore, it is better to make your favicon as simple as possible, but at the same time attractive and unique. After all, this is the calling card of your web resource.
If you are not a big connoisseur of Photoshop, then it does not matter, there are many free generator services on the Internet for creating a favicon for a site. Some of them can only convert images to ICO format, while others allow you to edit or create a favicon from scratch. I bring to your attention a small overview of such online generators.
Services online favicon generator - favicon creation online
I'll start with the simplest services, and then gradually move on to more advanced ones, where you can make static and animated icons from scratch and edit ready-made ones.
When you are just launching your blog or company website and you don’t have a logo yet, the Logaster service is a great solution for you. With it, you can create a logo, and then based on this logo generator will create a lot of favicons of your choice. The convenience is that the logo and favicon will be created in the same style, so your site will look more professional.
Simple favicon generators
For starters, a few sites where you can easily make an icon for the site by converting any image into a favicon.ico file, without the possibility of editing.
www.favicongenerator.com - perhaps the most minimalistic service. Nothing more - choose an image, press the button “Generate Favicon! ” and download the created icon.
tools.dynamicdrive.com/favicon- a simple and understandable service where you can make a favicon in three sizes. To download the received files, you must click on the button “Download FavIcon” under them.
www.cy-pr.com/tools/favicon and www.favicon.co.uk are services similar to the previous one. In the first one, you can make the size of the favicon 16x16 and 32x32, and in the second, additionally 48x48 and 64x64.
www.genfavicon.com - the whole process of creating an icon includes three steps:
- Select a file (JPEG, GIF, PNG) on the computer or simply enter the image URL and click “ Upload Image“;
- Select the size (16×16, 32×32, 48×48, 64×64 or 128×128) and the desired area of the image if we want to generate only part of the image by clicking “ Capture and Image“;
- We look at the result and, if everything suits, download the file.
Creating an animated favicon for a website in online generators
Now let's look at several services where you can make animated favicons, as well as add Latin text that will scroll along with the ticker icon. True animation is not supported by all browsers.
www.favicon.by - service in Russian. All that is required is to select a file, enter the text in Latin (if necessary) and click the “Create Favicon“ button. Below you can see the result and download the archive with the files.
www.favicon.com.mx is a service completely identical to the previous one, only in English.
Where to make a favicon from scratch - online favicon editors
antifavicon.com - this service, for some reason with the prefix anti, is interesting in that it allows you to create the favicon.ico file yourself, but not as an image, but as text on a colored background. All that is required is to enter the appropriate letters and choose colors. By the way, I made my favicon here. I thought I'd change it later, but now I'm used to it.
favicon-generator.org - here, in addition to the converter, there is also an icon editor. In addition, you can upload the created favicon to the public gallery, where other users of the site can freely download it.
favicon.ru is a popular Russian online generator where you can both create favicons from pictures and draw them. You can also order the creation of a favicon by specialists for $20. I wonder if anyone orders there?
www.favicon.cc is another popular generator similar to the previous one. An interesting feature of this service is that here you can make frame-by-frame animation up to 20 seconds long.
You can see the animated favicon and download it in the preview window.
www.degraeve.com/favicon - another online favicon generator. This editor, like the previous ones, allows you to make the background of the icon transparent.
Perhaps enough for today, although these are far from all online services. But even these are enough to create a beautiful favicon for your website or blog and be visible in the search results.
And yet, I saved another online icon generator for the site for later. This service deserves a separate post, where I will tell you how to make a favicon for iPhone, iPod Touch and iPad browsers and dwell on installing animated icons on the site. In addition, I will introduce you to the Favicon Validator service, where you can check and see all favicon.ico icons if this file contains more than one image.. Bye everyone!
