A universal way to create favicons. A universal way to create favicons Create a favicon online
Today, we’ll talk again about pictures for the blog, that is, about the project icon, called favicon. Let's discuss what a favicon is, how to make it and connect it to our site. And also, what size should this image be and why each of you should, simply must, install it. After all, even this icon can affect traffic to your blog.
What is a favicon?
The concept of favicon is quite simple and is formed from two words in Latin (in fact, like everything else on the Internet) - favorites icon. This in turn can be translated as icon or badge. The meaning may be like this; favorite icon or favorite. Why this name? It’s simple, favorites is just the name of bookmarks in the browser, so the name can be interpreted as a picture for a bookmark or browser tab. After all, you couldn’t help but notice that when you open a site or add it to your bookmarks, we see not only its name, but also its picture, which is called a favicon. I hope I was able to explain what kind of animal this is?
Why might you need a favicon?
Well, everything here is as simple as a steamed turnip; a favicon is necessary to individualize an Internet project. That is, another distinctive feature of your blog will be this image, which will not only make it more convenient to use your site in a browser, but also, with the right approach, will increase the number of visitors to your project.
Firstly, it can be convenient in a browser, why? For example, when I have a bunch of tabs open, I can navigate by the icon of the site that I need at the moment. That is, it’s convenient for people like me.
Secondly, this picture can attract more visitors to your resource from the Yandex search engine if it is catchy and stands out among others, but without fanaticism. Thanks to the fact that Yandex inserts a favicon on the first nine pages of the search results, your blog will be different from others. Exactly because of this reason It's worth thinking about connecting a favicon to your project. This is what the first search pages look like.
Make a favicon will not be difficult, because there are a huge number of generators on the network that can make a favicon from ordinary images and make it possible to draw it from scratch yourself. You can also make an image using Photoshop, and then use generators to convert it to the desired format.
The differences between regular images and icons are small, but they exist. The picture should be simple (complex graphic elements will be difficult to see), 16x16 pixels in size and must be in ico format. You can, of course, use png or gif formats, but such images will not be displayed in all browsers, so the best option is to use the ico format.
I don’t see the point in telling you every step of how to make this icon, because everyone can handle it. The main thing is to take into account the requirements for images and everything will work out. In short, download or draw an image and create a favicon using online generators. Online generators can be found by typing in Google or Yandex search - favicon. Or here is a link to a service with which you can draw from scratch or make a favicon from a finished image: http://favicon.ru/
How to connect a favicon for a website?
Okay, the icon is ready, now how do I get browsers to start show favicon for the site?
After using the service, download the ready-made icon for your blog to your computer. And upload the picture using an FTP client to the root folder of the blog (public_html/site/your_file_in_ico_format) or any other. But it’s best to go to the root folder, it’s just easier when compiling the path to the file.
So, the file is uploaded, what next? Now, you can check if you doubt that the file is uploaded to the root folder: your_site/favicon.ico. If the file is downloaded to the root folder, then it will be displayed at this address. Next you need to write for each page of the resource between the tags
And the following code:
And if the icon is in a different folder, then it should be like this:
This code is considered generally accepted for many Internet resources and will work on any engine. But you can write it differently for different engines. For example, for WordPress, this code would look like this:
/favicon.ico" />
Only, in this option, the icon must be in the folder with the template. For example (public_html/site/wp-content/themes/your-theme/favicon.ico).
After these steps favicon for the site will start working and you can see it in your browser tabs. But in the Yandex search results, the file will not be shown immediately; you must first wait until the Yandex robot indexes the icon and only after that it will begin to appear in the search results, and then only on condition that your blog is on one of the first nine pages of the search results.
That's all. If anything is not clear, ask and we’ll figure it out. See you again!
A new lesson in workshop style and this time we learn the secrets of the favicon. Favicon - a small icon that appears in bookmarks and the browser bar. If you have your own website and want to stand out from others even in small things - favicon necessary. Of course, it looks most advantageous among bookmarks, against the background of a faded list of addresses without any graphic identification. However, our lesson is not so much about how to attach a favicon to the browser bar, but about how to draw your own favicon in Photoshop.
In what format should I save the favicon?
It all depends on the browser. For Microsoft Explorer suitable icon format ICO. We have already encountered this format when we made the cursor. For other browsers from Google Chrome before Apple Safari regular will do GIF or PNG. Favicon may be translucent. To do this, you need to save it in translucent PNG, and then convert to the format ICO. This can be done in a good program IcoFX. However, there are a lot of third-party sites for generating favicons, and the most obvious of them is www.favicon.ru
How to place a favicon on a website?
How to be sure that favicon will it work? 4 conditions must be met.
- The file should be called - favicon.
- Favicon size 16 on 16px
- The optimal place for a favicon is the root folder of the site.
- Write the address of the icon in the meta tags heder in the site index.
In HTML expression it looks like this:
You can create several icons for different browsers, for example one in the format ICO, and the other in PNG and indicate all this through the tag link . Modern browsers most often search for a file in the root of the site called favicon, however, to be sure, it doesn’t hurt to indicate the exact links.
Create a favicon in Photoshop
Create favicon very simple. Do you want to make one like this? favicon like VKontakte or Odnoklassniki? Good favicon can’t be done by reducing large images in all sorts of favicon “generators”, which are full of them on the Internet. The favicon is very small. In fact we are kind of pixel art, which has its own characteristics. You can't write a letter and just reduce it to 16px .
Like favicon will be blurry and indistinct, since the edges of the letter will overlap by several pixels when resizing. It will turn out kind of anti-alias, which is usually good, but in the case of pixel art such transitions are just not needed. On the other hand, you should avoid excessive “tattering” on the roundness, otherwise you’ll end up with hello 1999 gifs.
Create a file of size 16 X 16px . We'll create a very simple translucent favicon s in the form of a letter, with a bit of depth. Depth will be created through shadow and gradient.
Drawing the background
Why in the intro of this lesson do you see a huge smooth and licked favicon? Because I enlarged it for the intro for the lesson. How did I manage to enlarge the image qualitatively? 16px? Very simply, I always work in vector if it is possible to use it and if it makes sense. And the vector easily endures any transformation and does not lose quality.
Select a tool Rounded Rectangle Tool. In the settings panel, select mode, which will allow you to draw in vector. In the drop-down menu of the panel there is a check mark - Snap To Pixels. This is necessary so that vector paths are snapped to pixels and do not draw “between” them.
We have a surface favicon, and translucent edges will create a smooth roundness. Now it's time to get rid of the white background, it's not needed. Turn off its visibility. Or double-click on the layer, turning it into a regular layer, and then delete it.
Today I want introduce you to services for creating a favicon for your website. Favicon is an abbreviation of the English words favorite and icon. This is a 16 by 16 pixel image called a favicon with an ico extension. It is placed in the root folder of your website on your hosting. When the site loads, the browser automatically looks for this file, then adds it to the address bar before the page URL and to bookmarks, assigning it to your site. A website icon has no practical use and only serves to recognize it.
Nowadays, 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 favorites, which will allow it to stand out from the mass of similar sites. You can choose an icon according to the topic of your resource and, even before starting to study it, the visitor will be able to immediately understand what it is about. This will have a good effect on site recognition and the formation of it as a brand.
By default, a website displays the icon provided for it in the current browser. Also, most versions of modern browsers support personal website favicons. And in the Yandex search engine, which now dominates along with Google in the Russian-speaking space, when you make a search query, ranked sites appear along with their icon. Therefore, without delaying it for later, it is imperative to pay close attention to its creation.
There are many resources on the Internet that store ready-made icons. There are a great many of them, but now we are interested in creating a favicon.
Need to create a favicon for your website? Let's consider services for creating favicons online
The most popular service for creating website icons. It is quite simple to work with and even a novice user can handle it. We upload the image that we want to see as a site icon. He processes it. We look at the resulting image and if it suits us, then click Download. A file with the name . You can draw it yourself pixel by pixel and if you like it, you can also save it as an icon. It is important that a simple drawing is used to create a favicon. If there is a lot of multi-colored things, you will end up with a nondescript spot.
The next service, which is just as easy to use, is . The work in it is approximately similar to the previous analogue. The only thing is that it is in English and there are more advertisements. But in general, the generation actions are quite similar. Upload an image, view, edit and save.
Now almost every resource that provides website promotion services or collecting analytics on them has an additional option for creating favicons. For example, well-known services that also have this additional option:
But I like services that are designed specifically for creation. Here, look, another nice online tool for generating icons of various sizes and formats. Modest and tasteful. Uploaded our file. Selected size. Preview and save to your computer.
Of course, you could use everyone’s favorite Photoshop to create the icon. But it does not save images with the ico extension. Or rather, it saves, but for this you need to unpack a special plugin - icoformat.8bi and install it in the Plug-Ins\File Formats folder in the Photoshop folder. This will allow you to save files with our desired extension. For me, this is quite troublesome.
I suggest this option. In Photoshop, we create an image 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 one we need from these images.
You can also use online converters of graphic images from one format to another. For example here or . Using them you can change any graphic file extension to ico.
How can you make an icon become a favicon for the site?
The following steps are required:
1 Make sure the file is called .
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 in html code.
3 To do this, take our theme file header.php (you can edit it in the admin panel directly in WordPress, or you can download it from the server), open it and add it before the closing tag the following code:
/favicon.ico"/>
/favicon.ico"/> |
4 Save the file and transfer it back to the hosting.
5 Clear the cache of the current browser and that’s it. We got the desired result.
By the way, it is not necessary for the favicon to be located in the root. The href attribute directly specifies the path to it. It turns out like this:
|
It is also not necessary for the icon to have the 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 the 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, but in the WordPress admin panel, the standard favicon remained by default. For it to change 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.
That's basically all there is to it. Today we discussed why you need to create a favicon for a website and looked at online services for creating a favicon for a website and the intricacies of its installation. Don't forget to subscribe to blog updates. See you soon!
Watch the video on how to create favicon.ico and host it:
This lesson covers the creation of a Favicon, you will learn why this icon is needed, and you will receive recommendations for improving its appearance and attractiveness.
In addition, we will look at the process of creating and adding a Favicon for a site.
Favicon- this is a small icon that you can see in the address bar of your browser and on the tabs of open pages, and when you add a site to your browser bookmarks, this icon is also added there.
In addition, the Yandex search engine displays a Favicon icon in the search results next to your site. Your task is to make this icon stand out, be remembered, catch the eye against the background of other icons in the search results, and also have some associations with your site. A beautifully designed and eye-catching Favicon can significantly increase the number of visits to your site compared to those that do not have it installed or have an unattractive appearance.
Here are some guidelines to consider when creating a Favicon.
#1. The icon should be easily recognizable and have associations with your site or the niche your site belongs to. As an icon, you can use a logo or symbol that evokes an association with your site. In addition, you can use the color scheme in which your website or logo was created.
#2.
Don't use standard icons. Many people, after creating a website on one or another CMS, leave the icon without changing anything. As a result, the search engine results may contain not one site with such an icon, but many. This will not make your site stand out, so use only unique Favicons created specifically for your site. This also includes the situation when icons from various collections or interface elements of other sites are used. Remember, to stand out you need a unique Favicon.
#3.
Now let's look directly at the process of creating a Favicon. There are many services for this. However, they are more suitable for those who already have a ready-made icon that they ripped off somewhere or took from some collection. But as I said above, the icon must be unique, so here I will look at the process of creating it using Photoshop, using the example of a website.
Creating a Preset Favicon in Photoshop
#1. Create a new document in Photoshop measuring 64*64px, to do this, go to the "File" >> "New..." menu or press the keyboard shortcut Ctrl+N. In general, the icon itself should be 16*16px, but it is better to first create it the same size, and then reduce it to the required size.
#2.
In my case, I don’t have any logo for the site, so I decided to use the “W” symbol with which the site address begins, as well as the colors that predominate at the top of the site: blue and yellow. So I set the color to #6A91D0 and used the Bucket Tool (G) to give the previously created document a blue color.
#3. After that, I selected the Type Tool (T), added a "W" symbol and gave it the following color value #FAC31D. To make the symbol stand out more against the blue background, I added a black stroke of 2px to it. To do this you need to go to the menu item
"Layer" >> "Layer Style" >> "Stroke" , select the color and size of the stroke. After this you need to merge the layers, to do this you need to go to the menu item
"Layer" >> "Merge Visible" or press the key combination Shift + Ctrl + E. To make the lines smooth without serifs, I added a blur. To do this you need to go to the menu item
"Filter" >> "Blur" >> "Gaussian Blur..."
and set the radius to 0.3 pixels. Place your symbol or image so that it takes up maximum space, because if it is small, then with an icon size of 16*16 it will not be noticeable.#4. Now you need to change the icon size. To do this you need to go to the menu
"Image" >> "Image Size"
and set the size to 16*16px.
After that, we convert it to .ico format using the . Go to this service and use the “Browse” button to select a previously saved file in PNG format and then click on the “Create favicon.ico” button.
After this, the link “Download favicon.ico!” will appear on the loading page.
by clicking on which you can save the finished Favicon icon to your computer. Now it's time to add a Favicon to your site so that it appears on all of its pages. To do this, place the icon in the root folder of your site. If your site is already hosted, this folder is usually called "public_html". Then, on every page of your site, before the closing tag
add the following lines:
But these lines must be added to each page if you have an HTML site. But since, most likely, your site is created on the basis of some kind of CMS, then you will only need to add these lines to the main file of your theme that you use for the site.
If you are using WordPress, then go to the wp-content/themes/folder-with-your-theme/ folder, find and open the header.php file, then paste the necessary lines and save the file.
If you are using Joomla, then go to the templates/your-theme-folder/ and open the index.php file, paste the necessary lines and save.
Some WordPress and Joomla themes may already have their own paths to the favicon.ico file, in which case delete them and replace them with your own.
If you use any other CMS, then do everything by analogy.
On the page tabs and in the address bar of the browser, your icon will be displayed immediately, as for the Yandex search results, here you need time to pass and a special Yandex search robot to find your icon, after which it will appear in the search results.
Material prepared by the project:
Greetings, dear visitors of my blog. Today I have prepared for you a selection of 10 services that will help you make a favicon online. And also at the end of the article I highlighted the 5 most convenient sites, in my opinion.
This little picture is first and foremost your brand. People will recognize your site by it. Therefore, it must be original and memorable so that it is immediately visible in Yandex searches. It is difficult to draw such a small icon on your own, and online services come to the rescue that will help you make a favicon from a picture. Let's look at some of them in order and identify their strengths and weaknesses.
- Convenient to use.
- It is possible to make a favicon from a picture or draw it yourself.
- You can order from professionals.
- Preview of the resulting result.
- I think there are none, everything you need is available on the site, I can only highlight that there is no gallery of ready-made icons.
-
- You can create one from a picture or draw it yourself.
- After generation, an example of a link to add to the site is shown.
- Everything is in English.
- Ugly design.
- It is impossible to crop an image when creating it.
3 www.Chami.com
-
- Beautiful user-friendly interface.
- It is possible to make a favicon from a picture or draw it yourself.
- Large palette of colors for drawing.
- No preview.
- Everything is in English.
- There is no gallery of ready-made icons.
-
- User-friendly interface.
- Nothing extra.
- There is no gallery of ready-made icons.
- Impossible to draw by yourself.
- You cannot crop the image during generation.
-
- Convenient beautiful interface.
- Nothing extra.
- It is possible to draw it yourself or generate it from a picture.
- There is a gallery of ready-made icons.
- You can keep the size of the icon when creating it or compress it.
- Preview.
- You can make an animated icon.
- A huge number of colors to paint.
- Everything is in English.
-
- There is a choice of icon sizes 16×16 and 32×32.
- There are no additional functions, only creating a favicon from an image.
- No preview.
-
- Preview.
- Large collection of ready-made icons.
- It is possible to crop the image.
- Everything is in English.
- There are errors on the site.
- Inconvenient interface.
-
- You can choose the icon size from 16×16, 32×32, 48×48 and 64×64.
- Everything is in English.
-
- Nothing extra.
- It is possible to select the icon size.
- You can draw it yourself or make a favicon online from a picture.
- There is no option to crop the image.
- No preview.
I only introduced you to 10 online services, although there are many more. In my opinion, these are the most popular among all. If you use any others, write them in the comments, I and other readers will be interested to know about them.
And now, as promised, the TOP 5 convenient and high-quality services, in my opinion.
These are my top five. I want to know which service you will put first and which service last? I will be glad to hear answers in the comments.
P.S. If you haven’t come up with a favicon for yourself yet, be sure to check out the website Faviconka.ru. On it you will find more than 2,000 ready-made icons for every taste. I hope the article was useful to you and you found your service to make a favicon online.