IQSites - smart website builder
Social networks
Your Branded Icon. How to Make a Favicon for Your Website?

Your Branded Icon. How to Make a Favicon for Your Website?

Many people underestimate such an important design element as the favicon. You can make a favicon in several ways.

May 22, 2016 at 3:00 am

The favicon is the very little icon on your website that is displayed in search engines and bookmarks of any browser. This element should be by no means underestimated because it makes a brand recognisable and more visible to search engines. It often happens that competitors forget all about creating their favicon, and we can take advantage of that ;)

Your Branded Icon. How to Make a Favicon for Your Website?

Icon Sizes

Mind you, different browsers and devices require different sizes of favicons. For example, a familiar desktop favicon (for conventional web browsers) will have dimensions: 16x16, 32x32, 48x48.

Android devices have different screen resolutions. The unit indicating the resolution of a smartphone screen is referred to as PPI (pixel density per inch). We should take into account that for Android we need to create the following dimensions:

- 36×36 — PPI = 0.75
- 48×48 — PPI = 1
- 72×72 — PPI = 1.5
- 96×96 — PPI = 2
- 144×144 — PPI = 3
- 192×192 — PPI = 4

Your Branded Icon. How to Make a Favicon for Your Website?

Apple devices also have their own screen resolution settings. If you want to have a correct display on Apple smartphones, you must make a favicon of the following sizes:

- 57 × 57 - for the iPhone no retina display, iOS 6.0 and below
- 60 × 60 - for the iPhone no retina display, iOS 7.0
- 72 × 72 - for the iPad no retina display, iOS 6.0 and below
- 76 × 76 - for the iPad no retina display, iOS 7.0
- 114 × 144 - for the iPhone retina display, iOS 6.0 and below
- 120 × 120 - for the iPhone retina display, iOS 7.0
- 144 × 144 - for the iPad retina display, iOS 6.0 and below
- 152×152 - for the iPad retina display, iOS 7.0
- 180×180 - for the iPhone 6 Plus, iOS 8.0

Other devices are less common, so they will not be considered. As for the favicon format, all devices and browsers fortunately support the only format - png.

Your Branded Icon. How to Make a Favicon for Your Website?

How to Create a Favicon?

To to make a favicon from scratch there are two most common solutions:
1) Draw it yourself using Photoshop or any other functional photo editor.
2) Take advantage of Favicon online generator.

In this article we will not delve into the basics of Photoshop design, and tell you about how to make a long-awaited icon without special knowledge by using the online generator.

Your Branded Icon. How to Make a Favicon for Your Website?

The resource realfavicongenerator.net allows us to create a favicon for all existing devices and browsers. It is just enough to upload our logo or a picture we like and our favicon ready. You can play a little with colours and transparency, but usually the result is achieved quickly and in high quality. Press the blue little button at the bottom, and get the finished product in one click;)

Your Branded Icon. How to Make a Favicon for Your Website?

The most well-known and simple favicon editor is available on favicon.cc. Here everything is intuitively understandable and accessible. But after playing for a couple of minutes, we did't manage to create a masterpiece, unfortunately... :))

Your Branded Icon. How to Make a Favicon for Your Website?

However, it turned out to be a good example of an idea quickly put into practice with the help of an online favicon editor. By the way, you can upload an image, and the service will turn it into a pixel format.

Subscribe to the blog and get all the latest and most interesting information from IQSites!



Subscribe to Blog Updates
Would you like to quickly receive the company news from the corporate blog? Just fill in the form below.
You can unsubscribe at any time.
* To be filled in
I Agree To Terms of Service
Tags: Обучающая статья

More articles


Go up
array(5) { ["id"]=> int(0) ["ip"]=> string(13) "34.229.151.87" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "ca1016c8fce619efd0b9dd63c8b28c92" }