Where can I grab the favicon of a website using Google Chrome dev tools. I have access to the resources (html, css, js, images, etc.) but I cannot find the favicon.

Where is the favicon hidden in the Chrome dev tools?

  • 2
    I had the same issue to an HTML page, then I realised the favicon need not be explicitly specified. Instead, the browser was auto-magically reading /favicon.ico. Ref: mathiasbynens.be/notes/rel-shortcut-icon
    – kevinarpe
    Commented Feb 9, 2017 at 5:17

6 Answers 6


It can sometimes be a little bit tedious to find the “shortcut icon” link in the HTML.  Another approach is to create an Internet shortcut (i.e., a “Favorite” in IE, a.k.a. a “Bookmark”) and open it with Notepad:

->  IconFile=http://cdn.sstatic.net/superuser/img/favicon.ico

The IconFile and IconIndex are usually at the end.

  • How can I open one of my favourite bar sites in a text editor like this? Commented Sep 18, 2016 at 22:49
  • 1
    Try this: start Notepad, minimize it, drag the favorite to the Notepad task button on the taskbar (do not drop it there) and wait for the Notepad window to reopen, then drag into the open window and drop it there. Commented Sep 19, 2016 at 7:03
  • 1
    Thanks Scott, sadly on mac I use textedit / xcode / sublime to edit code, and performing your suggestion basically just seems to paste the link of the favourite site. Hopefully there is a way! Commented Sep 19, 2016 at 16:26
  • 2
    I know that the asker accepted this answer, but it does not answer the question asked, which was was explicit about "using Chrome dev tools". This is also only helpful in the case that the user's OS is Windows.
    – jsejcksn
    Commented Dec 9, 2017 at 0:42

Here's a tool that's actually part of Google Chrome (as requested in the question), and works for sites that require a login.

In the address bar, enter chrome://favicon/, followed by the url.

For example, chrome://favicon/https://example.com/private-page.html


  • 2
    Should be the accepted answer to my mind,..
    – Lonely
    Commented Jun 18, 2020 at 12:03
  • 1
    Also works with Microsoft Edge: edge://favicon/example.com
    – camikiller
    Commented Nov 4, 2021 at 12:22
  • 1
    I created an account here just to upvote this
    – Osias Jota
    Commented Apr 17, 2022 at 22:55
  • 1
    Really cool, is there a way to specify the size? Currently it renders only a 16px icon Commented Jun 14, 2022 at 8:42
  • Does not return the original image.
    – Trisped
    Commented Jul 5 at 20:59

You can click Ctrl+U to view source and look for the favicon in the code (<link rel="shortcut icon"). It's usually in the top of the HTML source file, since it's inside the <head>.

For this page, it's in the 7th line:

<!DOCTYPE html>


    <title>Grab favicon.ico using Google Chrome dev tools - Super User</title>
    <link rel="shortcut icon" href="http://cdn.sstatic.net/superuser/img/favicon.ico">
  • 6
    Why is it not in "Resources", with all the other images?
    – Randomblue
    Commented Jan 11, 2013 at 15:31
  • @randomblue Where should it be? under Frames > superuser.com > Images?
    – amiregelz
    Commented Jan 11, 2013 at 15:36
  • 5
    Yes, or somewhere thereabouts in the "Resources" pane.
    – Randomblue
    Commented Jan 11, 2013 at 15:43
  • This doesn't work reliably. There are multiple ways of specifying a favicon; a <link> element is only one of them.
    – me_and
    Commented Sep 10, 2018 at 13:32

You can use the power of google to do this:


Replacing the domain name above will grab the favicon for that given domain.

You can also use this variant:


that will get the favicon for any url.

  • 1
    This definitely doesn't work for all URLs. In particular, I've not managed to get it to work for any variant I tried of pactcoffee.com.
    – me_and
    Commented Sep 10, 2018 at 13:34
  • @me_and https://www.google.com/s2/favicons?domain=media.pactcoffee.com/ ended up working. I guess it didn't work on the original since it was getting the favicon from a different subdomain.
    – blo0p3r
    Commented Dec 10, 2018 at 20:12

Use Chrome Dev Tools Network tab. Filter by favicon Reload the page with Shift+F5 You will get the icon regardless it was loaded with link or from default location

  • 2
    I believe this is by far the easiest method in 2019. This answer should really be ranked higher.
    – cyqsimon
    Commented Dec 19, 2019 at 10:30
  • To get the icon, I copied the URL and opened in a new tab, then saved. Anyone know an easier way to download directly from the Network tab?
    – Trisped
    Commented Jul 5 at 21:03

Why don't you just right click on the page and select inspect element? That gives you the html code of the page and the favicon is listed there. Just click on the link.

Example http://cdn.sstatic.net/superuser/img/favicon.ico

  • 2
    on pages where it is explicitly linked. If the page does not specify, the web browser will try the default location of /favicon.ico, which doesn't log in the resources or show on the network traffic in Chrome
    – frumbert
    Commented Oct 12, 2017 at 0:57
  • @frumbert FYI, Chrome will log getting the default /favicon.ico file in the network recording tab. You can filter for 'favicon' in there to see it being retrieved.
    – Garywoo
    Commented Mar 13 at 10:04

You must log in to answer this question.

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