HOW TO DOWNLOAD SPECIFICALLY THE TAB ICON FROM LINKS THAT BROWSERS SHOW?

[unreal whale]

UPDATE: ✅
#1279023272624652330 message
#1279023272624652330 message

I've noticed some links have a different icon instead of the website's favicon.

I'm trying to get what I see on the tab, not always the favicon. Like https://na.alienwarearena.com/ has an icon of an alien, but the favicon is like bigger and has text, the script below downloaded that instead of the tab icon.

I like decorating my folders for websites with icons from their website, I prefer the biggest size that all standard websites use so the icon size is consistent but big for the folders.

The download does not need to be .ico if the tab icons use a different format, for now just trying to get what I see from the tab.

I prefer to avoid installations, just one PowerShell script that can do that, but it can use C# or whatever is installed by default in Windows 11. Confidence that there isn't a way is helpful too for maybe considering alternatives, but I think since browsers can get the tab icon, so can PowerShell, code is code 01?.

Or maybe instructions to guide Copilot if You know an idea how to get it done?

Attempt:

[covert lion]

Your function assumes that the first <link rel="icon" /> element found is the favicon the browser will use - that's not necessarily the case https://stackoverflow.com/questions/53464667/best-practice-for-ordering-icon-link-tags-in-html-head

[unreal whale]

Got a solution, I would share it once certain parts are fixed

[carmine sigil]

Maybe just want to use the duckduckgo service: https://icons.duckduckgo.com/ip3/www.google.com.ico

[unreal whale]

That could be another simple solution
Though I prefer to get it directly, and that service didn't seem consistent for all websites since I got an arrow instead of the alien icon for this link
https://icons.duckduckgo.com/ip3/na.alienwarearena.com

[carmine sigil]

Yeah... Favicons in general is a mess. You will find hundreds of edge cases once you scale to a wider range of sites. And it's not even limited to the positioning. Alienware is a nice example. They link to a .png file extension but at least for Firefox they serve a webp image behind that link.

[twin flame]

https://gist.github.com/ninmonkey/17f6a1f5b28249b6cb2ba8bc746ae4fb
I tried going for a simple XPath / CSS Selector queries, it turned out pretty decent for each being essentially

My Code accidentally found large logos under the favicons/manifest.json

• https://na.alienwarearena.com/android-chrome-192x192.png
• https://na.alienwarearena.com/android-chrome-512x512.png

 ($Json = irm 'https://media.alienwarearena.com/images/favicons/manifest.json' ).Icons.Src | %{ 
     [Uri]::new( $Url,  $_).ToString() }

this block

$faviconUrl = [regex]::Match($response.Content, '<link rel=".*icon.*" href="([^"]+)"').Groups[1].Value

# Is can be a simple css query
$css_doc.QuerySelectorAll( 'link[rel*="icon"]' ).Href

Here's a ref for css queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

the same query works in browser dev tools

document.querySelectorAll( 'link[rel*="icon"]' )