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 ;)
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
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.
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.
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;)
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... :))
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!
