Using a CSS cursor to show the external link's favicon

How do you know where this link goes to?

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

Can we improve the experience for users? Here's an attempt.

Try hovering your cursor over this link to a popular website.

This is what it should look like:

Here's how it works.

Cursor Styles

CSS allows us to change the icon displayed by a cursor. There are dozens of built-in icons, but you can also supply your own image file.

 CSS#link {

   cursor: url("/path/to/image.png"), auto;

}

Anything hovering over that link will get that .png as its cursor. Nifty!

Favicons

Most websites have a Favicon - 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 /favicon.ico - but can be in a variety of places.

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

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 https://icons.duckduckgo.com/ip9/google.com.ico

Putting it all together

You can put the CSS anywhere - including inline with your links:

 HTML<a

  href="https://google.com/"

  style='cursor:url("https://icons.duckduckgo.com/ip9/google.com.ico"), auto;'

>Visit this website</a>!

Is this a good idea?

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.

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

It doesn't work on mobile.

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

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

A site could lie to you about its destination.

Automating it should be possible, but it could be a bit of a faff to maintain.

But it looks so pretty!