favicon.ico CSS: Add Icon to Links

CSS: Add Icon to Links

By Xah Lee. Date: . Last updated: .

You can add a little icon to links to indicate what type of link it is.

For example, suppose you have links to Twitter like this:

<a href="https://x.com/xah_lee">Xah Lee</a>

And you want browser to show a icon, like this

xcom link icon 2024-08-05
xcom link icon 2024-08-05

https://x.com/xah_lee

Instead of using a img tag for each link, you should use CSS to add them, by matching the URL.

Code

a[href*="x.com/"] {
 background: url("i/x.com_favicon.ico") no-repeat left center;
 padding-left: 38px;
}

CSS, Background Image

CSS, Advanced