Custom Link "favicons" - hiding in Community Plugins

I’m using CSS to style links to certain well-known sites (GitHub, Obsidian forum, Microsoft, Google etc) with a little favicon (encoded inline SVG), e.g.

image

Example CSS:

a[href*="obsidian.md"] {
  background-position: center right;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,%3Csvg height="60" viewBox="0 0 100 100" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3ClinearGradient id="a" gradientTransform="matrix(1 0 0 -1 -22.41 110.97)" gradientUnits="userSpaceOnUse" x1="82.85" x2="51.26" y1="30.41" y2="105.9"%3E%3Cstop offset="0" stop-color="%236c56cc"/%3E%3Cstop offset="1" stop-color="%239785e5"/%3E%3C/linearGradient%3E%3Cpath d="m62.61 0-31.7 17.52-12.91 27.93 19.57 45.02 27.78 9.53 5.09-10.2 10.56-63.41z" fill="%2334208c"/%3E%3Cpath d="m81 26.39-19.56-11.98-27.01 21.29 30.92 64.3 5.09-10.2z" fill="url(%23a)"/%3E%3Cpath d="m81 26.39-18.39-26.39-1.17 14.41z" fill="%23af9ff4"/%3E%3Cg fill="%234a37a0"%3E%3Cpath d="m61.44 14.41 1.17-14.41-31.7 17.52 3.52 18.18z"/%3E%3Cpath d="m34.43 35.7 3.14 54.77 27.78 9.53z"/%3E%3C/g%3E%3C/svg%3E');
  background-size: 17px;
  padding-right: 16px;
  padding-bottom: 3px;
}

This works pretty well, but I noticed that these icons also appear elsewhere in the UI, e.g. in the Community Plugins browser in the README’s etc.

I found that adding .markdown-preview-view:not(.community-plugin-readme) to the selector helps, but is there a better way? Because when I share styles among several URLs, it gets ugly and repetitive…

.markdown-preview-view a[href*="serverfault.com"],
.markdown-preview-view a[href*="stackexchange.com"],
.markdown-preview-view a[href*="stackoverflow.com"],
.markdown-preview-view a[href*="superuser.com"] { 
  background-position: center right;
  ...

any ideas? thanks

1 Like

I don’t think there is a more efficient way to do this.

Do you design the svgs by hand?

Ok, thanks. No I don’t design them by hand. I’ve just scavenged them from the corners of the internet. This site was enormously helpful in converting the raw SVG into the inline/CSS style format.

1 Like

Thanks!

Road Research had an add-in that produced favicons for all links. It was quite useful. I wonder if it could be re-purposed for Obsidian.

I definitely don’t want favicons for all my links. I just wanted a few of them to stand out. The purpose is: when staring at a large list of links for example, to easily spot which ones point to GitHub etc.

You can use the plugin “Icons” by Camilo Visini for manually attach icons in external links. You don’t need a CSS snippet for this.