So everybody loves links right? They take us to places we want to go.
Who wouldn't like them!
But they can be boring.🥱💤
Sure you can style them or manually get an image to show what the site is but why not get the websites own logo by using the Favicon from the link site and display it as well using the same url as the link? This would be pretty handy if we were creating links dynamically from a list eg [link1,link2,link3] ...
We'll create a sample using a hardcoded value - 'https://dev.to/', but you can iterate over list of urls if you want. The only difference will be that you will be injecting the link.
We need to create two elements within the
a tag - one for the image , the other for the link text. You can see the HTML needed below.
<a class="link-item" href="https://dev.to/" > <span class="link-image"> <img src="" width="25" height="25" /> </span> <span class="link-text"> www.dev.to </span> </a>
For the image source we can try two things:
1.Set the source as 'https://dev.to/favicon.ico' - the favicon can typically be found at the site root.
2.We can use Googleusercontent.com, which is a site that Google is using for a few things ,including storing website favicons visited by the search engine. Just use this as the source, set the domain value with the website url 'https://s2.googleusercontent.com/s2/favicons?domain=www.dev.to'
We can do that with the below:
<img src="https://dev.to/favicon.ico" onerror="this.onerror=null; this.src='https://s2.googleusercontent.com/s2/favicons?domain=www.dev.to'" alt="Dev.to" width="25" height="25" />
The purpose of adding
this.onerror=null; within the onerror event is to prevent an endless loop of errors if both fail.
That's it , its pretty simple !! Go congratulate yourself because your links look better already 🎉🎉
You can see a JSFiddle demo here