{"id":179442,"date":"2014-08-18T12:47:10","date_gmt":"2014-08-18T19:47:10","guid":{"rendered":"http:\/\/css-tricks.com\/?p=179442"},"modified":"2019-01-11T08:28:55","modified_gmt":"2019-01-11T15:28:55","slug":"favicon-quiz","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/favicon-quiz\/","title":{"rendered":"Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) such that you are covered with the best quality output everywhere. Spoiler alert: it&#8217;s a lot of different graphics and markup. Also full disclosure: Philippe has built a tool to help with it he showcases in the article.<\/em><\/p>\n<p><!--more--><\/p>\n<p>Favicons were introduced in 1999 by Internet Explorer 5 (<a href=\"http:\/\/en.wikipedia.org\/wiki\/Favicon\" rel=\"noopener\">ref<\/a>) and standardized by the W3C a few months later. They are a small graphic that represents the website. <\/p>\n<figure id='post-179453 media-179453' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/favicon-in-desktop-browsers.jpg' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Since then, most desktop browsers have followed the trend and used favicons in some way. It&#8217;s an easy job, isn&#8217;t it? Just create a small picture to add to any web project to make it &#8220;final&#8221;. Nothing fancy. Or is it?<\/p>\n<p>Let&#8217;s do a quiz!<\/p>\n<h3>What is the primary favicon file?<\/h3>\n<p><strong>Answer: <code>favicon.ico<\/code>.<\/strong> And just to make sure: this is <em>not<\/em> a PNG renamed to <code>favicon.ico<\/code>. Although some browsers are easygoing enough to forgive this mistake, ICO is a different format, one that supports multiple versions of an image.<\/p>\n<h3>Question: What dimensions should <code>favicon.ico<\/code> be?<\/h3>\n<ul>\n<li><strong>A: 16&#215;16<\/strong>. The standard.<\/li>\n<li><strong>B: 32&#215;32<\/strong>. Wasn&#8217;t favicon updated some time ago?<\/li>\n<li><strong>C: 64&#215;64<\/strong>. You know, with all these new high pixel density screens.<\/li>\n<li><strong>D: None of the above<\/strong>.<\/li>\n<\/ul>\n<p><strong>Answer: D.<\/strong><\/p>\n<p><code>favicon.ico<\/code> is a format originally conceived by Microsoft and the other vendors have gone along with it. <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ie\/gg491740(v=vs.85).aspx\" rel=\"noopener\">Microsoft recommends<\/a> 16&#215;16, 32&#215;32 <em>and<\/em> 48&#215;48. Yes, a single ICO file can contain multiple graphics.<\/p>\n<p>Desktop browsers often use the favicon in a tab, and on standard resolution displays, the 16&#215;16 version is fine:<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/windows_chrome_16x16_32x32_48x48_tab.png\" data-recalc-dims=\"1\" \/><figcaption>16&#215;16 favicon.ico in Chrome&#8217;s tab. So far so good.<\/figcaption><\/figure>\n<p>But a 16&#215;16 icon is too small for other places: the task bar and the desktop.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/windows_chrome_16x16_taskbar.png\" data-recalc-dims=\"1\" \/><figcaption>16&#215;16 favicon.ico added to task bar.<\/figcaption><\/figure>\n<figure>\n  <img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/windows_chrome_16x16_desktop.png\" data-recalc-dims=\"1\" \/><figcaption>16&#215;16 favicon.ico added to desktop. Not good.<\/figcaption><\/figure>\n<p>As soon as the icon contains several pictures, the results are much better.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/windows_chrome_16x16_32x32_48x48_taskbar.png\" data-recalc-dims=\"1\" \/><figcaption>16&#215;16, 32&#215;32 and 48&#215;48 favicon.ico added to task bar. As good as a native app.<\/figcaption><\/figure>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/windows_chrome_16x16_32x32_48x48_desktop.png\" data-recalc-dims=\"1\" \/><figcaption>16&#215;16, 32&#215;32 and 48&#215;48 favicon.ico added to desktop. Perfect.<\/figcaption><\/figure>\n<h3>Question: What is the purpose of <code>favicon.png<\/code>?<\/h3>\n<p>When digging the topic, we often encounter another file, <code>favicon.png<\/code>. People have questions about it <a href=\"http:\/\/stackoverflow.com\/questions\/6121725\/favicon-ico-or-png-correct-tags\" rel=\"noopener\">all the time<\/a>. What is it exactly?<\/p>\n<ul>\n<li><strong>A: An icon for browsers which do not support <code>favicon.ico<\/code>.<\/strong> Such as Firefox, maybe?<\/li>\n<li><strong>B: A high resolution icon<\/strong>. You know, with all these new high pixel density displays.<\/li>\n<li><strong>C: An old relic from the past.<\/strong> Now there are modern icons such as the Apple Touch icon.<\/li>\n<li><strong>D: Answer D.<\/strong> It&#8217;s complicated.<\/li>\n<\/ul>\n<p><strong>Answer: D.<\/strong> Since the adoption of HTML5, <code>favicon.ico<\/code> isn&#8217;t very useful. The <code>sizes<\/code> attribute was introduced to specify several different versions of the same icon, and those can be PNG files:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon-16x16.png\" sizes=\"16x16\"&gt;\r\n&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon-32x32.png\" sizes=\"32x32\"&gt;\r\n&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon-96x96.png\" sizes=\"96x96\"&gt;<\/code><\/pre>\n<p>So what should we declare?<\/p>\n<p>Let&#8217;s face an unsatisfying truth. Altough all desktop browsers support <code>favicon.ico<\/code>, this file is mostly deprecated. Yes, you can still rely on this file and it will work as expected. But seriously, it&#8217;s an old deprecated format. It is not used anywhere else in web technology. PNG is much more consistent.<\/p>\n<p><code>favicon.ico<\/code> is for old versions of IE. For the other browsers and most recent versions of IE, we use PNG icons. Then, which <code>sizes<\/code> do we declare? We&#8217;ll cover that soon.<\/p>\n<h3>Question: What format do we need to support mobile platforms?<\/h3>\n<p>According to <a href=\"http:\/\/www.smartinsights.com\/mobile-marketing\/mobile-marketing-analytics\/mobile-marketing-statistics\/\" rel=\"noopener\">SmartInsights<\/a>, more than 26% of the Web traffic is generated by smartphones and tablets. It&#8217;s the future. What do you need to support this world?<\/p>\n<ul>\n<li><strong>A: <code>favicon.ico<\/code>.<\/strong> It worked 15 years ago it&#8217;ll work today.<\/li>\n<li><strong>B: PNG icons.<\/strong> You said you would talk about it.\n<li><strong>C: Apple Touch icon<\/strong>. Duh.<\/li>\n<li><strong>D: The right answer is never listed anyway.<\/strong><\/li>\n<\/ul>\n<p><strong>Answer: D. You need PNG icons. <em>And<\/em> Apple Touch icons. <em>And<\/em> Windows 8 tile graphics. <em>And<\/em> a file named <code>browserconfig.xml<\/code>.<\/strong><\/p>\n<p>Mobile platforms are much more heterogeneous than the classic desktop browsers. Screen sizes and resolutions vary hugely and there is no predominant OS like Windows was when the Internet started to spread. Consequence: do not expect to design a mobile favicon with a single, universal graphic and single, universal declaration in the HTML code.<\/p>\n<h3>Question: Which sizes should the PNG icons be?<\/h3>\n<ul>\n<li><strong>A: 96&#215;96 for Google TV<\/strong><\/li>\n<li><strong>B: 196&#215;196 for Android Chrome<\/strong><\/li>\n<li><strong>C: 228&#215;228 for Coast by Opera<\/strong><\/li>\n<li><strong>D: All of the above<\/strong><\/li>\n<\/ul>\n<p><strong>Answer: D, and more<\/strong>. Like the 160&#215;160 picture for older versions of Opera Speed Dial (long gone), or the 128&#215;128 icon for Chrome Web Store, here it really depends on the platforms you want to support.<\/p>\n<h3>Question: What is the size of the Apple Touch icon?<\/h3>\n<p>The Apple Touch icon is used by iOS devices for bookmarks and web sites &#8220;added to home screen&#8221;. If the answer that comes to mind is 57&#215;57, congratulations. This is correct. Well, it was, 7 years ago, when the first iPhone was released.<\/p>\n<p><strong>Answer: Up to 180&#215;180.<\/strong><\/p>\n<p>Three releases occurred since the birth of the first iPhone:<\/p>\n<ul>\n<li>The iPad. Its screen is much larger than the iPhone.<\/li>\n<li>The Retina screen. It doubles the pixel density of the original screen.<\/li>\n<li>iOS 7. Its flat style makes the appearance of iPhone\/iPad slightly different.<\/li>\n<\/ul>\n<p>In total there are nine combinations:<\/p>\n<table>\n<tr>\n<th>Device<\/th>\n<th>Screen<\/th>\n<th>iOS version<\/th>\n<th>Icon size<\/th>\n<tr>\n<tr>\n<td rowspan=\"5\">iPhone<\/td>\n<td rowspan=\"2\">Classic<\/td>\n<td>6 and prior<\/td>\n<td>57&#215;57<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>60&#215;60<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Retina<\/td>\n<td>6 and prior<\/td>\n<td>114&#215;114<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>120&#215;120<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"1\">6 Plus<\/td>\n<td>8 and above<\/td>\n<td>180&#215;180<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\">iPad<\/td>\n<td rowspan=\"2\">Classic<\/td>\n<td>6 and prior<\/td>\n<td>72&#215;72<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>76&#215;76<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Retina<\/td>\n<td>6 and prior<\/td>\n<td>144&#215;144<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>152&#215;152<\/td>\n<\/tr>\n<\/table>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/Retina_iPad_57x57.png\" data-recalc-dims=\"1\" \/><figcaption>An old 57&#215;57 Apple Touch icon on a shiny Retina iPad. Blurry.<\/figcaption><\/figure>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/Retina_iPad_152x152.png\" data-recalc-dims=\"1\" \/><figcaption>A high resolution 152&#215;152 Apple Touch icon on a shiny Retina iPad. Neat.<\/figcaption><\/figure>\n<p>If you didn&#8217;t have the right answer, don&#8217;t blame yourself though. Out of the 5,000 top web sites which exhibit an <code>apple-touch-icon.png<\/code>, <a href=\"http:\/\/realfavicongenerator.net\/blog\/apple-touch-icon-the-good-the-bad-the-ugly\/\" rel=\"noopener\">as little as 4% get it right.<\/a><\/p>\n<p>Some might argue that 9 graphics are not really necessary. But at least, your master Apple Touch icon should be 152&#215;152. A Retina iPad running iOS 7 will find what it needs and lesser devices can scale down such picture as needed.<\/p>\n<h3>Question: Is it necessary to declare the Apple Touch icons in the HTML?<\/h3>\n<ul>\n<li><strong>A: I dunno.<\/strong> Come on, you have to answer something!<\/li>\n<li><strong>B: Yes.<\/strong> How could iOS find them otherwise?<\/li>\n<li><strong>C: No.<\/strong> Apple <a href=\"https:\/\/developer.apple.com\/library\/ios\/documentation\/AppleApplications\/Reference\/SafariWebContent\/ConfiguringWebApplications\/ConfiguringWebApplications.html\" rel=\"noopener\">defines conventions<\/a> so that iOS devices can find them anyway.<\/li>\n<li><strong>D: No but&#8230;<\/strong><\/li>\n<\/ul>\n<p><strong>Answer: D&#8230; but since some other platforms also use the Apple Touch icon, it is safer to declare it anyway.<\/<strong><\/strong><\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"\/apple-touch-icon-57x57.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"\/apple-touch-icon-114x114.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"\/apple-touch-icon-72x72.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"\/apple-touch-icon-144x144.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"\/apple-touch-icon-60x60.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"\/apple-touch-icon-120x120.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"\/apple-touch-icon-76x76.png\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"\/apple-touch-icon-152x152.png\"&gt;<\/code><\/pre>\n<p>As strange as it sounds, iOS devices are not the only ones to look for the Apple Touch icon. Since these icons are popular and more common than high resolution PNG icons, some browsers, such as Android Chrome, are using them. Therefore, declaring them is safer, in case a visitor with a compatible device or browser is able to process one of them.<\/p>\n<h3>Question: What does it take to define a tile for Windows 8 tablets?<\/h3>\n<ul>\n<li><strong>A: Windows 8 tablet? What is this?<\/strong><\/li>\n<li><strong>B: <code>favicon.ico<\/code><\/strong>. Steve Balmer legacy.<\/li>\n<li><strong>C: Two <code>msapplication-TileColor<\/code> and <code>msapplication-TileImage<\/code> meta tags.<\/strong><\/li>\n<li><strong>D: <code>browserconfig.xml<\/code><\/strong>.\n<\/ul>\n<p><strong>Answer: C for Windows 8.0 and IE 10, D for Windows 8.1 and IE 11. Answer A is somehow also correct.<\/strong><\/p>\n<p>Windows 8.0 declaration typically looks like:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;meta name=\"msapplication-TileColor\" content=\"#2b5797\"&gt;\r\n&lt;meta name=\"msapplication-TileImage\" content=\"\/mstile-144x144.png\"&gt;<\/code><\/pre>\n<p>Windows 8.1 and IE 11 rely on several tile pictures declared in <code>browserconfig.xml<\/code>. For example:<\/p>\n<pre rel=\"XML\"><code class=\"language-markup\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;browserconfig&gt;\r\n  &lt;msapplication&gt;\r\n    &lt;tile&gt;\r\n      &lt;square70x70logo src=\"\/mstile-70x70.png\"\/&gt;\r\n      &lt;square150x150logo src=\"\/mstile-150x150.png\"\/&gt;\r\n      &lt;square310x310logo src=\"\/mstile-310x310.png\"\/&gt;\r\n      &lt;wide310x150logo src=\"\/mstile-310x150.png\"\/&gt;\r\n      &lt;TileColor&gt;#2b5797&lt;\/TileColor&gt;\r\n    &lt;\/tile&gt;\r\n  &lt;\/msapplication&gt;\r\n&lt;\/browserconfig&gt;<\/code><\/pre>\n<p>New Metro UI comes with a new set of guidelines, like the &#8220;white silhouettes&#8221; used by most of the builtin apps.<\/p>\n<figure>\n  <img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/w8.png\" data-recalc-dims=\"1\" \/><figcaption>Web site tile in Windows 8 desktop<\/figcaption><\/figure>\n<h3>Question: What is the size of the <code>square150x150logo<\/code> tile picture?<\/h3>\n<ul>\n<li><strong>A: 150&#215;150.<\/strong> Can&#8217;t you read?<\/li>\n<li><strong>B: Something else.<\/strong>\n<\/ul>\n<p><strong>Answer: B, 270&#215;270.<\/strong> <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ie\/dn455106(v=vs.85).aspx\" rel=\"noopener\">Microsoft recommends larger sizes<\/a> to support high density screen.<\/p>\n<hr>\n<p>Congratulations, you completed the quiz! How did you do?<\/p>\n<p>The point of these questions was to point out how tricky this topic truly is, despite its apparent simplicity. The time when favicon was a single <code>favicon.ico<\/code> file is long gone. But old habits persist and lead to absurd situations. We can spend days on a super neat responsive design, yet dropping only a 57&#215;57 Apple Touch icon, just suitable for old devices barely used nowadays.<\/p>\n<hr>\n<h3>A favicon generator for the mobile era<\/h3>\n<p>In 2014, creating a multi-platform favicon is complex and hard to get done right. Sure, you can get a decent result with <code>favicon.ico<\/code>, a 32&#215;32 PNG icon and a 152&#215;152 <code>apple-touch-icon.png<\/code> in the root of your web site. But it can take more than a dozen of picture to get the job done. Unless we work on a huge project with according budget, we usually do not have so much time to spend on this small task.<\/p>\n<p>As the author of RealFaviconGenerator, let me give you a wise advice: use <a href=\"http:\/\/realfavicongenerator.net\/\" rel=\"noopener\">RealFaviconGenerator<\/a>. Unlike the regular favicon generators around, it fills two needs.<\/p>\n<p><strong>Different platforms involve different UIs.<\/strong> While it is certainly not an online version of Photoshop, RealFaviconGenerator offers a few settings to design decent icons for various platforms. Like an opaque background for iOS (Apple prevents transparent icons) or a white silhouette for Windows 8.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/rfg_editor.png\" data-recalc-dims=\"1\" \/><figcaption>RealFaviconGenerator editor<\/figcaption><\/figure>\n<p><strong>Generate all the pictures and HTML code<\/strong> you need to cover major platforms: PC\/Mac, iOS, Android, Windows 8, etc. <a href=\"http:\/\/realfavicongenerator.net\/favicon_compatibility\" rel=\"noopener\">The generated pictures and code were extensively tested<\/a> to make sure that the service keeps its promise.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/rfg_result.png\" data-recalc-dims=\"1\" \/><figcaption>Ready-to-use pictures and HTML code<\/figcaption><\/figure>\n<p>For example, by submitting a high resolution icon, I was able to generate this set of icons in a few clicks.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/rfg.png\" data-recalc-dims=\"1\" \/><figcaption>The kind of favicon set RealFaviconGenerator can generate in a few seconds.<\/figcaption><\/figure>\n<p>Now it&#8217;s as easy as it was 10 years ago: make a graphic and 5 minutes later you have your up-to-date favicon at work.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) such that you are covered with the best quality output everywhere. Spoiler alert: it&#8217;s a lot of different graphics and markup. Also full disclosure: Philippe has built [&hellip;]<\/p>\n","protected":false},"author":248392,"featured_media":281225,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/favicons.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":355780,"url":"https:\/\/css-tricks.com\/favicons-how-to-make-sure-browsers-only-download-the-svg-version\/","url_meta":{"origin":179442,"position":0},"title":"Favicons: How to Make Sure Browsers Only Download the SVG Version","date":"November 5, 2021","format":false,"excerpt":"\u0160ime Vidas DM'd me the other day about this thread from subzey on Twitter. My HTML for favicons was like this: <!-- Warning! Typo! --> <link rel=\"icon\" href=\"\/favicon.ico\" size=\"any\"> <link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\"> The attribute size is a typo there, and should be sizes. Like this: <!-- Correct --> <link\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343598,"url":"https:\/\/css-tricks.com\/svg-favicons-in-action\/","url_meta":{"origin":179442,"position":1},"title":"SVG Favicons in Action","date":"July 9, 2021","format":false,"excerpt":"Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have. But does your website actually use one? The task is more non-trivial than you might think. As we will see in this article, creating a useful SVG favicon involves editing an SVG\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/light-dark-mode-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341163,"url":"https:\/\/css-tricks.com\/dynamic-favicons-for-wordpress\/","url_meta":{"origin":179442,"position":2},"title":"Dynamic Favicons for WordPress","date":"May 28, 2021","format":false,"excerpt":"Typically, a single favicon is used across a whole domain. But there are times you wanna step it up with different favicons depending on context. A website might change the favicon to match the content being viewed. Or a site might allow users to personalize their theme colors, and those\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/dynamic-favicon-svg-wordpress.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306644,"url":"https:\/\/css-tricks.com\/svg-favicons-and-all-the-fun-things-we-can-do-with-them\/","url_meta":{"origin":179442,"position":3},"title":"SVG, Favicons, and All the Fun Things We Can Do With Them","date":"April 24, 2020","format":false,"excerpt":"Favicons are the little icons you see in your browser tab. They help you understand which site is which when you\u2019re scanning through your browser\u2019s bookmarks and open tabs. They\u2019re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/svg-favicons-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305613,"url":"https:\/\/css-tricks.com\/emoji-as-a-favicon\/","url_meta":{"origin":179442,"position":4},"title":"How To Use an Emoji as a Favicon Easily","date":"March 24, 2020","format":false,"excerpt":"With just a simple one-liner of code you can use any emoji as a favicon of your website. \ud83d\ude03","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/favicon-emoji-svg.png?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305353,"url":"https:\/\/css-tricks.com\/different-favicon-for-development\/","url_meta":{"origin":179442,"position":5},"title":"Different Favicon for Development","date":"March 23, 2020","format":false,"excerpt":"I bet a lot of us tend to have the production website and the development website up simultaneously a lot. It's almost a developer clich\u00e9 at this point to make some local change, refresh, refresh, refresh, refresh, and just not see the change, only to discover you were looking at\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/favicons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/favicons.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/179442"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248392"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=179442"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/179442\/revisions"}],"predecessor-version":[{"id":281226,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/179442\/revisions\/281226"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/281225"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=179442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=179442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=179442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}