{"id":5013,"date":"2020-10-09T14:19:15","date_gmt":"2020-10-09T13:19:15","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=5013"},"modified":"2022-12-21T10:18:51","modified_gmt":"2022-12-21T10:18:51","slug":"what-is-a-favicon","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/what-is-a-favicon\/","title":{"rendered":"What is a favicon?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>A favicon might sound like some obscure Nintendo console from the early \u201880s, but they\u2019re actually nothing to do with video games.<\/strong> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They are, in fact, pint-sized pixel icons for your website that can help brand it up to the nines and allow visitors to locate it more easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Don\u2019t be duped into thinking favicons are basically logos. This is a common misconception. Sure, there\u2019s often some crossover here, but it\u2019s the distinction between them that\u2019s way more important. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this guide, we\u2019ll clear up any confusion you might have about favicons, fill you in on their history and give you a few pointers on how to create yours.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#favicons\">Favicon guide<\/a><\/li>\n\n\n\n<li><a href=\"#history-of-favicons\">The history of favicons<\/a><\/li>\n\n\n\n<li><a href=\"#google-experiments\">How Google is experimenting with favicons<\/a><\/li>\n\n\n\n<li><a href=\"#good-favicon\">What makes a good favicon?<\/a><\/li>\n\n\n\n<li><a href=\"#make-favicon\">How to create a favicon for your website<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"favicons\">Favicon guide<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We already told you that they\u2019re tiny pixel icons for your website, but allow us to elaborate. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These icons usually measure in at 16\u00d716 pixels and they act as branding for your site. The flag they fly for your company may be tiny, but it can make a big difference in practice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Their main role is to help visitors locate your page when they have a bunch of different browser tabs open. They throw down a strong visual marker for your brand. In turn, they can build up trust among your customers and help you forge an online identity.<\/p>\n\n\n\n<figure class=\"wp-block-image alignright size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"194\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/20i-favicon.png\" alt=\"The central part of the 20i logo, used as a favicon\" class=\"wp-image-5039\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s worth reiterating that favicons and logos are not one and the same. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sure, some companies use a shrunken-down version of their logo for their favicon, but often they\u2019re only part of the logo. We use only the middle character of our company name for ours.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But you can always try something different that shouts what the brand stands-for from the digital rooftops.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you still have no idea what we\u2019re talking about, hopefully a few examples of iconic favicons will give you some clarity. Facebook, of course, uses a lower-case F in white and blue.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Facebook-favicon.jpg\" alt=\"Facebook favicon\" class=\"wp-image-5014\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Facebook-favicon.jpg 512w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Facebook-favicon-300x300.jpg.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Facebook-favicon-150x150.jpg.webp 150w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Facebook-favicon-370x370.jpg.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Facebook-favicon-270x270.jpg.webp 270w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption class=\"wp-element-caption\">All favicons can look &#8216;messy&#8217; when enlarged beyond their intended size<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You may have spotted that little red envelope icon on a browser tab for Google\u2019s email service, Gmail. Video streaming giant YouTube, meanwhile, uses their instantly recognisable red and white play button for their favicon.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"216\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/gmail-youtube.png\" alt=\"Gmail and Youtube favicons\" class=\"wp-image-5015\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/gmail-youtube.png 561w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/gmail-youtube-300x116.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/gmail-youtube-370x142.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/gmail-youtube-270x104.png.webp 270w\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Browser tabs aren\u2019t the only place you can see favicons in the wild. They also crop up in your bookmarks, browser history, search bars and toolbar apps. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"history-of-favicons\">The history of favicons<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Right, give us your full attention because it\u2019s time for a quick history lesson. Back in 1999, a fun-filled age of dial-up internet, Microsoft Internet Explorer and Netscape Navigator were locked in a bitter war for control of the global web browser market.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Netscape Navigator may not be a name you hear too much in a market where Google Chrome looms like a shark in a goldfish pond, but in the \u201890s, it was a big deal. That is, until Microsoft dealt its marketshare a crippling blow with the release of Internet Explorer 5.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What was so special about Internet Explorer 5? Well, aside from the fact it was a free browser deeply integrated in the Windows operating system, it had a killer feature. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"273\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Internet_Explorer_5_on_Windows_98.png\" alt=\"Internet Explorer 5\" class=\"wp-image-5017\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Internet_Explorer_5_on_Windows_98.png 365w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Internet_Explorer_5_on_Windows_98-300x224.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Internet_Explorer_5_on_Windows_98-270x202.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Internet_Explorer_5_on_Windows_98-80x60.png.webp 80w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><figcaption class=\"wp-element-caption\">Used with permission from Microsoft.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Yep, you guessed it: favicons! They were the <a href=\"https:\/\/thehistoryoftheweb.com\/how-we-got-the-favicon\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">handiwork of developer Bharat Shyam<\/a>, and while small in size, they made a big difference to the way people navigated their browser bookmarks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before the release of Internet Explorer 5, favourites menus were a sprawling mass of text with nothing to make one bookmark stand out among a sea of others. But favicons changed all of that by allowing developers to add a visual marker to set their websites apart.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Shyam coined the term by combining the words \u2018favourite\u2019 and \u2018icon\u2019. Sorry if you were expecting the phrase to have some deep, meaningful backstory. It really was that simple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Microsoft made it easy for webmasters to take advantage of this feature, simply asking them to create a file called favicon.ico and place it in the root directory of their web server. Internet Explorer would pick up on this and do the rest. No wonder they caught on so fast.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In December 1999, the favicon was standardised by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, and in the XHTML 1.0 recommendation the following month. These were major milestones on its journey to becoming industry standard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These days, Internet Explorer 5 is little more than a distant memory, but the favicons it introduced are still a cornerstone of modern web browsers. They have found their way into browser tabs, toolbar apps, history results and search bars in all of the major web browsers, and developers are still exploring new ways that they could be put to use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"google-experiments\">How Google is experimenting with favicons<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before favicons came along, having to trawl through a lengthy list of bookmarks in search of a specific website should probably have been classed as torture under the Geneva Convention. But these tiny collections of pixels have come a long way since changing that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Even today, developers are experimenting with them to find out if they could have a similar impact outside of bookmarks and browser tabs. <a href=\"https:\/\/www.theverge.com\/2020\/1\/17\/21070871\/google-favicon-search-icons-links-brands\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google started peppering its search results with favicons last year<\/a>, first adding them on the mobile version of Chrome before expanding the trial to include its desktop browser last January.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"1045\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Google-mobile-search.png\" alt=\"A Google search on a mobile device, showing favicons\" class=\"wp-image-5044\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Google-mobile-search.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Google-mobile-search-172x300.png.webp 172w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Google-mobile-search-370x644.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Google-mobile-search-270x470.png.webp 270w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption class=\"wp-element-caption\">A mobile search for favicons, with the favicons highlighted (meta!)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Big G <a href=\"https:\/\/www.blog.google\/products\/search\/new-design-google-search\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">claims<\/a> its new favicon-rocking search results will give users a clearer idea of where information is coming from. Whether a collection of 16&#215;16 icons actually achieves that is debatable, but the point is that favicons are here to stay. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You shouldn\u2019t be surprised to see them cropping up in all kinds of new places, given the research still going into them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"good-favicon\">What makes a good favicon?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At some point in your life, you may have been told that size matters. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While that may be true where some things are concerned, it does not apply to favicons. They may be small, but don\u2019t underestimate the impact they can have on your business and its visual identity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With this in mind, there\u2019s lots to consider when designing a favicon. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are a few pointers to help you create the best one possible for your website:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Favicon size: make the most of the space<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s a good idea to stick to the 16&#215;16 pixel limit, as this is recognised by the leading web browsers across the board. Think carefully about how to put that restricted space to the best possible use. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simply shrinking down your company logo to these proportions isn\u2019t always the best bet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keep things simple<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s easy to overthink things and put tonnes of detail into your favicon. It is, after all, the face of your firm in bookmarks and browser tabs. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But given the diminutive canvas you have to work with, adding too much detail can make them look clunky. Basic shapes and bright colours usually work best.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Consider abbreviating<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It will probably be difficult to cram your entire company name into your favicon, so put some thought into how you could go about abbreviating it. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some of the most effective ones are single characters. Using only the first letter of their name hasn\u2019t done Wikipedia or Facebook any harm, has it?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Emphasise your brand identity with a favicon<\/h3>\n\n\n\n<figure class=\"wp-block-image alignright size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/WhatsApp.png\" alt=\"WhatsApp favicon\" class=\"wp-image-5022\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/WhatsApp.png 200w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/WhatsApp-150x150.png.webp 150w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sure, single character favicons can be effective &#8211; but only when that\u2019s the best option for emphasising your brand\u2019s identity and telling customers what you\u2019re all about. Some brands would be better served by a logo. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WhatsApp is a good example of this, with their phone icon inside a green speech bubble. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It sums up exactly what the app does, and this kind of marketing probably helped them find their way onto virtually every smartphone on the planet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Think about colour<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bright, contrasting colours are known to be eye-catching. But keep in mind that some web browsers have grey, white or black backgrounds that your favicon will be placed on top of, and this can affect the way it looks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"make-favicon\">How to create a favicon<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here, we\u2019ve broken it down into four easy-to-follow steps:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Create your image from scratch, or with a favicon generator<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can knock up a basic design on Photoshop, Paint 3D, Corel Painter or whatever your graphics package of choice happens to be. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start with a 64&#215;64 pixel square so it doesn\u2019t feel like you\u2019re carrying out keyhole surgery. You can always scale it down to 16&#215;16 pixels later. When you\u2019re done tinkering, you will need to save the file as a JPG, PNG, GIF, BMP, Windows ICO, SVG or TIF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Creating a favicon from scratch isn\u2019t too difficult, assuming you\u2019re got some imaging knowhow. But there are tools that can automate the entire process if you don\u2019t like doing things manually. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Favicon makers like <a href=\"https:\/\/www.favicon.cc\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/www.favicon.cc\/<\/a> and <a href=\"https:\/\/favicon.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/favicon.io\/<\/a> are handy hubs where you can do all of the above in one place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While you should definitely have one that is 16&#215;16 pixels in size, you may wish to have them in different resolutions, from 32&#215;32 upwards. This is to make sure that they still look crisp on higher resolution displays.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Convert your image to the .ico format<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is the recommended format for favicons as most web browsers support it. There are free online tools that can handle the conversion for you, such as <a href=\"http:\/\/faviconer.com\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">faviconer.com<\/a> and <a href=\"https:\/\/iconifier.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">iconifier.net<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Place the .ico file in your website\u2019s root directory<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Just drop it right in there. You can use a file manager like you get with our hosting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To check it\u2019s in the right place, enter your site\u2019s URL followed by \/favicon.ico into a web browser\u2019s address bar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Drop in HTML code for older browsers<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Most modern web browsers will automatically pick up your favicon, but let\u2019s not discriminate against older ones. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To make sure they find it, you\u2019ll need to tinker with your site\u2019s HTML page. Don\u2019t worry, we\u2019re not going to ask you to do any hardcore coding here.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simply add the following to your header and you\u2019re away:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" type=\"image\/x-icon\" href=\"http:\/\/yoursite.com\/favicon.ico\" \/&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re using lots of the different resolution favicons, you&#8217;ll need to repeat this for the variants.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good site that does a lot of the work for you is <a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">RealFaviconGenerator.net<\/a>. It will create your favicons but also provide you with the code you need to add to your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1183\" height=\"429\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Real-Favicon-Generator.png\" alt=\"Real Favicon Generator code\" class=\"wp-image-5033\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Real-Favicon-Generator.png 1183w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Real-Favicon-Generator-300x109.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Real-Favicon-Generator-768x279.png.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Real-Favicon-Generator-370x134.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Real-Favicon-Generator-270x98.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2020\/10\/Real-Favicon-Generator-740x268.png.webp 740w\" sizes=\"auto, (max-width: 1183px) 100vw, 1183px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to add or change a favicon in WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s even easier to add a favicon in WordPress (other CMS are available).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In WordPress Admin, go Appearance &gt; Customize in the menu on the left. Then choose &#8216;Site Identity&#8217;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, choose &#8216;Select site icon&#8217;.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"489\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/12\/WordPress-site-identity.png\" alt=\"Site identity in WordPress - where you can add a favicon\" class=\"wp-image-10215\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/12\/WordPress-site-identity.png 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/12\/WordPress-site-identity-184x300.png.webp 184w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/12\/WordPress-site-identity-270x440.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/12\/WordPress-site-identity-150x245.png.webp 150w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then simply choose it from your media library, or upload the favicon &#8211; sorted!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Any questions?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hopefully that&#8217;s given you all you need to make a good favicon and install it on your site. Let us know if you have any problems!<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n{ \n\"@context\": \"http:\/\/schema.org\", \n\"@type\": \"FAQPage\", \"@id\": \" https:\/\/www.20i.com\/blog\/what-is-a-favicon\/#what-is-a-favicon\",\n \"headline\": \" What is a favicon?\", \n\"url\": \" https:\/\/www.20i.com\/blog\/what-is-a-favicon\", \n\"mainEntity\": [{ \n\"@type\": \"Question\", \"name\": \"What is a favicon\",\n\"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \" These icons usually measure in at 16\u00d716 pixels and they act as branding for your site. The flag they fly for your company may be tiny, but it can make a big difference in practice.\nTheir main role is to help visitors locate your page when they have a bunch of different browser tabs open. They throw down a strong visual marker for your brand. In turn, they can build up trust among your customers and help you forge an online identity.\nIt\u2019s worth reiterating that favicons and logos are not one and the same. \" }} , \n{ \"@type\": \"Question\", \"name\": \"The history of favicons\", \n\"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \" Right, give us your full attention because it\u2019s time for a quick history lesson. Back in 1999, a fun-filled age of dial-up internet, Microsoft Internet Explorer and Netscape Navigator were locked in a bitter war for control of the global web browser market.\n\nNetscape Navigator may not be a name you hear too much in a market where Google Chrome looms like a shark in a goldfish pond, but in the \u201890s, it was a big deal. That is, until Microsoft dealt its marketshare a crippling blow with the release of Internet Explorer 5.\n\nWhat was so special about Internet Explorer 5? Well, aside from the fact it was a free browser deeply integrated in the Windows operating system, it had a killer feature.\n\nInternet Explorer 5Used with permission from Microsoft.\nYep, you guessed it: favicons! They were the handiwork of developer Bharat Shyam, and while small in size, they made a big difference to the way people navigated their browser bookmarks.\n\nBefore the release of Internet Explorer 5, favourites menus were a sprawling mass of text with nothing to make one bookmark stand out among a sea of others. But favicons changed all of that by allowing developers to add a visual marker to set their websites apart.\n\nShyam coined the term by combining the words \u2018favourite\u2019 and \u2018icon\u2019. Sorry if you were expecting the phrase to have some deep, meaningful backstory. It really was that simple.\n\nMicrosoft made it easy for webmasters to take advantage of this feature, simply asking them to create a file called favicon.ico and place it in the root directory of their web server. Internet Explorer would pick up on this and do the rest. No wonder they caught on so fast.\n\nIn December 1999, the favicon was standardised by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, and in the XHTML 1.0 recommendation the following month. These were major milestones on its journey to becoming industry standard.\n\nThese days, Internet Explorer 5 is little more than a distant memory, but the favicons it introduced are still a cornerstone of modern web browsers. They have found their way into browser tabs, toolbar apps, history results and search bars in all of the major web browsers, and developers are still exploring new ways that they could be put to use.\" }} , \n{ \"@type\": \"Question\", \"name\": \"How Google is experimenting with favivons\", \n\"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \" Before favicons came along, having to trawl through a lengthy list of bookmarks in search of a specific website should probably have been classed as torture under the Geneva Convention. But these tiny collections of pixels have come a long way since changing that.\n\nEven today, developers are experimenting with them to find out if they could have a similar impact outside of bookmarks and browser tabs. Google started peppering its search results with favicons last year, first adding them on the mobile version of Chrome before expanding the trial to include its desktop browser last January.\n\nA Google search on a mobile device, showing faviconsA mobile search for favicons, with the favicons highlighted (meta!)\nThe Big G claims its new favicon-rocking search results will give users a clearer idea of where information is coming from. Whether a collection of 16\u00d716 icons actually achieves that is debatable, but the point is that favicons are here to stay.\n\nYou shouldn\u2019t be surprised to see them cropping up in all kinds of new places, given the research still going into them.\" }},  \n{ \n\"@type\": \"Question\", \"name\": \"What makes a good favicon?\",\n\"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"At some point in your life, you may have been told that size matters.\n\nWhile that may be true where some things are concerned, it does not apply to favicons. They may be small, but don\u2019t underestimate the impact they can have on your business and its visual identity.\n\nWith this in mind, there\u2019s lots to consider when designing a favicon.\n\nHere are a few pointers to help you create the best one possible for your website:\n\nMake the most of the space available\nIt\u2019s a good idea to stick to the 16\u00d716 pixel limit, as this is recognised by the leading web browsers across the board. Think carefully about how to put that restricted space to the best possible use.\n\nSimply shrinking down your company logo to these proportions isn\u2019t always the best bet.\n\nKeep things simple\nIt\u2019s easy to overthink things and put tonnes of detail into your favicon. It is, after all, the face of your firm in bookmarks and browser tabs.\n\nBut given the diminutive canvas you have to work with, adding too much detail can make them look clunky. Basic shapes and bright colours usually work best.\n\nConsider abbreviating\nIt will probably be difficult to cram your entire company name into your favicon, so put some thought into how you could go about abbreviating it.\n\nSome of the most effective ones are single characters. Using only the first letter of their name hasn\u2019t done Wikipedia or Facebook any harm, has it?\n\nEmphasise your brand identity\nWhatsApp favicon\nSure, single character favicons can be effective \u2013 but only when that\u2019s the best option for emphasising your brand\u2019s identity and telling customers what you\u2019re all about. Some brands would be better served by a logo.\n\nWhatsApp is a good example of this, with their phone icon inside a green speech bubble.\n\nIt sums up exactly what the app does, and this kind of marketing probably helped them find their way onto virtually every smartphone on the planet.\n\nThink about colour\nBright, contrasting colours are known to be eye-catching. But keep in mind that some web browsers have grey, white or black backgrounds that your favicon will be placed on top of, and this can affect the way it looks.\" }} , \n{ \n\"@type\": \"Question\", \"name\": \"How to dreate a Favivcon\",\n\"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Here, we\u2019ve broken it down into four easy-to-follow steps:\n\n1. Create your image\n2. Convert your image to the .ico format\n3. Place the .ico file in your website\u2019s root directory\n4. Drop in HTML code for older browsers\" }} \n\n],  \n\n\"about\": [{\n\"@type\": \"Thing\", \"name\": \"Favicon\", \n\"sameAs\": \" https:\/\/en.wikipedia.org\/wiki\/Favicon\"}\n], \n\"mentions\": [{\n\"@type\": \"Thing\", \"name\": \"ico format\", \n\"sameAs\": \" https:\/\/en.wikipedia.org\/wiki\/ICO_(file_format)\"}, \n{\"@type\": \"Thing\", \"name\": \"Website\", \n\"sameAs\": \" https:\/\/en.wikipedia.org\/wiki\/Website\"}, \n{\"@type\": \"Thing\", \"name\": \"HTML\", \n\"sameAs\": \" https:\/\/en.wikipedia.org\/wiki\/HTML\"}]}}\n<\/script>\n","protected":false},"excerpt":{"rendered":"A complete guide to favicons, including how to create and use them.","protected":false},"author":15,"featured_media":5036,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[51,60],"tags":[65,81,57],"class_list":["post-5013","post","type-post","status-publish","format-standard","has-post-thumbnail","category-technology","category-web-design-dev","tag-google","tag-internet","tag-web-design","cs-entry"],"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/Favicons.png","author_info":{"display_name":"Mark Langshaw","author_link":"https:\/\/www.20i.com\/blog\/author\/mark-langshaw\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/5013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=5013"}],"version-history":[{"count":31,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/5013\/revisions"}],"predecessor-version":[{"id":10217,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/5013\/revisions\/10217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/5036"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=5013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=5013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=5013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}