What Is a Favicon and
How to Make One for Your Website
32 x 32
16x16 pixels
Size: The ideal size for making a favicon is 16x16 pixels, which is the size where they are most normally shown. In any case, they can now and then show up in bigger measurements as well, (for example, 32x32 pixels). Record: The favored document design for a favicon is JPEG or PNG.
When distributing their recently made site to
the world, an excessive number of individuals disregard a bit of final detail
that can have a major effect - the favicon. These small increments to your site
have an effect that is a lot greater than their real size, so don't think
little of their capacity and significance. Here's the beginning and end you
need to think about favicons and how to make them:
What is a favicon picture A favicon is a little, 16x16 pixel symbol utilized on internet browsers to speak to a site or a website page. Short for 'most loved symbol', favicons are most regularly shown on tabs at the highest point of an internet browser, however, they are likewise found on your program's bookmark bar, history, and that's just the beginning. On certain occasions, for example, on Google Chrome, they even show up on your programs' landing page. At the end of the day, the favicon fills in as your site's symbol or a visual imprint with which to distinguish your site around the web.
Why favicons matter
Notwithstanding their minuscule size, favicons are vital to any site, improving its client experience, marking, and polished methodology:
Client experience: Favicons go about as critical obvious signals to your site, upgrading its client experience. They assist clients with finding your site's tab on their program and across various applications, for example, the bookmark bar, making it simpler to return to the site again and again.
Marking: For a genuinely strong brand, it's significant not to disregard even the smallest of
subtleties. Favicons add to the marking and perceivability of your site,
expanding your style and language outside of the site and into the internet
browser.
Demonstrable skill:
Favicons add to the authenticity and polished methodology of your site, making
it watches sharp and thoroughly considered.
| Size | Name | Purpose |
| 32×32 | favicon-32.png | The standard for most desktop browsers |
| 128×128 | favicon-128.png | Chrome Web Store icon & Small Windows 8 Star Screen Icon* |
| 152×152 | favicon-152.png | iPad touch icon (Change for iOS 7: up from 144×144) |
| 167×167 | favicon-167.png | iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152) |
| 180×180 | favicon-180.png | iPhone Retina |
| 192×192 | favicon-192.png | Google Developer Web App Manifest Recommendation |
| 196×196 | favicon-196.png | Chrome for Android home screen icon |
| Size | Name | Purpose |
| 57×57 | favicon-57.png | Standard iOS home screen (iPod Touch, iPhone first generation to 3G) |
| 76×76 | favicon-76.png | iPad home screen icon |
| 96×96 | favicon-96.png | GoogleTV icon * |
| 120×120 | favicon-120.png | iPhone retina touch icon (Change for iOS 7: up from 114×114) |
| 144×144 | favicon-144.png | IE10 Metro tile for pinned site* |
| 195×195 | favicon-195.png | Opera Speed Dial icon (Not working in Opera 15 and later) |
| 228×228 | favicon-228.png | Opera Coast icon |
- 7 favicons
- Links in your website’s <head> tag for each size
- A special XML file for Windows’ (8.1 and above) start menu tiles ( IE11+ and Windows 10 requires a browserconfig.xml.)
A decent method to test your new most loved symbols is to utilize a cell phone or portable test system and pin your site to your dock/home screen. You should see your new favicon symbol on your dock/home screen.