179

When you browse a website, the "favicon" icon shows up in the tab or next to the URL (or next to the bookmark).

If I want that graphic, is there a way to download it directly from the site? I'd prefer to download it directly from the web, but if all else fails, I'll dig it out of wherever it is stored on my computer (Windows 7, Firefox 3.6.6).

11 Answers 11

237

Studiohack has the "thorough" approach but heres a short hack:

  1. Enter the domain name like https://superuser.com/(must end with '/')
  2. Add favicon.ico to the end
  3. Press enter (this should be in the URL: https://superuser.com/favicon.ico)
  4. Right click on the image and click "save image as"
4
  • The other answers are all awesome. I learned a lot, thank you. But, for my specific purposes, this is what I was looking for. Accepted. Jun 30, 2010 at 2:44
  • 2
    Well, except for sites like Wikia.
    – Hello71
    Jul 4, 2010 at 22:14
  • 11
    So simple yet genius.
    – khatchad
    Nov 23, 2012 at 19:28
  • Genius, really. I even could get a dead linked website's favicon from Internet Wayback Machine. See my example here web.archive.org/web/20190615152329/http://www.ubuntubuzz.com/…, it is an orange box with white "ub!" text written. Thanks a lot! Feb 21, 2020 at 7:13
67

by reading http://en.wikipedia.org/wiki/Favicon you can also find that:

The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera.[3]

<link rel="shortcut icon" href="http://www.example.com/myicon.ico" />

Additionally the following is also acceptable:

<link rel="shortcut icon" href="/somepath/myicon.ico" />

The following shows the supported format of link tags, using examples, for HTML and XHTML.

HTML:

<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico"> <link rel="icon" type="image/png" href="http://example.com/image.png"> <link rel="icon" type="image/gif" href="http://example.com/image.gif">

So, the common practice is indeed to put a file called 'favicon.ico' on the root folder, but to be sure, you have to lookup the source code of the served file and see if and what is defined there.

eg, for http://superuser.com it is

<link rel="shortcut icon" href="http://sstatic.net/su/favicon.ico"> 
3
  • 2
    I have found sites that don't store favicon.ico in the root folder, particularly on Wikia. But the above worked. Dec 28, 2012 at 18:19
  • 3
    opening inspect element on a page and searching ico should find it.
    – Qwertie
    Jun 27, 2017 at 4:13
  • This worked for me as well when looking for a client's icon on their public site to add to their SFTP server's HTTPS interface.
    – David Sain
    Jul 17, 2019 at 17:00
43

You can do this using Google S2 converter.

Here is the syntax : http://www.google.com/s2/favicons?domain=DomainName

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

5
  • 1
    great tool and faster than navigating to the specific favico url
    – Luca Steeb
    Oct 29, 2015 at 21:07
  • This is the only way worked for me.
    – Anixx
    Oct 5, 2016 at 8:40
  • 1
    THIS actually needs to be the answer! Because the accepted answer above assumes that the favicon file is always in the root directory, is always named "favicon" and is always in .ico format, which it is not always the case!. Someone mentioned somewhere that the request in the link @vamshi posted makes Google's S2 library to actually pull the favicon from the target website instead of displaying the cached one. But I would test it to be sure.
    – lightproof
    Dec 6, 2018 at 11:46
  • 5
    Nope, that does not work if the domain name is not google-reachable, which could be true inside private networks. May 7, 2019 at 23:25
  • Downloads the lowest quality icon for me. Aug 17, 2020 at 7:24
34

You can't always add /favicon.ico (eg. https://superuser.com/favicon.ico)
All of the answers are more complicated than necessary.

All you do is what is written here: http://www.itechcolumn.com/4-way-download-favicon-website/

  1. Go to the target site.
  2. View the page source (Right click on the page and click on "View Page source") - using firefox, may be slightly different in other browsers.
  3. Search (Ctrl+F) for "shortcut icon"
  4. You should see something like this:

    link rel="shortcut icon" href="http://www.sitename.com/images/thenameofthefavicon.ico"/>

  5. Right click on the link http://www.sitename.com/images/favicon.ico and save the icon. Or, open the page using the URL and save the page.

3
  • 6
    good advice! But not all sites specify it directly in the HTML, it can be inferred.. May 31, 2013 at 18:59
  • 1
    this worked when the /favicon.ico didn't. Thanks. Mar 8, 2016 at 22:16
  • rel is not always shortcut icon. It is often just icon. Feb 11 at 2:31
30

None of the previous answers worked for me as the site I needed the icon from was an internal site, did not expose it in the source, and did not allow appending /favicon.ico so I dug a bit more.

Chrome can reliably pull the favicon using this solution:

  1. Visit the site you want the favicon for
  2. Add 'chrome://favicon/' before the sites url.
  3. Right click on image
  4. Save image as...
1
  • This seems the most "correct" extraction method (if you're using Chrome), and unlike most of the other solutions, it heeds to favicons that change depending on if you're logged in or not
    – velkoon
    Jul 15, 2022 at 16:31
6

If you have JavaScript enabled, you could run this in the console :

(function() {
    var i=0;
    var arrLink = [];
    var found = 0;
    arrLink = document.getElementsByTagName('link');
    if (arrLink.length > 0) {
        for (i=0; i < arrLink.length; i++) {
            if (typeof arrLink[i].rel !== 'undefined' && arrLink[i].rel.indexOf('icon') > -1) {
                found = 1;
                window.open(arrLink[i].href);
            }
        }
        if (found === 0) {
            alert('favico Not Found');
        }
    } else {
        alert('favico Not Found');
    }
})();

Alternatively use the below code as a bookmark / paste in the URL :

javascript:(function(){var a=0,b=[],c=0,b=document.getElementsByTagName("link");if(0<b.length){for(a=0;a<b.length;a++)"undefined"!==typeof b[a].rel&&-1<b[a].rel.indexOf("icon")&&(c=1,window.open(b[a].href));0===c&&alert("favico Not Found")}else alert("favico Not Found")})();
5

In Firefox 3: Click the favicon, a popup appears, and you can click "more information"...in the window that pops up, go to the "Media" tab. Highlight the specific media item that you want (it shows a preview in the large, white space in the bottom of the window), then click "Save As". Give it a name, pick a location, and you're done! :)

Some sites may not have a favicon listed, but some will...hit or miss...try this on Super User...SU has a favicon listed...

1
  • 1
    This works the same in Firefox latest (ver 21) however, if the favicon is in the root of the site ala the IE default, it won't show up as media there! Because it is not specified directly in the HTML, it's implied. May 31, 2013 at 18:58
4

The favicon url maybe different from www.example.com/favicon.ico.

Simply right click on page and click on View Page Source, then you can find the favicon link in head tag!

e.g. :

<link href="/MyFavicon.ico" type="image/x-icon" rel="shortcut icon"/>
2

All you need to do in Firefox is click the ico image in the URL, click "More Information", then click the "Media" button. Favicon.ico is usually the first one in the list and already highlighted, but if it isn't, scroll down and then click the "Save As" button.

By the way, since Firefox 16, ico images don't display in the URL field anymore, but do in each tab and can be grabbed in the same way.

1
  • This appears to not be true any more. The favicon only appears on the tab. The URL box icon is a globe that only gives information about site security and permissions Feb 16, 2017 at 11:03
1

Try this bit of PHP which grabs the favicon and saves it as an .ico file. You could probably use this to grab almost any file. Note the use of the 'b' for 'binary' flag.

<?php
    echo '<p>Fetching Favicon.ico.</p>';
    $in = fopen('http://targetdomain.com/favicon.ico', 'rb');
    $contents = '';
    while (!feof($in)) {
        $contents .= fread($in, 8192);
        }
    fclose($in);
    $len = strlen($contents);
    echo '<p>Read ' . $len . ' bytes.</p>';

    $out = fopen('favicon.ico', 'wb');
    fwrite($out, $contents, $len);
    fclose($out);
    echo '<p>Written Favicon.ico.</p>';
?>
1
  • 1
    This might be work but its pretty overkill and doesn't match the OP's request for downloading it from Windows/Firefox. If you're going to use PHP, you might as well search for the link reference within the source code.
    – wag2639
    Oct 4, 2014 at 23:10
0

just copy the url from the address bar and take the website and right-click and select view source or on the address bar type:view-source:website address.If you want to get the icon of facebook,just type, view-source:http://www.facebook.com and just press Ctrl and F together and type .ico and you will see a link.In that there will be a text with .ico highlighted with green color.Press that link.You will see the icon.Right click > Save Image As and then give name and save it.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .