{"id":17083,"date":"2012-05-26T10:28:26","date_gmt":"2012-05-26T17:28:26","guid":{"rendered":"http:\/\/css-tricks.com\/?p=17083"},"modified":"2020-08-31T10:56:28","modified_gmt":"2020-08-31T17:56:28","slug":"favicons-next-to-external-links","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/favicons-next-to-external-links\/","title":{"rendered":"Favicons Next To External Links"},"content":{"rendered":"\n<p>Unless we make a custom CSS selector for every single site we want to do this for, CSS isn&#8217;t capable of yanking the <code>href<\/code> off links and using it to plant a favicon next to the link. But if we involved a smidge of JavaScript, we can get it done.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"the-i-wish-css-only-technique\">The &#8220;I Wish&#8221; CSS Only Technique<\/h3>\n\n\n<p>What would be nice is if you had simple semantic HTML like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"https:\/\/github.com\">GitHub&lt;\/a><\/code><\/pre>\n\n\n\n<p>And then you could access everything you needed to insert a background image of the favicon using a service like <a href=\"http:\/\/getfavicon.appspot.com\/\" rel=\"noopener\">getFavicon<\/a>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Fair warning, this doesn't work *\/\n\na[href^=\"http:\/\/\"]::before {\n  content: url(https:\/\/g.etfv.co\/ + attr(href));\n}<\/code><\/pre>\n\n\n\n<p>Maybe the syntax wouldn&#8217;t be exactly like that, but something like it. The point is, you can&#8217;t mix up the url() syntax into parts like that in CSS.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"googles-favicon-service\">Google&#8217;s Favicon Service<\/h3>\n\n\n<p><del>Google has it&#8217;s own favicon service you can use.<\/del> For example:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">https:\/\/www.google.com\/s2\/u\/0\/favicons?domain=css-tricks.com<\/code><\/pre>\n\n\n\n<div class=\"explanation\">Update: thats broken now. You can use <a href=\"http:\/\/grabicon.com\/\" rel=\"noopener\">Grabicon<\/a> instead now though.<\/div>\n\n\n\n<div class=\"explanation\">Update: Grabicon requires a referrer apparently now which makes it fail in a variety of circumstances. Heidi Pungartnik pointed out Google&#8217;s service still exists, it&#8217;s just moved URL&#8217;s slightly. Example: <a href=\"https:\/\/www.google.com\/s2\/favicons?domain=css-tricks.com\">https:\/\/www.google.com\/s2\/favicons?domain=css-tricks.com<\/a><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_emRayE\" src=\"\/\/codepen.io\/anon\/embed\/emRayE?height=450&amp;theme-id=1&amp;slug-hash=emRayE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed emRayE\" title=\"CodePen Embed emRayE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"automating\">Automating<\/h4>\n\n\n<p>The trick is you need just the hostname and <abbr title=\"top level domain\">TLD<\/abbr> and nothing else. I searched around and found a simple regex for getting that from any URL. We&#8217;ll need that because links aren&#8217;t always (or even usually) the root of sites.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function getDomain(url) {\n  return url.match(\/:\\\/\\\/(.[^\/]+)\/)[1];\n}<\/code><\/pre>\n\n\n\n<p>Using these things, and jQuery, we&#8217;ll find all links and apply the favicon as a background image. The external link checking is pretty rudimentary, but there are <a href=\"https:\/\/css-tricks.com\/snippets\/jquery\/target-only-external-links\/\">more robust methods here<\/a> if need be.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">$(\"a[href^='http']\").each(function() {\n  $(this).css({\n    background: \"url(http:\/\/www.google.com\/s2\/favicons?domain=\" + getDomain(this.href) + \") left center no-repeat\",\n    \"padding-left\": \"20px\"\n  });    \n});<\/code><\/pre>\n\n\n\n<p>Then <a href=\"https:\/\/twitter.com\/travis\/status\/206423627258806274\" rel=\"noopener\">@travis reminded me<\/a> that you can just use <code>this.hostname<\/code> instead of the fancy regex. So:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/* Nothing else needed *\/\n$(\"a[href^='http']\").each(function() {\n  $(this).css({\n    background: \"url(https:\/\/www.google.com\/s2\/favicons?domain=\" + this.hostname + \") left center no-repeat\",\n    \"padding-left\": \"20px\"\n  });    \n});<\/code><\/pre>\n\n\n\n<p>I&#8217;m not sure what the browser support is for <code>hostname<\/code>, whether it&#8217;s just as good as <code>href<\/code> or less so, not sure.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"getfavicon-method\">getFavicon Method<\/h3>\n\n\n<div class=\"explanation\">Update: This service appears to be gone. Just leaving up for posterity.<\/div>\n\n\n\n<p><a href=\"https:\/\/twitter.com\/seanodotcom\/status\/206412314004553728\" rel=\"noopener\">@seanodotcom showed me<\/a> another similar service galled <a href=\"http:\/\/getfavicon.appspot.com\/\" rel=\"noopener\">getFavicon<\/a>.<\/p>\n\n\n\n<p>It&#8217;s hosted by Google AppEngine, but it&#8217;s not Google&#8217;s own service. I did find it a bit slower. But the advantage being that you don&#8217;t need to deal with host names at all, you just give them the full URL.<\/p>\n\n\n\n<p>So then it becomes:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">$(\"a[href^='http']\").each(function() {\n    $(this).css({\n        background: \"url(https:\/\/g.etfv.co\/\" + this.href + \") left center no-repeat\",\n        \"padding-left\": \"20px\"\n    });\n});\u200b<\/code><\/pre>\n\n\n\n<p><a class=\"button\" href=\"http:\/\/codepen.io\/css-tricks\/pen\/dCGAt\" rel=\"noopener\">View Demo<\/a><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"performance\">Performance?<\/h3>\n\n\n<p>As I&#8217;m sure you know, the number of HTTP requests a page makes is a huge deal in performance. Each little image in these techniques are one page request each.<\/p>\n\n\n\n<p><a href=\"https:\/\/twitter.com\/yuritkachenko\/status\/206425269588869120\" rel=\"noopener\">@yuritkanchenko pointed out to me<\/a> a cool favicon service that can automatically sprite the favicons for you so you can keep it to one request.<\/p>\n\n\n\n<p>For instance:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">http:\/\/favicon.yandex.net\/favicon\/google.com\/yandex.ru\/css-tricks.com<\/code><\/pre>\n\n\n\n<p>I&#8217;m afraid I didn&#8217;t go the extra mile here and write the JavaScript needed to find all links, concatenate the domains, make the request, and then apply the images as a sprite, but I&#8217;m sure you could whip that up pretty quick if you really needed it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A couple of techniques and food for thought around the idea of adding a favicon next to links on websites.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":[610,265],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":305613,"url":"https:\/\/css-tricks.com\/emoji-as-a-favicon\/","url_meta":{"origin":17083,"position":0},"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":333640,"url":"https:\/\/css-tricks.com\/how-to-favicon-in-2021\/","url_meta":{"origin":17083,"position":1},"title":"How to Favicon in 2021","date":"February 10, 2021","format":false,"excerpt":"I always appreciate someone looking into and re-evaluating the best practices of something that literally every website needs and has a complex set of requirements. Andrey Sitnik has done that here with favicons. The final suggestion: <link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"any\"><!-- 32\u00d732 --> <link rel=\"icon\" href=\"\/icon.svg\" type=\"image\/svg+xml\"> <link rel=\"apple-touch-icon\" href=\"\/apple-touch-icon.png\"><!-- 180\u00d7180\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":343598,"url":"https:\/\/css-tricks.com\/svg-favicons-in-action\/","url_meta":{"origin":17083,"position":2},"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":306644,"url":"https:\/\/css-tricks.com\/svg-favicons-and-all-the-fun-things-we-can-do-with-them\/","url_meta":{"origin":17083,"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":341163,"url":"https:\/\/css-tricks.com\/dynamic-favicons-for-wordpress\/","url_meta":{"origin":17083,"position":4},"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":355780,"url":"https:\/\/css-tricks.com\/favicons-how-to-make-sure-browsers-only-download-the-svg-version\/","url_meta":{"origin":17083,"position":5},"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":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17083"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17083"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17083\/revisions"}],"predecessor-version":[{"id":320272,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17083\/revisions\/320272"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=17083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}