How to set the favicon of website?

[Ori]

Question Description

Raw Text of this tiddler

* EventCatcherWidget [[EventCatcherWidget: TiddlyWiki — a non-linear personal web notebook|https://tiddlywiki.com/static/EventCatcherWidget.html]]
* VimPlugin [[sukima/vim-tiddlywiki: TiddlyWiki syntax/file plugin - Forked and modified|https://github.com/sukima/vim-tiddlywiki]]

Check this image:

Seem two external links first one “lock” as favicon, second one is the web favicon just the symbol of github.

But The first link still have favicon why it can’t shows out?

How to make the first url shows the favicon too?

What should I do if I want to solve this by myself?

One More question, how to solve this type of problem by myself.
I try to check the source code of these two links but no difference,

<a href="https://github.com/sukima/vim-tiddlywiki" class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer">sukima/vim-tiddlywiki: TiddlyWiki syntax/file plugin - Forked and modified</a>


<a href="https://github.com/sukima/vim-tiddlywiki" class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer">sukima/vim-tiddlywiki: TiddlyWiki syntax/file plugin - Forked and modified</a>

so I can’t step forward. Hope someone could give me some guide, thank you.

[boris]

I bet you’re running the Font Awesome plugin – which includes link decoration:

Different document types can be styled here:

You can look at the plugin to see how it defines different kinds of external links (extlinks):

The default shows a “lock” for https and and arrow for unsecure http. Since most web content is all https, I just made it so they are both arrows.

[telumire]

If you want more favicons than what the fontawesome plugin provide, you can use SVG tiddlers as favicon for your links.

demo: TiddlyTweaks — Small tweaks for TiddlyWiki

This will give you something like this (you can of course tweak it) :

Relevant thread : Trick to convert the core images to SVG image for CSS background

You can also use jpg or png instead of svg, see https://tiddlywiki.com/static/datauri%20Macro%20(Examples).html

Let me know if you need help

[Ori]

Hi, I copied some your code.
And make my own. And I export your $:/ThemeTweaks/svg/url to my tiddlywiki.

a[href^="https://"][href*="github.com"]:before, a[href^="http://"][href*="github.com"]:before {<$vars svg="$:/core/images/cancel-button">{{||$:/ThemeTweaks/svg/url}}</$vars>}

But still not work how to fix it?

— update —
I copy the tiddler $:/plugins/TheDiveO/FontAwesome/styles/extlinks/GitHub, and change it to

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html


a[href^="https://"][href*="github.com"]:before, a[href^="http://"][href*="github.com"]:before {
  content: url(<<datauri "$:/core/images/globe">>);
}

Still not work, why?

[telumire]

@Ori

a[href^="https://"][href*="github.com"]:before

There is an error with your CSS selector, you should use this:

a[href^="https://"]:before, [href*="github.com"]:before, a[href^="http://"]:before,[href*="github.com"]:before 

But

content: url(<<datauri "$:/core/images/globe">>);

still wont work because

1. content is for displaying text, you should use background-image to use an image uri
2. $:/core/images/globe doesnt have a proper namespace set (the xmlns attribute is missing), that is why I use $:/ThemeTweaks/svg/url :

<$vars svg="$:/core/images/globe">{{||$:/ThemeTweaks/svg/url}}</$vars>

Will generate the following uri :

Thus the correct code is :

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

a:not([href^="#"],.tc-tiddlylink):before{
    content: " ";
    margin-right:.5ch;
    display: inline-block;
    height:1em;
    width:1em;
    background: center / contain no-repeat var(--url);
}


<$vars fill="external-link-foreground">

a:not([href^="#"],.tc-tiddlylink):before{
<$vars svg="$:/core/images/globe">{{||$:/ThemeTweaks/svg/url}}</$vars>
}

</$vars>

<$vars fill="external-link-foreground-visited">

a:not([href^="#"],.tc-tiddlylink):visited:before{
<$vars svg="$:/core/images/globe">{{||$:/ThemeTweaks/svg/url}}</$vars>
}

</$vars>

<$vars fill="external-link-foreground-hover">

a:not([href^="#"],.tc-tiddlylink):hover:before{
<$vars svg="$:/core/images/globe">{{||$:/ThemeTweaks/svg/url}}</$vars>
}

</$vars>

Result :

PS: note that if you dont want to use another tiddler ($:/ThemeTweaks/svg/url), and prefer a “one tiddler only” solution that you can simply drag&drop, you can use this (I made slight improvements to this one) :

a:not([href^="#"],.tc-tiddlylink):before{
    content: " ";
    margin-right:.5ch;
    display: inline-block;
    height:1em;
    width:1em;
    background: center / contain no-repeat;
}

<$vars
svg="$:/core/images/globe"
fill-filter="[{$:/palette}getindex<fill>]~[{$:/palettes/Vanilla}getindex<fill>]~[[$:/config/DefaultColourMappings/]addsuffix<fill>get[text]]~[<fill>]"
uri="""[[background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22pt" height="22pt" fill="]][subfilter<fill-filter>][[">]][subfilter<svg>get[text]][[</svg>');]]+[join[]search-replace:m[#],[%23]]"""
>

<$vars fill="external-link-foreground">
a:not([href^="#"],.tc-tiddlylink):before{<$text text={{{ [subfilter<uri>] }}}/>}
</$vars>

<$vars fill="external-link-foreground-visited">
a:not([href^="#"],.tc-tiddlylink):visited:before{<$text text={{{ [subfilter<uri>] }}} />}
</$vars>

<$vars fill="external-link-foreground-hover">
a:not([href^="#"],.tc-tiddlylink):hover:before{<$text text={{{ [subfilter<uri>] }}} />}
</$vars>
</$vars>

Do not forget the $:/tags/Stylesheet tag !

[Ori]

Can’t thank you more~ Really learn a lot from your post.

[Ori]

Hi sorry to bother you again.

I want to change the image a little bigger

I change the

width and height To 30pt, 30pt.
But nothing happens.

And I check the developer tool of style. Seems the size is locked somewhere but I don’t know how to find it. Maybe overwrite the setting in this css file.

[TiddlyTweeter]

@Ori

I want to change the image a little bigger
I change the width and height To 30pt, 30pt.
But nothing happens.

I feel your pain . The issue is that an SVG is not a bitmap image. It is a co-ordinate system that translates the “viewbox” size to the “canvas” size. I don’t have time to explain how to change the ViewBox settings in an SVG but that is something to look at. Here is a basic illustration … TW Icons: Not All Libraries Pad Icons The Same ... · Discussion #2 · morosanuae/tw-icons · GitHub

Good luck!
TT

[Ori]

Thank you for your help just a simple guide for me is enough

[telumire]

I used 22pt because it’s the size tiddlywiki use for its icons, using this on the outer svg make the inner svg take the full width and height of the outer svg.

To modify the size of the icon you need to modify this part (in my previous reply) :

a:not([href^="#"],.tc-tiddlylink):before{
    content: " ";
    margin-right:.5ch;
    display: inline-block;
    height:2em; /* --> this is the height of the icon*/
    aspect-ratio:1/1; /* --> square : height = width */
    background: center / contain no-repeat;
}

Instead of aspect-ratio:1/1; you can use width:2em, using aspect ratio remove the need to set the width manually since all the tiddlywiki core icon are square.

If you want to be able to modify the size with inline css, use a css variable :

a:not([href^="#"],.tc-tiddlylink){
    `--icon-size:1em;`
}

a:not([href^="#"],.tc-tiddlylink):before{
    content:" ";
    margin-right:.5ch;
    display: inline-block;
    `height:var(--icon-size);`
    aspect-ratio:1/1;
    background: center / contain no-repeat;
}

Then you can change the size with an inline style :

<a href="https://tiddlywiki.com/" style="--icon-size:3em;">
Link with a big icon
</a>

<a href="https://tiddlywiki.com/" style="--icon-size:12px;">
Link with a small icon
</a>

[Ori]

Thank you. I should read your posts carefully then ask, thank you for your time

[telumire]

No worries, CSS alone can be tricky to understand so with TW features it’s yet another layer of complexity ! Glad to be of help.