How can I get a web site's favicon?

Simple enough question: I've create a small app that is basically just a favourites that sits in my system tray so that I can open often-used sites/folders/files from the same place. Getting the default icons from my system for known file types isn't terribly complicated, but I don't know how to get the favicon from a website. (SO has the grey->orange stack icon in the address bar for instance)

Does anyone know how I might go about that?

You'll want to tackle this a few ways:

Look for the favicon.ico at the root of the domain

www.domain.com/favicon.ico
Look for a <link> tag with the rel="shortcut icon" attribute

<link rel="shortcut icon" href="/favicon.ico" />
Look for a <link> tag with the rel="icon" attribute

<link rel="icon" href="/favicon.png" />

The latter two will usually yield a higher quality image.

Just to cover all of the bases, there are device specific icon files that might yield higher quality images since these devices usually have larger icons on the device than a browser would need:

<link rel="apple-touch-icon" href="images/touch.png" />

<link rel="apple-touch-icon-precomposed" href="images/touch.png" />

And to download the icon without caring what the icon is you can use a utility like http://www.google.com/s2/favicons which will do all of the heavy lifting:

var client = new System.Net.WebClient();

client.DownloadFile(
    @"http://www.google.com/s2/favicons?domain=stackoverflow.com",
    "stackoverflow.com.ico");

Hope that helps!

Blowsie

Here are 2 options , I tested over 100 urls and got different results which each option. Please note, this solution is not c#, but c# may not be necessary.

<img height="16" width="16" src='http://grabicon.com/edocuments.co.uk' />

<img height="16" width="16" src='http://www.google.com/s2/favicons?domain=www.edocuments.co.uk' />

You can use Google S2 Converter.

http://www.google.com/s2/favicons?domain=google.com

Source: http://www.labnol.org/internet/get-favicon-image-of-websites-with-google/4404/

The first thing to look for is /favicon.ico in the site root; something like WebClient.DownloadFile() should do fine. However, you can also set the icon in metadata - for SO this is:

<link rel="shortcut icon"
   href="http://sstatic.net/stackoverflow/img/favicon.ico">

and note that alternative icons might be available; the "touch" one tends to be bigger and higher res, for example:

<link rel="apple-touch-icon"
   href="http://sstatic.net/stackoverflow/img/apple-touch-icon.png">

so you would parse that in either the HTML Agility Pack or XmlDocument (if xhtml) and use WebClient.DownloadFile()

Here's some code I've used to obtain this via the agility pack:

var favicon = "/favicon.ico";
var el=root.SelectSingleNode("/html/head/link[@rel='shortcut icon' and @href]");
if (el != null) favicon = el.Attributes["href"].Value;

Note the icon is theirs, not yours.

It's a good practice to minimize the number of requests each page needs. So if you need several icons, yandex can do a sprite of favicons in one query. Here is an example http://favicon.yandex.net/favicon/google.com/stackoverflow.com/yandex.net/

Yo can get the favicon URL from the website-s HTML.

Here is the favicon tag:

<link rel="icon" type="image/png" href="/someimage.png" />

You should use a regular expression here. If no tag found, look for "favicon.ico" in the site root directory. If nothing found, the site does not have a favicon.

        HttpWebRequest w = (HttpWebRequest)HttpWebRequest.Create("http://stackoverflow.com/favicon.ico");

        w.AllowAutoRedirect = true;

        HttpWebResponse r = (HttpWebResponse)w.GetResponse();

        System.Drawing.Image ico;
        using (Stream s = r.GetResponseStream())
        {
            ico = System.Drawing.Image.FromStream(s);
        }

        ico.Save("favicon.ico");

You can do it without programming. Just open the web site, right-click and select "view source" to open the HTML code of that site. Then in the text editor search for "favicon" - it will direct you to something looking like

<link rel="icon" href='/SOMERELATIVEPATH/favicon.ico' type="image/x-icon" />

take the string in href and append it to the web site's base URL (let's assume it is "http://WEBSITE/"), so it looks like

http://WEBSITE/SOMERELATIVEPATH/favicon.ico

which is the absolute path to the favicon. If you didn't find it this way, it can be as well in the root in which case the URL is http://WEBSITE/favicon.ico.

Take the URL you determined and insert it into the following code:

<html>
  <head>
   <title>Capture Favicon</title>   
  </head>
  <body>
    <a href='http://WEBSITE/SOMERELATIVEPATH/favicon.ico' alt="Favicon"/>Favicon</a> 
  </body>
</html>

Save this HTML code locally (e.g. on your desktop) as GetFavicon.html and then double-click on it to open it. It will display only a link named Favicon. Right-click on this link and select "Save target as..." to save the Favicon on your local PC - and you're done!

This is a late answer, but for completeness: it is pretty difficult to get even close to 90% of fetching all favicons.

A while ago I wrote a WordPress plugin: http://wordpress.org/extend/plugins/wp-favicons/ which attempts to get closer.

a. it starts by looking at favicon repositories such as google favicons, getfavicons etc...

b. if none of them return an icon (i check this by matching with the default icon they return) i start by attempting to get the icon myself

c. this involves traversing the pages but also checking redirects with NO autoredirect as well as traversing 404's because also on 404's an icon could be present. In the end it means that you will have to parse also redirects in the html header as well as javascript redirects to get closer to being 100%

d. after that i do some inspections on the physical image file, because also sometimes on some servers (i tested 300.000+) files get returned with the incorrect mime type etc..

The code is still not perfect because in the details it gets crazy, you will find many weird situations: people have wrongly coded paths (img/favicon.ico where img is NOT in the root), duplicate headers in html output, different server responses from a head and body etc...

the core of the fetching part is here: http://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php so you can reverse engineer it but be aware that validating the response should really be done (checking image filetype, mime etc..)

I've found that the 'SHGetFileInfo' (Check 'www.pinvoke.net' for the signature) lets you retrieve a small or large icon, just as if you were dealing with a file/folder/Shell item.

Jens ;)

http://realfavicongenerator.net/favicon_checker?site=http://stackoverflow.com gives you favicon analysis stating which favicons are present in what size. You can process the page information to see which is the best quality favicon, and append it's filename to the URL to get it.

aloisdg

You can use Getfv.co :

To retrieve a favicon you can hotlink it at... http://g.etfv.co/[URL]

Example for this page : http://g.etfv.co/https://stackoverflow.com/questions/5119041/how-can-i-get-a-web-sites-favicon

Download content and let's go !

Edit :

Getfv.co and fvicon.com look dead. If you want I found a non free alternative : grabicon.com.

Using jquery

var favicon = $("link[rel='shortcut icon']").attr("href") ||
              $("link[rel='icon']").attr("href") || "";

来源：https://stackoverflow.com/questions/5119041/how-can-i-get-a-web-sites-favicon

标签

.net-4.0

favicon