Favicon creation service. A universal way to create favicons. Benefits of using a favicon
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 don’t yet know what it is and why this file is needed, then I recommend reading the articles I’ve already written on this topic:
In general, every website should have this little image.
How to create favicon.ico for a website
So, now I’ll try to tell you where, what and how to make a favicon. But first you need to know what size should a favicon for a site be?
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 for display in browsers, for example, on an iPhone or iPad. If you want your website 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 it even simpler and take a ready-made picture or photograph and simply convert it to the required format and size. Since such an icon is very small, small details of the image will be difficult to see. 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 business card of your web resource.
If you are not a big Photoshop expert, then it doesn’t matter, there are many free generator services on the Internet for creating a favicon for a website. 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 short review of such online generators.
Services online favicon generator - creating an online favicon
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 yet have a logo, the Logaster service will be a great solution for you. With its help, you can create a logo, and then, based on this logo, the generator will create many 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
To begin with, there are several 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 is perhaps the most minimalist service. Nothing extra - select an image, click the “Generate Favicon! ” and downloaded 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 need to click on the “Download FavIcon” button below them.
www.cy-pr.com/tools/favicon and www.favicon.co.uk are services similar to the previous one. In the first, you can make the favicon size 16x16 and 32x32, and in the second, additionally 48x48 and 64x64.
www.genfavicon.com - the entire process of creating an icon includes three steps:
- Select a file (JPEG, GIF, PNG) on your computer or simply enter the URL of the image and click “ Upload image“;
- Select the size (16×16, 32×32, 48×48, 64×64 or 128×128) and the required area of the image if you want to generate only part of the image by clicking “ Capture and Image“;
- We look at the result and, if everything is satisfactory, download the file.
Creating an animated favicon for a website using online generators
Now let's look at several services where you can make animated favicons, as well as add text in Latin, which will scroll along with the icon in the form of a ticker. 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 - 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 because it allows you to create the favicon.ico file yourself, but not as a picture, but as text on a colored background. All you need to do is enter the appropriate letters and select 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 a public gallery, where other site users 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 favicon creation from specialists for $20. I wonder if anyone places orders there?
www.favicon.cc is another popular generator, similar to the previous one. An interesting feature of this service is that you can make frame-by-frame animation lasting up to 20 seconds.
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 a transparent icon background.
Perhaps that’s enough for today, although this is far from all online services. But even these are quite enough to create a beautiful favicon for your website or blog and be noticeable in 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 will dwell in more detail 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!
Favicons are a very small, but by no means the very last part of each site. They appeared with the birth of the Internet and remain in demand to this day. There are several ways to create them. You can use plugins for programs, or you can use special web utilities. Let's talk about them.
X-Icon-Editor
Unlike the previous tool, favicon.cc contains fewer drawing tools. Here you can only draw individual pixels with a specific color and transparency. This tool also allows you to import images, edit them as needed, and export them as favicons.
Thanks to a special panel, while drawing a favion you will immediately see how it looks within the Internet Explorer browser.
Antifavicon
The standard favicon size (16x16) is, of course, too small for text. However, Antifavicon allows you to fit two lines of text into that small space. The font used is certainly not that great, but what can you do :).
The given framework, of course, constrains. However, after looking at some examples, you can come up with something quite interesting.
Faviconist
The last service we'll look at is Genfavicon. Here you can upload an image, convert it into an icon, and immediately see how it will look in the browser. After that, you can download an icon of a given size.
All the services we discussed today have their pros and cons. However, among them there are those that can provide something more than their competitors. So bookmark these sites. They will definitely be useful to you.
A very important element of blog design is the favicon - a small image (16x16 pixels). Small size – but huge effect! This article is devoted to how to create a favicon (favicon.ico) for an online website using special services. You will learn more about what this favicon icon is, what it is used for, what functions it has, how to add it to your blog and create it online. You will also find out where download a collection of ready-made favicon ico for the site.
In general, the post is very informative and interesting, I strongly advise those who do not yet have a favicon to read it.
First, let's take a closer look at what a Favicon is and what it is used for.
Favicon is an abbreviation of two words (English FAVorites ICON), which translates as an icon (a very small image) for “Favorites”. Favorites– this is what bookmarks are called in the Internet Explorer browser. The favicon looks something like this:
Making a favicon for a website has become very easy, so this mini one has gained wide popularity. In addition, you can download a ready-made favicon ico icon for the site, which you just need to add. Having chosen the right one from the gallery, you can decorate your website with it and admire it in the browser (here’s what this mini-image looks like in Chrome):
So, a favicon is a small image 16x16 px in size, with a .ico extension (icon extension). Because The icon has gained wide popularity; almost every site has it, and this is another reason to create a favicon for an online site. It doesn’t matter what kind of hosting you use, what engine your blog runs on - in any case, you can create online and then install a favicon or download a ready-made favicon for the site. Thanks to modern icon generators, their creation does not take much time - one or two minutes, and everything is ready.
Still don't have a favicon? Get better soon!
What is this mini-image used for? Firstly, a favicon for a website is like a logo for a trading company, this is a way to stand out from the crowd. Visitors will recognize your site by looking at the favicon image. Secondly, Yandex also uses favicon images and displays them next to the search results, which allows sites with favicons to look better compared to others. This means that users will go to your site more often, because the icon will “lure” them. In other words, this mini-image will help you. Here's what it looks like:
Well, now you want to know how to make a favicon? Read on and you can choose a favicon for your website from numerous collections.
By the way, the Yandex search engine even has a special robot that indexes these icons and loads them into the search engine’s database. After you create a favicon and install it on the site, after some time (usually no more than a month) Yandex will index it and begin to show it in the search results. You can check at any time whether your mini-logo is already in the search engine database. You can do this in one of 3 ways:
- Type your site into the Yandex search box and you will see if there is a favicon next to it.
- Enter the link http://favicon.yandex.net/favicon/ in your browser site.ru, where replace site.ru with the address of your site. If the fava is indexed, you will be able to see it.
- Go to the Yandex.Webmaster panel, the favicon is also reflected there.
Now let's find out where you can download a favicon for the site.
2. Online favicon generators and collections
Now we know what a favicon is and why the site needs it. Remember that its size in pixels must be strictly equal to 16 by 16, and the extension must be only .ico. Now let's find out how to make such a mini-logo:
- Download a ready-made fava from the gallery.
- Create your own using the favicon generator.
- Create from a ready-made image (again using a favicon generator)
2.1 Collections and galleries favicon
- http://www.thefavicongallery.com/ - although a small collection, it is useful. Here you will find icons on a variety of topics. There are about 300 of them in total. In order to download your favorite favicon ico for the site, right-click on it and save to your computer.
- http://www.iconj.com/favicon-gallery-page1.html - another favicon collection for the site, which contains more than 3 thousand mini-pictures. You can save your favorite one in two formats (ico or gif). But there is a drawback: you can only view 30 icons at a time; to see the next ones, you need to go to a new page.
- http://www.favicon.cc/?action=icon_list&order_by_rating=1 – thanks to this gallery, you don’t have to create a favicon online yourself. Just select and download the picture you like. Again, you can view 20 favicons at a time, which slows down the selection process.
- http://www.favicon.co.uk/gallery.php - this site allows you not only to create a favicon for the site, but also to download ready-made options. You can view 144 icons at a time, which is much more convenient than in the two previous options. Favas on a variety of topics.
- http://favicon-generator.org/gallery/ - although small, but useful collection of 84 favicons. Choose any!
2.2 How to make a Favicon for a website from scratch
Of course, you can download ready-made fava for your website, but it’s much better to make your own. In this matter, we will be helped by the so-called Favicon Generators, which allow you to create beautiful mini-pictures online.
2.2.1 Logaster.ru
Our list starts with an online favicon generator
The main advantage of the service is that you don’t have to draw a favicon or convert it from a logo at all.
All you need to do is enter the name of the site or company and select a topic.
After this, the service will create ready-made favicon designs. Select the desired icon, font, color.
This is very convenient for those who do not know how to draw or work with graphics programs.
You can download favicon files in ICO or PNG formats.
You can read more about how to create a favicon using Logaster
In addition to the favicon, the service also creates logos, business cards, envelopes and letterheads.
2.2.2 Favicon.cc – favicon generator
This simple generator is one of the simplest and most popular used for online favicon creation for a website. You will be able to draw every pixel of the future fava (there are 256 in total). By going to the site, you will have access to a working window in which you can experiment.
The blue color in the screenshot above shows the work area - here you will directly create a favicon for the site. Just below you can see what a fava looks like in its original scale (highlighted in black).
Working with this generator is so simple that you are unlikely to have any questions about how to make a favicon ico for a website. Basically, on this site you can create entire favicon collections online and then, for example, sell them.
Each square in the work area is a pixel. You must paint it with the desired color. You can select a color in the palette located to the right of the work area. You can paint a pixel by pressing the left key, and erase the painted color by pressing the right key.
The image can be moved and moved around the work area, for which use the item move.
To download the resulting favicon that you made for the site, click on the Download Favicon link (highlighted in red).
2.2.3. Generator Amichurin.Appspot.com
Another Generator of beautiful favicons, in which you can create a beautiful picture online. The entire generator is in Russian, but its functionality will be simpler than in the previous case. By the way, the signatures made in burgundy are not mine.
Alas, I did not find any ready-made favicon collections on this site that could be downloaded for the site, so use it only as a generator.
2.2.4 Favicon-Generator.org Generator
A very good favicon generator. Very similar to the second option, but slightly inferior to it. In general, as you have already noticed, the principle of operation on all these sites is the same. Therefore, there should be no problems with them. Choose and work with the one you like best.
2.3 Favicon from a finished image
If you don’t want to create a favicon using online generators from scratch, and galleries and favicon ico collections for the site are not suitable for you, then try making a mini-image from a ready-made image. You can even use your photo. Such pictures are also created online using special favicon generators.
Prepare in advance the picture that you want to use as a basis.
2.3.1 Service Favicon.ru
One of the most popular services that helps you create a favicon for a website (by the way, a Russian-language website). Simple and easy to use, it helps you make a mini logo from a ready-made image.
You can add a picture or photo (base) like this:
- Click on the button select file» and upload the desired photo.
- Enter the URL of the image in the white field (do this if the file is stored not on your computer, but on the Internet).
After the image is added, click " Createfavicon.ico!" and wait a little, the generator will generate an icon. After that, download the image to your computer. By the way, in addition to the generator, this site also has a large collection of favicon ico for your site.
2.3.2 Favicon.cc service
A similar generator, but with more powerful functionality. To create a fav from a finished image, first go to the “Import Image” tab.
Now click on “Select File” and add the file you are downloading. Based on it, a favicon ico will be created for your site. By the way, you may need the image stretching function:
- Keep dimensions – if the aspect ratio is reduced, the pictures will remain the same
- Shrink to square icon – the sides of the image will be squared (the image may be distorted).
After downloading the file, you can edit it online using this favicon generator. When you are satisfied with the result, download the fava to your computer.
3. How to add a favicon to a WordPress blog
We’ve figured out where to download a ready-made favicon for a website or how to make your own. Now let's discuss how to add a fava to a WordPress blog.
As a rule, the favicon is located at the root of the site (in the root folder) - this is what we will focus on. If your fava is not in the root, just move it there.
Adding favicon.ico in two steps.
STEP ONE
First of all, you need to find in your theme the line of code that is responsible for displaying the favicon. Open the Header file (header.php) for editing and find this (or similar) line:
If there is nothing similar at all that contains the word favicon.ico, then just add these two lines somewhere between the tags
And.STEP TWO
Now you need to add the favicon itself to your hosting, exactly in the root folder of the site (otherwise, it will not be displayed). Go to your hosting and upload the fava to the root of the site (the file name is required favicon.ico, sizes are required 16x16 pixels).
That's all, soon the favicon will be indexed by search engines and it will show off in the Yandex search results. And your site will have its own favicon.
At the end I provide a video tutorial on how to create a favicon for a website.
Favicon - the term literally translates as "favorite icon" - is considered one of the most complex elements of modern web design. This is a small image that is located in the browser tab, in the search bar and other places, and plays an important role in the personalization of the site.
Due to its non-standard format and small size, creating a favicon can be challenging, both from a technical and design point of view.
An equally difficult task is ensuring favicon compatibility with different browsers.
In this article you will learn how to make a favicon - we will give design tips and tell you about services for creating a favicon, and how to add a favicon to the site.
What is a favicon and why is it needed?
Despite the fact that a favicon is a very small graphic object, it is extremely important in website design and in general.
Click to enlarge the picture.
Firstly, A favicon makes your site more personalized and consistent with other graphic elements, such as a logo.
Secondly , a favicon distinguishes your site from other web resources in the search results list. A site without this mini-icon will look dull and lose to competitors. In a word, a favicon is simply a “must have” for websites.
Thirdly , a favicon allows the user to quickly find your site in the directory of bookmarks or other icons on the desktop.
Creating a favicon design
The favicon should reflect the essence and brand in a tiny sign the size of a smiley face. A simplified version of the company logo would be a good solution, but keep in mind: a full-fledged logo with text and trademarks is not suitable for this purpose.
These websites use a graphic of their brand (or at least something similar to it).
Don't use text
You should avoid using text, because due to the small size of the favicon, the inscriptions will be unreadable. Place 1, maximum 2 letters on the icon - for example, the first ones in the name of your company or web resource; in this case they can still be distinguished.
Favicon pixelation
Favicons are so small that every pixel matters. Often, when you make a full-size logo smaller, the image appears blurry.
This is a fragment of the full-size Facebook logo after it was reduced to 32x32 size. It is easy to notice that the image “floats” around the edges. To avoid such a defect, editing should be done at the pixel level.
When working with icons, I prefer to use raster image editing programs (such as Photoshop or Pixelmator). First, I scale down the full-size logo to 64x64 pixels because that's the largest favicon I'll need. The work is very painstaking, it can take a whole hour, or even two, but the result is simply excellent.
If you do not have the time and skills for such operations, it is better to use online services such as Logotizer.ru
Favicon size
Having received a 64x64 icon, I create icons of 32x32, 24x24 and 16x16 pixels in the same way. Each of them has its own purpose:
– 64×64 – “Reading List” in Safari and Windows
– 24×24 – Pinned sites in IE9.
– 32×32 – For high resolution screens.
– 16x16 – Typically used in browsers such as IE, Safari, Chrome, etc.
But creating smaller favicons doesn't stop there: additional editing is often required at the pixel level. You can also add an alpha channel if you see fit. If previously this caused difficulties, now almost all browsers support transparency in favicons.
Favicon formats
Previously, when only Windows ICO files were supported, we could save time by saving the 16x16 favicon as a GIF and giving it the .ico extension. This technique worked flawlessly! But now this method is not necessary as tools for creating ICO files can be easily found on the Internet. Moreover, and are now used for favicons, but the most common are still only the following two.
ICO
The palm belongs to the ICO format. Unlike PNG files, ICO files can come in different resolutions and bit depths (which is great for Windows). Internet Explorer uses favicons of various sizes (for example, 32-pixel Windows 7 taskbar icons), and therefore the ICO format is the only option in this case.
PNG files are very convenient because you don't need any special tools to create them. This format supports an alpha channel and allows you to create very small files. Perhaps the only drawback of the PNG format is that it is not supported in the Internet Explorer browser.
There are other options:
– GIF and animated GIF formats have no advantages other than compatibility with very old browsers.
– JPG format is not recommended, even if the image is in the form of a photograph. This format lacks the sharpness of PNG, and its only advantage is smoother transitions between colors - a nuance that is completely unnoticeable in a very small image.
– SVG could be a great option if more browsers supported favicons in this format. For now, there is only compatibility with Opera.
– There is also a so-called “sub-format” of PNG – APNG (animated PNG), which is supported in Firefox and Opera. However, the feasibility of its use remains questionable. An animated favicon can be distracting and even annoying to the user.
Create an online favicon – tools and online services
We have selected for you the most useful services that will help you create an online favicon.
Logotizer
Logotizer is a new, simple and convenient service for creating a favicon and logo for your website.
With this online maker you can create a favicon from scratch. The service is aimed at beginners, so developing a good design will not be difficult.
How to create a favicon using the Logotizer online generator
The main work area is on the left. On the right you can see how the favicon will look on different media - a browser tab, a computer taskbar, or a smartphone screen. Very convenient and clear.
First, you should choose a shape for the favicon. There are a lot of them, more than 50. We advise you to choose simple and uncomplicated forms to make the favicon easy to perceive and remember.
At this stage, you also determine the color of the form, which goes as the background of the favicon, and select a frame. Look at what color dominates your logo (if you have one) and what colors are the main ones on your website. It is within this range that we recommend creating a favicon design.
Below the “Shape” block there is a collection of shapes (symbols). There are not many of them, it’s a pity that you can’t upload your own options; but the choice is still quite interesting.
Change the color, size, location of the figures! In a word, experiment, fortunately, the service allows you to do this.
Once the shape is selected, you can add your own text. As I wrote earlier, it is better to use 1 or 2 letters, no more.
There is an extensive selection of fonts. This is definitely a plus. As with shapes, you can change the color, size, and placement of text.
If you decide that some favicon layer is temporarily bothering you or is not needed at all, you can simply hide it.
After creating a favicon, the service will offer to save it. Register an account (in 2017 there is no way without registration), and after that you can download files for a small payment - 199 rubles.
The site also contains small instructions on how to add a favicon to the site, so you should not have any problems adding a favicon to the site. Similar recommendations are also provided below in this article.
After payment, the user immediately receives 10 favicons of different sizes for all devices needed today (Apple touch icon, Microsoft Application Icons and others).
The favicon.ico file itself is multi-sized and contains icons of 4 sizes in 1 file (16px, 24px, 32px, 64px). Accordingly, if you add a site to your browser bookmarks or open your history, you will be able to see icons of different sizes, but they will be displayed clearly and without blur.
Overall the service is good. Simple, convenient, nothing superfluous.
RealFaviconGenerator.net
is a simpler favicon generator that allows you to create favicons for any platform. Moreover, you can test the favicon on the resource. Enter your site's URL and you'll see how your favicon looks in every browser and operating system. Real Favicon Generator will also tell you how to fix the flaws and make your favicon even better.
Favicon.by
Favicon.by is another free and easy-to-use favicon generator that converts PNG, JPG and GIF files to .ico format. Upload an image from your computer, select a size (16x16px or 32x32px) and click on the “Create” button. To save the resulting favicon on your website, follow the instructions.
The service also makes it possible to draw a logo pixel by pixel, but, to be honest, not everyone can do this. For example, I couldn’t. That's how crooked I am :)
How to add a favicon to a website
You can add a favicon to your site by making a few changes to the HTML code of the site page.
Step 1: Upload the “favicon.ico” file to your hosting server.
To do this, go to your FTP server using this link:
ftp:// [email protected]
Enter your username and password. These can be obtained from your hosting company's admin panel.
Upload favicon files to the root directory. The root directory is usually called “public_html” or “www”.
Step 2: Add a favicon to the HTML.
Keeping the FTP server window open, download the “index.html” or “header.php” file.
Then you need to download the code. The code you download depends on your website.
If your site is HTML, find the HEAD area in the index.html file and paste the following code:
If your site is on WordPress, find the HEAD area in the header.php file and paste the following code:
/favicon.ico” />
Using these codes, browsers will be able to find your favicons.
So, you've installed your favicon!
How to Add a Favicon on WordPress and Other Platforms
If your resource is based on WordPress or another CMS, then adding a favicon to the site is very simple. In general, the algorithm for adding a favicon for different platforms will be the same.
1. You need to go to the site console.
2. Find the “Design” or “Appearance” section.
3. Go to the “Theme Settings” section and find “Favicon” there.
4. Upload the favicon from your computer.
5. Save and refresh the page.
How to Create More Complex Favicons
This article discusses simple and quick ways to create favicons that are compatible with almost any browser and operating system. But when it comes to web design and development, the sky is the limit. If you want to learn how to make more complex favicons, touch icons for iOS home screens, icons for the Metro interface in Windows, icons for Google TV and much more, I recommend you check out these materials: favicon cheat sheet. It contains complete information on the topic and provides good sources. This is a great option for those designers and developers (myself included) who are constantly looking to expand their knowledge.
With Favico.js you can create dynamic favicons with numbers.
You may also need a dynamic favicon, which has an icon with a changing number. To create such favicons, I recommend using the service favico.js, available on Github. Dynamic favicons are not yet compatible with all browsers. But for those browsers that support them, these icons can be an interesting and useful addition.
If you would like to add another tip to this article or have a question, please leave a comment below!
How to create a favicon for a website - tips and services updated: February 7, 2018 by: admin
Good day, friends!
I thought for a long time about what to write the next article about and a very simple topic came to mind in technical terms, but no less important than all the others.
In this article, I will tell you everything I know about Favicon and show you the process of creating an icon that will appear in your browser tab when you are on your site. I will also show you how to install a Favicon on your website.
I'll tell you everything I know about this icon. What does it affect, how best to create it, and so on.
Before starting to discuss these issues, I would like to clarify the issue: "What is a Favicon anyway and where can you see it?".
Everything couldn't be simpler. Favicon is an icon that is displayed when you are on a website. It is also displayed in the Yandex search engine, which is very good. We will look further into why this is so.
This is what my icon looks like in a browser tab.
And here is how the same icon is displayed in the Yandex search engine results.
When you know what kind of animal this is, you can begin to consider all the issues in today’s material.
To be honest, the process of installing an icon on a website is very simple, but I couldn’t resist telling you everything that’s possible. I hope this information will be very useful to you.
Why do you need a Favicon?
I will try to explain everything in the form of a checklist. By the way, I have prepared a simple infographic on this subject.
- Promotion and brand awareness.
It is no secret that the task of any website is to promote its brand (name) to some extent. If we take into account a personal blog, then this moment is almost the most important, since we form ourselves as an individual and convey our opinion to certain masses.
The display of the favicon in the Yandex search results is responsible for brand promotion. The more your favicon is seen, the more it will be clicked on, as this shows that your information is valuable and is likely to be in demand.
Brand recognition is a similar process, which will at the same time contribute to its promotion, as well as the promotion of the blog itself, since the more famous your favicon is, the better people will come to your site from search results than to others.
These 2 factors from the first point are interconnected. Without one there will be no second.
- An increase in the number of clicks from search results, and, accordingly, an increase in traffic.
How is Favicon related to the number of clicks to your site? The fact is that a very important point in the preliminary assessment of your site by a visitor is the analysis of the appearance of your snippet in the search engine results. Only by using fivicon you already increase one of the most important ones - CTR (click-through rate) in the search results.
You can be different as you like - make a catchy title and description. Make an extended description in the search results and so on. But all this matters less if you have absolutely no favicon or it is of poor quality.
Here again the first factor influencing brand promotion plays a role. The cooler your icon, the more clicks to the site and the more successfully the brand is promoted.
- Increase website conversion.
Every site should have its own conversion rate, regardless of its type. Blog, online store, one-page site, subscription page, content site - it doesn’t matter. Each resource has its own task, the effectiveness of which is measured by conversion.
Every little detail matters in conversion. Even the placement of words and their length. Favicon is no exception. The better it is and the better it describes the type of activity of a site or company, the greater the percentage it contributes to the overall conversion.
For subscription pages and selling sites, this factor is very important. As a rule, such sites are advertised directly and visitors who visit them, in most cases, do not know the author. The eyes of such visitors often immediately go to look at the favicon.
I would highlight these 3 reasons as the main ones. Maybe you can add something else in the comments. It will be interesting to know more.
Well, now it’s time to begin the process of creating and installing this icon. Let's start with creation.
How to Create a Favicon
Now we will talk about creating a favicon from the point of view of 2 points:
- Creation of the design and layout itself;
- Creating the icon itself.
I will show you the process of creating an icon a little lower, but I wouldn’t like to talk much about drawing an icon on my own, since a favicon is perhaps one of the most difficult design elements to make. Why, you ask?
Yes, because it affects conversion and is displayed not only in the tab, but also on the site page. This is the first tip when creating a favicon. The icon should contain your logo, which will be absolutely everywhere. And this is a very responsible process, because you can do worse by using a low-quality logo, and, accordingly, a favicon.
Therefore, if you do not have good imagination and good Photoshop skills, at least, then in this case there are 2 options:
- Take a lot of steam and do it yourself;
- Contact the professionals.
A person with experience in creating designs can easily make it for you, but not for free. But the quality will please everyone and everything. Therefore, I recommend option 2.
If you are still a self-taught person, then here are some tips to keep in mind when creating an icon:
- Don’t copy anyone - it will only be worse for you, but your competitor will have a plus, since you will promote him to some extent;
- The icon should be simple so that the tab clearly understands what is drawn there. Therefore, the fewer elements it contains, the better. Many people make it from their own photograph, which is absolutely invisible at this size. Don't repeat this mistake;
- The favicon should give an idea of your area of activity or brand your name. If the field is activity, then try to come up with something interesting. For example, if the site is about making money, then it is logical to make an icon in the video of some coins or bills. But such smart guys are already a dime a dozen, so you need to beat everything in your own way. That’s why I wrote above that you need imagination and the ability to recreate it in design. If this is a personal blog, then a very common option is to use the first letter of your first or last name. I did just that. This is the easiest way.
Now we can move on to the process of creating the icon itself from a technical point of view.
Creating an icon
Since Favicon is an icon, it should have a corresponding extension - ico. To make such an extension, we will use the service. You can, of course, do this with some programs, but I encountered a problem that such icons are not displayed correctly in the output. Everything is ok with the service.
We also need a small image (32x32 or 16x16 pixels) with our icon. This is the size in which the favicon is displayed. In the browser tab it has a size of 16x16 pixels.
We will assume that you created the image. You can move on. Let's go to the service ( Click here) and find ourselves on a page where we can select our image file of any of the 2 sizes above.
When we have selected an icon, we can click on the “Create icon” button, after which the service will automatically convert our image into an icon of the required format (ico) and give it a size of 16x16 pixels.
A preview of the final icon will appear below this button, meaning you can see how it will appear in the tab when it is posted on the site. There will also be a button to download the icon to your computer.
After downloading the icon, it will be in the location where the file is saved with the required extension and format. You can verify this.
Installing Favicon on the site
Do not under any circumstances try to connect the favicon to the site using some kind of plugin. This is a completely useless procedure, since everything can be done by hand. The information below will help you with this.
The installation process consists of 2 stages:
By the way, I will show everything using the example of an installation for a WordPress blog, but for all sites the principle is the same.
Let's start with the first option. You can upload the icon to the site anywhere you like. But the most frequently used options are in the root of the site and in the theme folder.
I prefer the option of uploading to the root of the site, since when you change the template, you will have to re-enter the path to the icon in the template file. Out of habit, I use the option to download to the theme folder.
I'll show you how I did it. To upload files to the site I use the ftp client FileZilla(). The favicon in my case lies in the folder with my theme, that is, in the template folder where all its files and folders are located (see below).
As you can see, there are all the files and folders of the template and among them there is an icon.
After uploading the icon to the hosting, you need to upload it on all pages of the site. To do this, you need to add a specific line of code to your theme's header.php file in the area between the opening and closing tags
.Let's take the following code. Just insert your domain name and topic name into it.