<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	     xmlns:dc="http://purl.org/dc/elements/1.1/"
	   xmlns:atom="http://www.w3.org/2005/Atom"
	     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>Using a CSS cursor to show the external link&#8217;s favicon &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Thu, 12 Dec 2024 09:37:59 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>Using a CSS cursor to show the external link&#8217;s favicon &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[Using a CSS cursor to show the external link's favicon]]></title>
		<link>https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/</link>
					<comments>https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/#comments</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Mon, 28 Oct 2024 12:34:18 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">https://shkspr.mobi/blog/?p=53652</guid>

					<description><![CDATA[How do you know where this link goes to?  If you&#039;re on a desktop, you might notice that hovering your mouse over it displays the destination somewhere on your screen. If you&#039;re a geek, you could view the source-code of a page.  Can we improve the experience for users? Here&#039;s an attempt.  Try hovering your cursor over this link to a popular website.  This is what it should look like:    Here&#039;s how …]]></description>
										<content:encoded><![CDATA[<p>How do you know where <a href="https://google.com">this link</a> goes to?</p>

<p>If you're on a desktop, you <em>might</em> notice that hovering your mouse over it displays the destination <em>somewhere</em> on your screen. If you're a geek, you could view the source-code of a page.</p>

<p>Can we improve the experience for users? Here's an attempt.</p>

<p>Try hovering your cursor over <a href="https://google.com/" style="cursor: url(&quot;https://icons.duckduckgo.com/ip9/google.com.ico&quot;), auto;">this link to a popular website</a>.</p>

<p>This is what it should look like:</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2024/10/hover-fs8.png" alt="A link with the Google logo hovering over it." width="500" height="46" class="aligncenter size-full wp-image-53656">

<p>Here's how it works.</p>

<h2 id="cursor-styles"><a href="https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/#cursor-styles">Cursor Styles</a></h2>

<p>CSS allows us to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor" style="cursor: url(&quot;https://icons.duckduckgo.com/ip9/developer.mozilla.org.ico&quot;), auto;">change the icon displayed by a cursor</a>.  There are dozens of built-in icons, but you can also <a href="https://drafts.csswg.org/css-ui/#cursor" style="cursor: url(&quot;https://icons.duckduckgo.com/ip9/w3.org.ico&quot;), auto;">supply your own image file</a>.</p>

<pre><code class="language-css">#link {
   cursor: url("/path/to/image.png"), auto;
}
</code></pre>

<p>Anything hovering over that link will get that .png as its cursor. Nifty!</p>

<h2 id="favicons"><a href="https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/#favicons">Favicons</a></h2>

<p>Most websites have <a href="https://en.wikipedia.org/wiki/Favicon" style="cursor: url(&quot;https://icons.duckduckgo.com/ip9/wikipedia.org.ico&quot;), auto;">a Favicon</a> - it is a little image that you see in your browser bar, or when you save a website to your favourites. It is usually found at <code>/favicon.ico</code> - but can be in a variety of places.</p>

<p>There are dozens of free and paid services which let you quickly grab a favicon from any site.</p>

<p>The one I tend to use is DuckDuckGo's service. It takes any domain name, like Google.com, and returns an icon. It looks like this <code>https://icons.duckduckgo.com/ip9/google.com.ico</code></p>

<h2 id="putting-it-all-together"><a href="https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/#putting-it-all-together">Putting it all together</a></h2>

<p>You can put the CSS anywhere - including inline with your links:</p>

<pre><code class="language-html">&lt;a
  href="https://google.com/"
  style='cursor:url("https://icons.duckduckgo.com/ip9/google.com.ico"), auto;'
&gt;Visit this website&lt;/a&gt;!
</code></pre>

<h2 id="is-this-a-good-idea"><a href="https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/#is-this-a-good-idea">Is this a good idea?</a></h2>

<p>Well… maybe? If you have lots of links to various destinations and don't want to clutter up your prose with "(Wikipedia)" or other things like that, it could be useful.</p>

<p>Not everyone will recognise the logo for every service - so it may not add anything useful.</p>

<p>It doesn't work on mobile.</p>

<p>This isn't a common UI pattern - which might be a little confusing for users.</p>

<p>Loading images from remote sites is <em>probably not</em> a security concern. But if a website is hacked, you might have unwanted images on your site.</p>

<p>A site could lie to you about its destination.</p>

<p>Automating it should be possible, but it could be a bit of a faff to maintain.</p>

<p>But it  <a href="https://disney.com/" style="cursor: url(&quot;https://icons.duckduckgo.com/ip9/disney.com.ico&quot;), auto;">looks</a>  <a href="https://openbenches.org/" style="cursor: url(&quot;https://icons.duckduckgo.com/ip9/openbenches.org.ico&quot;), auto;">so</a>  <a href="https://edent.tel/" style="cursor: url(&quot;https://icons.duckduckgo.com/ip9/edent.tel.ico&quot;), auto;">pretty</a>!</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=53652&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/feed/</wfw:commentRss>
			<slash:comments>6</slash:comments>
		
		
			</item>
	</channel>
</rss>
