Create a favicon online. Universal way to create favicons
Read also
Hi all!
In this article, I will tell you how to install a favicon on a website. This can be done using the root directory of the site or using the functionality of the template. We will analyze all the options and determine which one will be the best for a particular case.
But before that, we'll talk about how this same favicon can be drawn. Next, we will figure out what size the logo should have, at the end I will tell you how to insert the created icon on the site.
A favicon is a 16 x 16 website icon (or 32 x 32, but no more). It is displayed in a browser tab. It looks like this:
Also, the icon is displayed in the search results, and if your site does not have its own favicon, then users are unlikely to pay attention to it. Especially the more experienced ones, who really appreciate every little thing.
In Yandex Webmaster, the absence of a favicon is classified as an error that needs to be fixed urgently. This is due not only to the fact that people in the search engine may not trust a site without an icon, but also with certain search algorithms. Robots see this technical shortcomings and most often lower the resource in the issue. A sad phenomenon that can affect all SEO promotion.
Let's summarize a little:
- Favicon affects behavioral factors and clickability in search results.
- Search robots can also take into account the presence or absence of a favicon.
- Such a technical flaw can lead to a drop in traffic.
In other words, if you have a question at all: add a favicon or not, then the answer is obvious - be sure to add it.
Now let's figure out how to draw this very icon. This can be done using various online services, editors.
Where to download the finished version
far from the best choice but someone is using it. You can download a ready-made favicon from the Internet and don’t particularly bother creating your own. All of them are presented in convenient formats and the right sizes.
Just enter the desired query into the search engine, something like “Download ready-made favicon”, after that you will be presented with a huge number of different variations.
Download the picture to your PC, and then install it on the site. Everything is simple. They are available absolutely free of charge, no one will scold you. Although if we are talking about a company, even a small one, then when someone else's logo is found, unpleasant incidents may arise.
Ready-made options can be searched on various sites. As a rule, there are whole collections of various thematic logos that some webmasters may like.
But I will repeat once again that it would be better to create a favicon yourself.
Create a favicon
Online Services
You can draw a favicon in online services. Simply enter the appropriate query into the search engine, after which your attention will be presented with a whole list of sites that can help you realize your plan.
This course will cover the most important features of competent creation information projects, interaction with the team and other useful aspects that you will definitely need when developing your business.
Today I want introduce you to services for creating a favicon for your site. Favicon are abbreviations for the English words favorite and icon. This is a 16 x 16 pixel image called a favicon with the extension ico . She is placed in root folder your website hosted. When loading a site, the browser automatically looks for this file, then adds it to the address bar before the page URL and bookmarks, assigning it to your site. The icon of the website does not carry any practical use and serves only to recognize it.
Now any web designer who at least somehow thinks about the uniqueness and originality of his resource is simply obliged to make a special icon for it. In any browser in the address bar, the name of your site, along with the icon, will look modern and relevant. It will also be noticeable in bookmarks and in Favorites, which will allow it to stand out from the mass of similar sites. You can pick up an icon, according to the subject of your resource, and without even starting to study it, the visitor will immediately be able to understand what he is talking about. This will have a good effect on the recognition of the site and the formation of it as a brand.
By default, a website displays the icon that is provided for it in the current browser. Likewise, most versions modern browsers support personal website favicons. And in search engine Yandex, which now dominates the Russian-speaking space along with Google, while search query, ranking sites appear with their icon. Therefore, without delay, it is imperative to pay close attention to its creation.
There are many resources on the Internet that already store ready-made icons. There are a great many of them, but now we are interested in the creation of a favicon.
Need to create a favicon for a website? Consider services for creating a favicon online
The most popular service for creating icons for the site. Working in it is quite simple and even a novice user can handle it. We upload an image that we want to be used as a site icon. He processes it. We look at the resulting image and if it suits us, then click Download. The file is automatically saved with the name . You can draw pixel by pixel yourself and if you like, then save it as an icon too. It is important that a simple pattern is used to create the favicon. If there is a lot of multi-colored things, then a nondescript spot will turn out.
The next service, which is just as easy to use, is . Work in it is approximately similar to the previous analogue. The only thing is that it is in English and there are more ads. But in general, the generation actions are quite similar. Upload an image, watch, edit and save.
Now almost every resource providing website promotion services or collecting analytics on them has additional option to create favicons. For example, well-known services that also have this additional option:
But I like services that are tailored specifically for creation. Here, look, another cute online tool to generate icons of various sizes and formats. Modest and tasteful. We have uploaded our file. Chose a size. Preview and save to your computer.
It would be possible, of course, to use everyone's favorite Photoshop to create icons. But it doesn't save pictures with ico extension. Rather, it saves, but for this you need to unpack a special plugin - icoformat.8bi install it in the Plug-Ins\File Formats folder in the Photoshop folder. This will save files with our desired extension. For me, it's quite troublesome.
I offer this option. In Photoshop, we create a picture that we want to see as an icon, save it with any extension and send it to one of the above services, where we will get the .
You can also use online converters graphics from one format to another. For example here or . With them, you can change any extension graphic file on ico.
How to make the icon become a favicon for the site?
The following steps are required:
1 Make sure the file is named .
2 Using Filezilla, we place it in the root folder of our site. In theory, these actions are enough and the browser will automatically determine where it is located. But we play it safe and write the path to this file with the html code.
3 To do this, take our theme's header.php file (you can edit it in the admin panel directly in WordPress, or you can download it from the server), open it and write it before the closing tag the following code:
/favicon.ico"/>
/favicon.ico"/> |
4 Save the file and transfer it back to the hosting.
5 We clean the cache of the current browser and that's it. We got the desired result.
By the way, it is not necessary that the favicon is located at the root. The href attribute specifies the path to it directly. It turns out like this:
|
|
It is also not necessary that the icon has an ico extension. You can also use the png and gif extensions. To do this, the code changes the type of the output file.
That is, we change type from image/x-icon to image/png or gif .
By the way, you can add one more thing. We created and installed a favicon for the site, and in the WordPress admin panel, the standard favicon remained by default. In order for it to change generally everywhere, you need to insert the following php code into our theme's function.php file:
function sp_set_favicon() ( echo " "; ) add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");
function sp_set_favicon() ( echo ".get_bloginfo("template_url") /> " ; add_action("admin_head" , "sp_set_favicon" ) ; add_action("login_head" , "sp_set_favicon" ) ; add_action("wp_head" , "sp_set_favicon" ) ; |
Now it will be reflected in all headers.
On this, in general, and all. Today we discussed why you need to create a favicon for a site and reviewed online services for creating a favicon for a site and the subtleties of installing it. Don't forget to subscribe to blog updates. See you soon!
Watch the video on how to create a favicon.ico and host it:
Now a personal site icon - Favicon - is a kind of business card of any web resource. Such an icon highlights the desired portal not only in the list of browser tabs, but also, for example, in Yandex search results. As a rule, the Favicon does not perform any other functions, in addition to increasing the site's recognition.
Creating an icon for your own resource is quite simple: you find a suitable picture or draw it yourself using a graphics editor, and then compress the image to the desired size - usually 16x16 pixels. The result is saved to the favicon.ico file and placed in the root folder of the site. But even this procedure can be greatly simplified with the help of one of the Favicon generators available on the web.
Most web icon editors offer all the tools you need to create favicon icons. In this case, it is not necessary to draw a picture from scratch - you can use a ready-made image.
Method 1: Favicon.by
Russian-language online favicon generator: simple and visual. Allows you to draw an icon yourself, using the built-in 16x16 canvas and a minimal list of tools, such as a pencil, eraser, eyedropper and fill. There is a palette with all RGB colors and transparency support.
If you wish, you can upload a finished image to the generator - from a computer or a third-party web resource. The imported picture will also be placed on the canvas and become editable.
As a result, you get a graphic ICO file with the name favicon and a resolution of 16x16 pixels. This icon is now ready to be used as your website icon.
Method 2: X Icon Editor
An HTML5 browser application that allows you to create detailed icons up to 64x64 pixels. Unlike the previous service, X-Icon Editor has more drawing tools and each of them can be flexibly configured.
As in Favicon.by, here you can upload the finished image to the site and convert it into a favicon, editing it properly if necessary.
If you want to preserve the details of an image that you intend to turn into a favicon, X-Icon Editor is great for that. It is the ability to generate icons with a resolution of 64×64 pixels that is the main advantage of this service.
Favicon (eng. Favorite Icon) is a small icon (image, picture) in a special format that is displayed in the address bar of the browser when browsing 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 example:
It is possible not to declare if the file name is not changed:
Today we will touch on a very interesting topic. When working on your site, sooner or later you will need to create a favicon. In simple terms, a favicon is an icon for your site that appears in a tab in your browser. Also, it can be seen in the browser's quick access area if your site has been added to "Favorites".
Favicons of the most popular sites
I think it makes no sense to say that the favicon should be of good quality, because it is to some extent the face of your site. In this article, we will learn how to create favicons that meet our needs, and also get acquainted with the service for converting them. Read more below.
Video version:
What should be a favicon
Before proceeding with the creation of the favicon itself, it would be nice to dwell on what they should ideally be. So, the perfect favicon:
- Is clear and understandable
- Made in good quality
- Conveys the meaning of your site
- Has a common style with your site
- Stands out from the icons of other sites
The above parameters can be attributed to the ideal favicon. And we need to create just such an icon for our site. However, there are disputes about what exactly should be displayed on the favicon. I believe that in this matter you need to proceed from the general style and theme of your site. It can contain any picture or text. If text is placed on the favicon, it should consist of no more than 2 letters. Otherwise, no one will be able to make out such text, because the size of the favicon is basically 16 * 16 pixels.
What sizes are site icons
As you know, there are now a huge variety of browsers, monitors and devices. And their favicon size requirements are different. There are the following size options to consider:
- 16*16px - standard favicon sizes suitable for most browsers and devices
- 32*32px - used in some cases in Internet Explorer And safari
- 57*57px - used when displaying on iPhone
- 72*72px - used when displaying on iPad
- 114*114px - used when displaying on retina displays (57*2=114)
- 144*144px - used when displaying on retina displays iPad (72*2=144)
What format should favicons be?
Previously, browsers only accepted favicons in the format "ico". Now they have learned to understand other formats, including "png". In our case, we will kill 2 birds with one stone. First, we will create a favicon in the format "png", and then convert it to "ico".
Several ways to create favicons
Today, there are two main ways to create favicons:
- Through special online services
- Create your own through special programs such as Photoshop and Adobe Illustrator
Each method has its own characteristics. The advantage of creating a favicon through online services is that you do not need to have any special skills for this. You simply upload the required image, modify it and download the finished favicon. Or just work with text and draw an icon with the tools of the online service. In general, the main advantage of this method is its simplicity. However, the downside is that the quality of such site icons leaves much to be desired. You won't get a unique favicon for the simple reason that the online service icon gallery isn't limitless. And when using your own images, using the tools of the service, it is not so easy to create a quality product. In the case of drawing an icon manually through the tools of the online service, "something unimaginable" is obtained.
Therefore, we choose the second, more complex but successful solution. To create a favicon, we will use the program photoshop. If you do not have experience with this program, then do not worry. Following my instructions, you can easily cope with the task.
Create a favicon
As I already mentioned, a favicon can be created using an image or just letters. In our case, I will use some kind of picture. For example, let's imagine that we have an automotive-themed website. Therefore, we need to find an image from the auto region. I propose to make the icon of our site in the form of a wheel.
We select the image
You can take images from anywhere. For example, through the same yandex pictures. The main condition is that the image should be simple, without shadows and volumes. This is due to the fact that when it is reduced to a size of 16 pixels, it will not have much detail. Due to extra volumes and shadows, the picture may be blurry.
I find a suitable image using search google on request "wheel". All I have to do is save it by right-clicking and selecting "Save Image As".
Suitable image in google images Next, we open this image with photoshop. It is very important that the favicon has a transparent background. In our case, this is not the case. To remove the background, we use the Magic Wand tool. The essence of her work is very simple. With this tool, we can select areas in an image of the same color. Since the background of our image clearly contrasts with the wheel itself, this will be very easy to do. By clicking once, we select a one-color area. By pressing a keyboard shortcut CTRL + Delete we remove this area.
Removing the background of our wheel We do this with all parts of the background of the image. Thus, in our picture, the wheel is on a transparent background, which is what we wanted to do. So, the blank for the icon of our site is ready.
Create a favicon in 2 different sizes
I suggest making 2 favicons 64px and 16px. First we need to create a larger icon (64px). To do this, we press the keyboard shortcut CTRL+N. In the window that appears, we select the height and width of the image as 64px.
Set the size of the future favicon Next, we need to move our wheel to the area of the image we just created. To do this, we return to the picture with the wheel and select the "Move" tool. In the next step, we click on the image of the wheel and, with the left mouse button held down, move it to the area of the new image. Make sure that the layer with the wheel is selected when moving. Otherwise, the transfer will fail.
Transferring the wheel to a new image After moving the wheels to the new image, we see that they don't fit. We need to scale the wheel down to 64 px. To do this, we hold down the key SHIFT and clicking on the diagonal point of the image to reduce it. So we created the first favicon for our site. I remind you that we have it 64 * 64px in size. Now we just have to save it by selecting the "Save for Web" option in the "File" tab. We choose the format PNG-24 and folder images. The favicon itself is also called, only in Latin letters - favicon.
Save the favicon Great. Now we just need to create a smaller favicon. To do this, we click on the "Image" tab and select the "Image Size" function. Here we set the width and height to 16px. Now we just need to save this image for the web. We can call it "favicon-2".
So, here we have created 2 favicons for our site in the format "png". We created a 64px version first so that we can easily scale it down to 16px later. If you first create a variant with 16px, then you will not be able to increase it to 64px without losing quality. Therefore, keep this in mind so as not to do double work.
Installing a favicon on a website
To install a favicon on the site inside the tag we write:
If we have a favicon in the format " ico" then we instead of " png" prescribe " ico". For example:
As you can see, the site icon is displayed as we intended.
Converting the icon for the site to the "ico" format
Modern browsers can easily recognize and display favicons in the format "png". However, you may need to convert it to the format "ico". One of the advantages of this format is that favicons of all sizes can be stored in one file. Agree that it is very convenient. So, to convert our icons, we will use a cool service - xiconeditor.com. It is very easy to work with him. Everything happens in 4 steps:
1. First we need to upload our favicons. To do this, we click on the button "Import".
Loading favicons in the xiconeditor.com service 
3. If desired, you can click on the button "preview" and see how they will be displayed. To download our favicons in the format "ico" we click on the button "Export".
So, here we have learned how to create favicons in "png" and convert them to format "ico". I did not specifically consider the detailed processing of the image in Photoshop, as for many it will be overkill. If necessary, of course, you can further improve the quality of the favicon by working with pixels in Photoshop. I have tried to state all the essentials in a simplified form. And that's all for me. I hope this lesson was useful to you. If it is true:
- Share this article on social networks so that more people benefit from it;
- Subscribe to my newsletter so as not to miss useful and interesting blog posts.
On this I do not say goodbye to you. Thank you for your attention and see you in the next posts!