Making links color and icons from favicon

Recently I came across an interesting JS library for formatting links in the text. The idea may not be new ... but overall such a scheme seems interesting and user-friendly to me.

Пример

The bottom line is that the favicon of the site to which it leads is added to the link script. And also, different types of links are highlighted in different colors.



If in more detail, then the links in the text are made out:
  • In a different color (style), depending on where the link leads ... internal link, link to a subdomain, external, anchor or link to an email address. The user can immediately see where he goes without pointing to the link.
  • Also, depending on the type, an icon is added in front of the link:
    - For internal links and subdomains - a pre-set picture. Or a file type icon if the link leads to a file.
    - For external links - the favicon icon of the site where the link goes. The host of the link is favicon, if it isn’t, the picture is defaulted. If favicon is recognizable, then the destination site is immediately clear. For example, Яндекс search in Yandex or in image Google .
    - For file links, the corresponding file icon. There is an array with a set of extensions and their corresponding icons. It works, of course, only with a direct link to the file.
    - For the mail link and anchor also have their own icons.

Script
Example
To use, just include the js-file on the page:
  1. < script type ="text/javascript" src ="http://oopstudios.com/dlink/dlink.js" ></ script >


And add the desired text to the block with the "dlink" class:
  1. < div class ="dlink" >
  2. ваш < a href="#" > ссылка < /a > текст...
  3. </ div >


Styles for different types of links:
  1. a.internal {color: #D47700;}
  2. a.external {color: #0074D4;}
  3. a.subdomain {color: #D43500;}
  4. a.email   {color: #00B235;}


In principle, it’s easy to write something like this for yourself or modify this script by adding pictures to different types of links on your site. For example, links to news or to a user profile.
I thought it was probably easier to do such a thing on the server, but there is a problem that when checking for the presence of favicon on an external resource, the answer can be quite a long one. In this regard, the implementation on the client does not cause any problems.