entranceFavon House. Universal way to create Favonov
In this lesson, the creation of Favicon is considered, you will find out why this icon is needed, get recommendations for improving its type and attractiveness.
In addition, we will consider the process of creating and adding Favicon for the site.
Favicon. - This is a small icon that you can see in the address bar of the browser and on the tabs of the open pages, as well as when adding a site, this icon is added to the browser bookmarks.
In addition, the Yandex search engine displays the Favicon icon in the results of issuing next to your site. Your task is to make this icon that this icon stands out, I was remembered against the background of other icons in extradition, and also had some associations with your site. Beautifully created and attracting attention icon Favicon can significantly increase the number of goals to your site compared to those on which it is not installed or has an attractive view.
Here are some recommendations that need to be considered when creating Favicon.
#one. The icon must be easily recognizable and have associations with your site or niche to which your site belongs. As a badge, you can use the logo or the symbol of the association with your site. In addition, you can use the color gamut that creates your website or logo.
# 2. Do not use standard icons. Many after creating a site on a particular CMS, leave the icon, without changing. As a result, in the issuance of the search engine, there may be not one site with such a badge, but many. This is not how you do not highlight your site, so use only the unique Favicon icons created specifically for your site. This can also include the situation when you use icons from various collections or elements of the interface of other sites. Remember to stand out you need a unique Favicon.
# 3. Try when creating a badge to use brighter and bright colors, as a rule, they attract more attention.
#four. Do not use animated icons. Firstly, the animation is supported not by all browsers, in the second the attention of the visitor should be concentrated on the content, and not on the icon.
Now consider directly the Favicon process itself. For this there are many services. However, they are more suitable for those who already have a finished icon that they somewhere served or taken from some collection. But as I said above, the icon must be unique, so here I will consider the process of creating it using Photoshop, on the example of the site site.
Creating Favicon Billet In Photoshop
#one. Create a new document in Photoshop size 64 * 64px, To do this, go to the "File" menu \u003e\u003e "New ..." or press the Ctrl + N key combination. In general, the icon itself should be 16 * 16px, but it is better to first create it the same size, and then reduce to the necessary one.
# 2. In my case, I have no logo for the site so I decided to use the "W" symbol from which the address of the site begins, as well as those colors that prevail at the top of the site it is blue and yellow. Therefore, I set the color value # 6A91D0 and using the "Fill" tool (G) set the blue color of the previously created document.
# 3. After that, I chose the "Text" tool (T) added the "W" symbol and set it the following color value # FAC31D.
In order for the symbol more standing out on a blue background, I added it with a black color and 2px size. To do this, you must go to the menu item. "Layer" \u003e\u003e "Style layer" \u003e\u003e "Stroke", Select the color and size of the stroke.
After that you need to combine layers, for this you need to go to the menu item "Layer" \u003e\u003e "Combine visible" Or press the SHIFT + CTRL + E key combination.
In order for the lines to have smooth sneakers, I added blur. To do this, you must go to the menu item. "Filter" \u003e\u003e "Blur" \u003e\u003e "Blur in Gauss ..." And set the radius of 0.3 pixels.
His character or image place so that it takes a maximum of space, because if it is small, then with the size of the icon 16 * 16 it will not be noticeable.
#four. Now you need to change the size of the icon. To do this, go to the menu \u003e\u003e "Image size"and set the size of 16 * 16px.
#five. It remains to save the icon. The Favicon icon must have the name FAVICON and extension.ico. The fact is that by default Photoshop does not save images in format.ico. Therefore, save it in format.png, for this, go to the menu item "File" \u003e\u003e "Save As ..." and select PNG from the drop-down list.
Conversion image in format.ico
After that, we convert it into format.ico using the service. Go to this service and using the "Overview" button, select the previously saved file in the PNG format and then click on the "Create Favicon.ico" button.
After that, the link "Download Favicon.ico!" Will appear on the download page. By clicking on which you can save the finished Favicon icon on your computer.
Now it's time to add Favicon to your site so that it is displayed for all its pages. To do this, place the icon in the root folder of your site. If your site is already on hosting, then usually this folder is called "public_html". Then, in each page of your site, in front of the closing tag Add the following lines:
But in each page, the string data must be added if you have a site on HTML. But since, most likely your site is based on a basis, some CMS, then you will be enough to add these lines to the main file of your theme you are using for the site.
If you are using WordPress, go to the WP-CONTENT / Themes folder / folder-with-you-theme / Find in it and open the header.php file, and insert the lines are needed and saved the file.
If you are using Joomla, then go to the Templates folder / folder-C-your-topic / and open the index.php file insert the required rows and save.
In some topics in Wordpress and Joomla, their paths can already be spelled out to the Favicon.ico file, in this case, remove them and replace them.
If you use, any other CMS, then do everything by analogy.
On the pages of the pages and in the address bar of the browser, your icon will be displayed immediately, as for the search for the Yandex, then it is necessary to have time, and the Special search robot Yandex found your icon, after that it will be displayed in the search results.
The material is prepared by the project:
Favicon (English. Favorite icon) is a small icon (image, picture) in a special format that is displayed in the browser address bar when viewing the site, 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 a list of sites in the search for Yandex, Google and highlights your site against the rest.
Why do you need Favicon for the site?
favicon is a trademark of your site. Many companies today have a distinctive Favicon icon that highlights them among competitors. In order for the icon better to be remembered by users, companies should display their logo in it, which must also be one of the elements of the site caps. Another positive feature of using Favicon is that when viewing a large number of sites in the browser, you do not see the page title completely, and you can only see the icon and you can easily determine the tab where you wanted to go.
What is better to portray on Favon?
- The icon must comply with the subject of the site.
- brand if you have a site connected with this brand. At the same time, various brands can be displayed for different pages;
- Apply the Favon to which you want to click, it will increase clicability when viewing in the search for Yandex, Google;
- Make several designs of Favonok for various sections of your site.
- Make several designs of Favonok for various events (eg New Year, Valentine's Day or Cosmonautics Day, :).
How to make an animated favicon?
ICO format does not support animation. But modern browsers allow the GIF format for miniature. It is possible to specify for modern browsers one animated file (Favicon.gif), and for ancient, type Intertet Explorer, other (Favicon.ico). To do this, in the Head section, make the following two lines:
Naturally, you must first put both files in the root folder of the site.
What if it is forbidden to display images in the browser?
If you make Favicon with embedded image in the senior code:
The icon will be shown in the browser even when the pictures are disabled. .
How to get Favicon from the site
Not all webmasters have Favicon.ico at the site's root. To get the Favicon address, use the following script:
] *) link ([^\u003e] *) (rel \u003d "icon" | REL \u003d "shortcut icon") ([^\u003e] *)\u003e / IU ", $ HTML, $ Out)) ($ Link_TAG \u003d $ OUT ; if (preg_match ("/ href ([s] *) \u003d ([s] *)" ([^ "] *)" / IU ", $ Link_tag, $ Out)) ($ FAVICON \u003d TRIM ($ OUT) ; if (STRPOS ($ FAVICON, ": //") \u003d\u003d\u003d FALSE) $ FAVICON \u003d $ URL. "/". Ltrim ($ Favicon, "/");))?\u003e
Google Search Systems, Yandex and Favicon
The robot of search engines cache icons of sites. The stacked icons are available on the following requests:
In addition, Yandex can make you "sprite" from icons of different sites:
Icons for iPhone and iPad
Even if you do not specify a link-link to the image of the iPhone anyway, it will still be to search in the root folder of the site with the apple-touch-icon.png name and if it will find, it will take a picture from it, round the corners and it will be covered with a glare automatically device. To avoid it, instead of Apple-touch-icon.png, you should write an Apple-touch-icon-precomposed.png owners of iPhones and point, because For them, we make a beautiful icon in size 57x57 (you can by the way and more, 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 the tag property via DOM, then you do not strive the desired result. To dynamically change the page icon, you must first remove the Link tag with an old icon from the page title, and then add it to the new content. This is done like this: // Link to the file of the new icon Var icon \u003d "new_favicon.ico"; var head \u003d document.getelementsbytagname ("Head"); // Find and remove the old icon from the Head Var Links tag \u003d head.getelementsbytagname ("Link"); for (var i \u003d 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.
In HTML5, the Sizes attribute was added, allowing you to declare several different versions of the same icons, and it can be PNG files:
How to declare tiles for tablets on windows 8?
Announcement for Windows 8.0 looks like something like this:
Windows 8.1 and IE 11 expect several versions of the image announced in BrowserConfig.xml. For example:
You can not declare if the file name is not changed:
What is Favon?
For those who do not know what Favon is, we will give a small certificate that will allow you to enter the course of the case. Favon is a small icon of 16x16 or 32x32 pixels, which is usually the logo, the first letter of the brand or a characteristic image, reflecting the type of business or the subject of the site.
Why Favon is important?
Favon performs the following functions:
Branding.
Identification of the site by the user (ease of use).
Applies a professional view site.
Let us dwell on the main advantages of using Favon.
Brand recognition
Favon - as a small site certificate. As stated in the introductory part, Favon helps the user remember your site among the many viewed sites. Whether it is a viewing history, Google search results or a list of bookmarks of sites in your browser, Favona will help the user easily recognize your site and go to it.
Confidence
Users tend to judge the merchants of goods and services on the Internet on the basis of how professionally the site is made. Uglyness in the form of a lack of a favon (search engines displays a website without a favon icon of an empty document) can easily lead to loss of trust, especially when users compare you with competitors.
Repeated visits
It is known that people react better to the image than on the text. Now suppose that the visitor of your site rushed when I first visited him, and decided to add it to the bookmarks to return later. Suppose this person subsequently decides to visit your site again, for what to turn to its bookmarks. You are lucky if you have recognizable Favon, such as a noticeable and unique letter G Google and the user will find you. If there is no Favicon, you may even be removed from the list of bookmarks.
Saves user time
Favonons save time spent by the user to identify the site in bookmarks, history or other places where the browser places a favy for quick identification. It just facilitates the life of the average visitor to your site.
Benefits for SEO.
If your site has Favon, you will be visible better in search results than sites in which it is not, and therefore you can attract more visitors.
How to create a Favon?
There are many tools to create Favon in minutes. If you do not have design skills or you do not know how this is done, you can try to generate Favon using Logaster.
To do this, follow the step-by-step instructions:
Step 5. Create Favon
Now that you have a logo, click "Create Favon with this logo" on the logo page.
Step 6. Select the desired Favicon design
As in the case of the logo, Logaster will generate several dozen beautiful and ready-to-use Favonov. Choose your favorite design. Preview will allow you to see how your favy will look like on the site.
If you need to change the Favon, then you can do it through the logo editing, as Favona is created based on the design of the logo. Therefore, if you want, for example, another color of the Favicon, you need to return to the logo page, change its color, and then create a Favon again.
You can find inspirations for Favonka on sites:
Step 7. Download Favon
You can purchase Favon separately, at a price of $ 9.99 or buy a design package that includes not only Favon, but also a logo, a business card, an envelope and a corporate form. How to buy a design package, you can find out.
After payment you can download Favon in ICO and PNG formats.
Where can I use Favon?
You can use Favon:
On the site;
Mobile devices. The user can add Favon to the home screen of its device (something like bookmarks) - Android, iOS, Windows Phone, etc.;
Programs and applications for RC / MAC.
How to install Favon to the site?
After you have received Favon, its installation on the server will take no more pair of minutes and is performed in two stages. To do this, you need access to the root directory of your site and a text editor to change the HTML code of the site.
Step 1.You need to download the Favicon.ico file to the server. To do this, you need to download and install an FTP client, for example, FileZilla. Then enter the username and password and download the file. More detailed instructions How to download a Favon file you can read.
Step 2.Now you need to edit the HTML page of your site to help browsers find the image of your favic. With the Outdoor FTP window, find and download the index.html or header.php file from the server.
Open the index.html file in text editor - Notepad, NotePad ++, Sublime Text.
If your site contains clean HTML, insert a special code to the HEAD area of \u200b\u200bthe index.html file.
The code can be copied on the Favicon page on the Logaster website.
If you use WordPress, insert the code below to the header.php header.
Having done this, download the file back to where you took it. Ready! Restart the page of your site to see Favon.
Most modern browsers are smart and know how to find a favon file even without such code, but only if the Favon has an image of a 16x16 pixel format, the name Favicon.ico and saved in the root directory of your site.
We hope that this article gave you some useful information that will help create a Favon, which will make your site more successful and attractive.
The topic of today's article is how to make Favicon Online for a site or blog on the WordPress. If you for some reason, do not know what this file is needed yet, I recommend reading the article already written by me on this topic:
In general, this little picture should be every site.
How to create Favicon.ico for site
So, now I will try to tell where, than and how to make Favicon. But for a start, you need to know what size should Favon for the site should be?
Favicon. - This is a picture in ICO, JPEG, PNG, BMP and GIF formats, which can have different sizes, starting with 16 × 16 pixels. The icon of this size must be downloaded to the site for indexing the Yandex robot.
Other sizes have a secondary role and are not displayed in the search for Yandex, and serve to display in browsers, such as on iPhone or iPad. If you want your site to stand out in search results, remember the following rule.
In the case of several fixed blocks of different sizes, in the page code, you must first position the path to the picture of 16x16 px, since the phava robot of Yandex reads only the first address.
The easiest way to draw Favicon in Photoshop or any other graphic editor. You can do it even easier and take an already ready picture or photo and simply convert it to the necessary format and size. Since such an icon is very small, then small details of the image will be bad 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 a business card of your web resource.
If you are not a big sign of Photoshop, it does not matter, there are many free generators for creating Favicon for the site. Some of them can only convert images into ICO format, others make it possible to edit or create a fixer from scratch. I bring to your attention a small review of such online generators.
Services Online Favicon Generator - Creation of Favicon Online
I will start with the simplest services, and then gradually go to more advanced, where you can make static and animated icons from scratch and edit ready already.
When you just run your blog or company website and you still do not have a logo, a wonderful solution for you will serve the logaster service. With it, you can create a logo, and then on the basis of this logo, the generator will create a set of fixes on your choice. Convenience is that the logo and phavicon will be created in one style, so your site will look more professional.
Simple phawacon generators
For a start, several sites where you can easily make an icon for the site, converting any picture to Favicon.ico file, without editing.
www.favicongenerator.com - perhaps the most minimalist service. Nothing superfluous - chose the image, click "Generate Favicon! "And downloaded the created icon.
tools.dynamicDrive.com/favicon. - A simple and understandable service where you can make Favicon in three sizes. To download the received files, you need to click on the "Download FAVICON" button.
www.cy-pr.com/tools/favicon and www.favicon.co.uk - Services similar to the previous one. In the first one can make the size of the phanique of 16 × 16 and 32 × 32, and in the second additional 48 × 48 and 64 × 64.
www.genfavicon.com - the entire process of creating an icon includes three steps:
- Select file (JPEG, GIF, PNG) on your computer or simply register the URL pictures and click " Upload image“;
- Select the size (16 × 16, 32 × 32, 48 × 48, 64 × 64 or 128 × 128) and the required pattern of the pattern, 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 online generators
Now let's see several services where you can make animated Favonons, as well as add text on the Latin, which will scroll together with the icon in the form of a running line. True, the animation is not supported by all browsers.
www.favicon.by - service in Russian. All that is required, select the file, enter the text on the Latin (if necessary) and click the "Create Favicon" button. Below you can see the result and download file archives.
www.favicon.com.mx - service, fully identical to the previous one, only in English.
Where to make Favon from scratch - Online Editors Favicon
antifavicon.com - this service, for some reason, with the anti-art, is interesting, which allows you to create a Favicon.ico file itself, but not in the form of a picture, but as text on a color background. All that is required is to enter suitable letters and choose colors. By the way, I did my Favon here. I thought then redid, and now I'm used to it.
favicon-generator.org - here, except for the converter, there is also an editor of the icon. In addition, you can download the created Favon to the public gallery, where it can freely download other site users.
fAVICON.RU - Popular Russian online generator, where you can create Favona from pictures and draw them. Also here you can order the creation of Favicon specialists for $ 20. I wonder, someone makes 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 a frame animation for up to 20 seconds.
See Animated Favicon and download it in the preview window.
www.degraeve.com/favicon is another Online Favicon Generator. This editor, like previous, allows you to make a transparent background icons.
Perhaps this is enough for today, although this is not all online services. But even these are quite enough to create a beautiful Favon for your site or blog and be noticeable in search results.
And yet, another online generator icons for the site I used to follow. This service deserves a separate post, where I will tell you how to make Favicon for iPhone, iPod Touch and iPad browsers and still focus on installing animated icons on the site. In addition, will introduce you to the Favicon Validator service, where you can check and see all the Favicon.ico icons, if this file contains more than one image .. So far!
Hello, friends! Recently installed on one of the blogs Favonka and thought that I still have no article on this topic. So why not write? I understand that the topic is brought and many people all know all this. Many, but not all, if you believe WordStat.yandex.ru statistics (see Screenshot below). We all once did Favicon for the first time and searched for such information. So let novice webmasters find her on my blog. Moreover, I created it precisely for this purpose. Yes, and additional traffic from search engines on this request will not hurt me. So, let's go.
What is Favicon.ico
For starters, let's decide what Favon is and why we need it. This is what Wikipedia () is responsible for these questions.
It is easier for me to show than explain to words. In the screenshot below, I showed how Favonki are displayed in Google Chrome. Similar situation in other browsers.
Generally, favon for the site - This is a special icon or a picture of 16 × 16 pixels in ICO format. Usually such a file is called favicon.ico. And is located in the root folder of the site. Other sizes are also possible (24 × 24, 32 × 32, 48 × 48, etc.) and formats (JPEG, BMP, PNG and GIF). Accordingly, PNG format allows you to make an icon on a transparent background, GIF - animated.
Why need Favonka
Favicon ICO file is very important for the site. And not only because such a picture makes it easy to find the desired web resource among the large number of browser bookmarks. Main chip and benefit in another.
The fact is that Yandex shows Favona in the search results for each site on which it is installed. Unique and beautiful Favicon attracts attention and allows your resource to stand out among competitors, thereby making the click on it and collecting search traffic. In addition, the memorable Favon contributes to the site recognition on the Internet as brand. Agree that, first of all, I want to click on the link with the picture.
It is worth saying that Yandex does not recommend that the picture contains translucency, and the animation is supported only in Firefox browser. It should also be understood that with an increase in the size of the picture, the weight of the file and the load on hosting increases. Therefore, it is better to use the Favon for any site (WordPress, Joomla, Dle, etc.) in format.ico with 16 pixels size.
To install such an icon on the site, you must first have it. There are several options here:
- download ready-made favon;
- make Favicon.ico with the help of photoshop or special online generators.
The first way is much simpler, but it reduces the likelihood of uniqueness. Nevertheless, consider it.
Where to download Favicon.ico. Ready collections of Favonov for the site
In order to download the Favon for the site, it is enough to enter such or similar in the search engine. Believe me, you will not have a lack of results. Below I will give the address of several resources where you can download ready-made pictures for Favon. On some of them there is an opportunity to create their own icons with the help of generators.
Galleries icons (Favicon.ico) for the site:
- www.iconj.com/gallery.php - a large collection of pictures and online generator;
- www.audit4web.ru/info/favicon/ - here more than 15,000 pieces;
- www.favicon.cc/?action\u003dicon_list&order_by_RATING\u003d1 - Generator and gallery of animated and static icons;
- www.favicon.co.uk/gallery.php - Favicon Generator and Favonok catalog for the site;
- thefavicongallery.com is another gallery of pictures.
But, perhaps, the best place where you can download various icons and logos for your site, it is Findicons.com.
A small review of this service:
Images are presented in different formats and sizes. To find and download Favicon.ico on the website Findicons.com, you need to select a picture and click the "More" button. In the window that opens, click on the line with the size of the sizes.
Hopefully understand.
Another wonderful service with search on icons www.iconsearch.ru.
Everything is simple here. We enter the topic in the search bar, on which we will look for a picture or use the tag cloud. It is possible to choose size and color background (white, transparent, black).
To download the selected Favicon, click on the PNG or ICO format icon. By clicking on the inscription "More", you can see this icon in other sizes and still icons from this set.
On this I will finish, or even so it turned out mnogabukaf about that how to download Favicon ICO for site. But it was still going to tell, and on the WordPress blog. Now the next time, do not miss. While!