Custom Link "favicons" - hiding in Community Plugins

Share & showcase
1

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

2 Likes
2

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

Do you design the svgs by hand?

3

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
4

Thanks!

5

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.

6

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.

7

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.

8

Is this still how you generate your favicons today?