{"id":357158,"date":"2021-10-23T19:00:35","date_gmt":"2021-10-23T16:00:35","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-a-favicon\/"},"modified":"2021-10-23T19:00:35","modified_gmt":"2021-10-23T16:00:35","slug":"what-is-a-favicon","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-a-favicon\/","title":{"rendered":"#What Is a Favicon?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a26706601531\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a26706601531\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-favicon\/#Favorite_Icon\" >Favorite + Icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-favicon\/#Favicons_and_the_Modern_Web\" >Favicons and the Modern Web<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is a Favicon?&#8221;<\/strong><\/p>\n<div>\n<figure style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage size-full wp-image-759920\" srcset=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/HTG-favicon.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/HTG-favicon.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/HTG-favicon.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Favicon in Google Chrome.\" width=\"1200\" height=\"675\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"type:primaryImage imagecredit\">Joe Fedewa<\/span><\/figcaption><\/figure>\n<p>You\u2019ve probably noticed that websites have little icons that <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>ear in your browser tabs. These icons make it easy to visually identify a website. They\u2019re little logos for the website. There\u2019s actually a special term for these icons\u2014\u201cfavicon.\u201d<\/p>\n<p>Some other names for \u201cfavicon\u201d include\u00a0\u201cshortcut icon,\u201d \u201cwebsite icon,\u201d \u201ctab icon,\u201d \u201cURL icon,\u201d or \u201cbookmark icon.\u201d However, the original term was \u201cfavicon\u201d and that\u2019s the one most people still use today. Let\u2019s take a closer look at these little icons.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Favorite_Icon\"><\/span>Favorite + Icon<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2020\/11\/Safari-Tabs-with-Favicons.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Safari Tabs with Favicons\" width=\"650\" height=\"111\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The term \u201cfavicon\u201d is a blend of two words\u2014\u201cfavorite\u201d and \u201cicon.\u201d The name is derived from how these icons were originally used. Favicons first appeared in Internet Explorer 5 in 1999 and they were shown in the \u201cFavorites\u201d\u2014a.k.a. \u201cbookmarks\u201d\u2014and the address bar.<\/p>\n<p>Unlike a lot of terms that blend two words together, the term \u201cfavicon\u201d wasn\u2019t created organically as shorthand. It was the actual name of the file that was found in the root directory of the website. Whichever file was saved as <code>favicon.ico<\/code> would appear as the favicon for the website.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Favicons_and_the_Modern_Web\"><\/span>Favicons and the Modern Web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-759923\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/lifesavvy-icons-e1633532364966.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"650\" height=\"278\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Favicons are still <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cloudsavvyit.com\/104\/how-to-set-up-fancy-icons-favicons-for-your-website\/\">alive and well in web browsers today<\/a>. They appear in tabs, favorites, bookmark bars, and you can find them in mobile browsers as well. It wasn\u2019t long after favicons were introduced in 1999 that they became standardized by the World Wide Web Consortium.<\/p>\n<p>Back in the day, website owners could estimate how many people had bookmarked a page by the number of requests for the favicon. Nowadays, that\u2019s not possible as the favicon is loaded for every page, regardless of whether it\u2019s bookmarked.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cloudsavvyit.com\/104\/how-to-set-up-fancy-icons-favicons-for-your-website\/\">Modern favicons are much more robust<\/a>. They\u2019re not just limited to ICO files. Websites can use PNG, GIF (some even animated), JPEG, SVG, and APNG. It\u2019s common for favicons to match the website\u2019s <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">social media<\/a> profile photos and mobile app icons. They\u2019re a key component of the brand\u2019s visual identity.<\/p>\n<p><strong>RELATED:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cloudsavvyit.com\/104\/how-to-set-up-fancy-icons-favicons-for-your-website\/\"><strong><em>How to Set Up Fancy Icons (Favicons) for Your Website<\/em><\/strong><\/a><\/p>\n<hr\/>\n<p>However you decide to pronounce it\u2014\u201cfave-icon\u201d or \u201cfav-icon\u201d?\u2014these little icons serve a simple, but important purpose. Without them, the web would be less visually appealing. We train ourselves to associate certain colors, shapes, and letters to their websites. That\u2019s all thanks to the humble favicon.<\/p>\n<p>\u00a0<\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/759908\/what-is-a-favicon\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is a Favicon?&#8221; Joe Fedewa You\u2019ve probably noticed that websites have little icons that appear in your browser tabs. These icons make it easy to visually identify a website. They\u2019re little logos for the website. There\u2019s actually a special term for these icons\u2014\u201cfavicon.\u201d Some other names for \u201cfavicon\u201d include\u00a0\u201cshortcut icon,\u201d \u201cwebsite icon,\u201d \u201ctab icon,\u201d&#8230;<\/p>\n","protected":false},"author":1,"featured_media":357159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/HTG-favicon.jpg?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-357158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/357158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=357158"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/357158\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/357159"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=357158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=357158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=357158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}