How to create a favicon for your website. Step by step guide from A To Z
Despite the level of knowledge you have, some things are often neglected during the development of a website.
A perfect example is the favicon of the website. Do you know what a favicon is? Do you use it effectively?
What is a favicon?
A favicon is a small icon 16×16 or 32×32 pixels, normally containing a logo, brand’s first letter or a typical image that reflects the type of business or the theme of the website.
Why is favicon important?
The functions of the favicon are as follows:
– Identification of the website by the user (usability).
– Gives a professional look to the website.
Let us provide more details on the core benefits of the favicon.
A favicon is something like a website identity. As mentioned in the introduction, the favicon helps users to remember your website among others viewed. The favicon helps the user to find your site easily and go to browsing history, Google search results or a bookmark list of sites in your browser.
Whether it’s browsing history, search results on Google or a bookmark list of sites in your browser, a favicon helps the user to find your site and go to it easily.
Users tend to judge the sellers of goods and services via Internet on how professional their site is. If you don’t have a favicon(the search engines display the site without favicon with a blank document icon), it can easily lead to the loss of credibility, especially when people compare you with the competitors.
It is known that people respond better to images than text. Now let’s suppose that a visitor of your website was in a hurry visiting it for the first time, and decided to add it to the bookmarks to return later. Suppose this person later decides to visit your website again going back to bookmarks. You’re lucky if the favicon is recognizable, like a remarkable and unique letter G for Google and the user will find you. If there is no favicon, your site can be deleted from the list of bookmarks.
It saves user’s time
The favicon saves the time the user needs to identify a site in bookmarks, history, or other places where the browser adds favicon for quick identification. It just makes life easier for the average visitor to your website.
Benefits for SEO
If your website has a favicon, it will be more visible in the search results comparing to the ones without it and therefore you will be able to attract more visitors.
How to create a favicon?
There are a lot of tools you can use to create a favicon in a few minutes. If you do not have design skills or you do not know how to do it,try to create a favicon using Logaster.
To do it, follow the steps:
Step 2. Create a logo
Logaster is an online logo generator, so to create a favicon first you need to create a logo. Logaster will offer the favicon you need based on your logo. But do not worry, it won’t take much time and effort.
Step 3. Introduce the name of your website (or company), choose type of business
Step 4. Choose the logo you like
Once all the necessary information is provided, Logaster will generate several dozens of logos.
How to choose the right design?
First of all, you should understand that the logo that serves as a base for your favicon can be imperfect. Our goal is to create a favicon, and logo can be modified later.
The icon is often used as a favicon. If you want to select a different color, or font, you can edit the design elements (font, color, text) in step 3 of logo creation. Find out how to edit the logo here.
Step 5. Create a favicon
Now, when you have a logo, press “Create a favicon with this logo” on the logo page.
Step 6. Choose necessary favicon design
Logaster generates several generates dozens of beautiful and ready to use favicons. Select your favorite design. Preview you see allows you to see how your favicon will look on the website.
If it is necessary to change the favicon, you can do it by editing the logo, because the favicons are based on logos. That is why if you want, for example, another color of favicon, you have to return to the logo webpage, edit the color and create the favicon from the beginning.
To find inspiration for a favicon visit the one of the following websites:
Step 7. Download the favicon
Once you have paid the favicon is available in ico and png formats to download.
Where can I use the favicon?
You can use the favicon:
– On mobile devices. The user can add a favicon to the home screen of his device (like a bookmark) – Android, IOS, Windows Phone etc;
– Apps for PC / Mac.
How to install a favicon on your website?
Once you created the favicon, its installation on the server doesn’t take more than a couple of minutes and is performed in two stages. You need access to the root directory of your website and the text editor to change the HTML-code of the website.
It is necessary to download the favicon.ico file to the server. To do this, you need to download and install ftp client, for example, FileZilla.
Then enter your login and password and download the file. Read more detailed instructions on how to download the favicon file here.
Now you need to edit the HTML-page of your website to help browsers to find your favicon image. While the FTP window is open, find and download the file index.html or header.php from the server .
Before you edit the code, be sure to make a copy of files to recover them in case of any mistakes.
Open the index.html file in a text editor – Notepad, Notepad ++, Sublime Text.
If your website contains pure HTML, insert a special code to HEAD file index.html.
The code can be copied on the favicon page on Logaster website.
If you use WordPress, insert the following code to HEAD file header.php.
Once it is done download the file back to where you got it. Done! Please reload the page of your website to see the favicon.
Most modern browsers are smart enough to know how to find the favicon file, even without this code, but only in case the favicon image format is 16×16 pixels, has a name favicon.ico and is stored in the root directory of your website.
We hope that this article provides you with some useful information that will help to create a favicon, which will make your website more successful and attractive.