How to create favicons

by MBLIFEGUIDE posted on 2019-04-03


What is Favicon?

A favicon or favorite icon is the little icon that appears in the tab display of your web browser and in the bookmarks section.

Importance of Favicon

Creating a favicon for your website is very important to enhance the marketing of your website and since MBLIFEGUIDE team is committed to teaching you step by step how to build your website from scratch we will discuss in this blog post how to create and publish your favicon on your website.

If you have a logo or you already have good graphics for your website then you reached half the way, all that you need to do is to convert it to an icon of the .ICO format.

If you are in a hurry you can build your favicon in just a few seconds using FaviconGenerator.com , all that you need to do is to upload an image and it will convert it to .ICO format and also a code will be given to be included in your header. But keep in mind that such generators do not have many features as the icon generating software.

If you want to carefully build your favicon from scratch and you still do not have a logo or some good graphics or images we recommend you to use a professional graphics program like photoshop or inkscape.

Tips and Recommendations 

The recommended size for your favicon is 16x16 pixels since all browsers support this size, if you need to try other sizes e.g. (32 x 32, 48 x 48, and 64 x 64) you will have to test it in the browsers you support before you use it.

We also recommend you to build your favicon from the small size directly as it will be a lot clearer how it will be looking at the end.

Since GIF files show up better in the small space than any other formats also since GIF files use flat colors and many icon generators support this form we also highly recommend it to be used.

Convert your image to Icon Format

Once you have an acceptable image, you need to convert it to the icon format (.ICO).

You can use favicons in many formats like PNG, GIF, JPG and even SVG but .ICO is highly recommended to be used since it is the only format supported by Internet Explorer so it is better to stick with ICO

Publish your Icon

Now it is the time to publish the favicon into your website and that it is simply done by uploading it to the root directory of your website with a default name of favicon.ico as it will be detected by the web browser, but it is always better to add a link to it from every page on your site you need the favicon to appear. This option will allow you to change the name of favicon instead of using favicon.ico as a default name and to store them in different directories.

Free Online Tools 

  1. Favicon.cc : This website contains a free tool that will help you to draw a simple image using free basic features and after you finalize the image you draw it can be downloaded in .ICO format.
  2. favomatic.com : In this website, you will upload an image and it will convert the image into an .ICO format favicon and then a zip file will be downloaded that contains 2 png format images of both 16x16 and 32x32 pixel sizes, a favicon in .ICO format and also the code to be inserted into the header of your website.
  3. tools.dynamicdrive.com/favicon/ : In this website you will simply also upload the image and it will convert it to .ICO format.
  4. favicon-generator.org/

 



Leave a Comment:
*

 

Hani
2019-04-03
This helped me alot...thanks

Salah
2019-06-21
Nice