48

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?

1
  • 1
    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
    Feb 9, 2017 at 5:17

6 Answers 6

21

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:

    [DEFAULT]
    BASEURL=http://superuser.com/questions/532616/grab-favicon-ico-…
    [{000214A0-0000-0000-C000-000000000046}]
    Prop3=19,2
    [InternetShortcut]
    URL=http://superuser.com/questions/532616/grab-favicon-ico-using-google-…
    IDList=
->  IconFile=http://cdn.sstatic.net/superuser/img/favicon.ico
    IconIndex=1

The IconFile and IconIndex are usually at the end.

4
  • How can I open one of my favourite bar sites in a text editor like this? 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. 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! 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
    Dec 9, 2017 at 0:42
39

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

Source

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

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>
<html>

<head>

    <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">
4
  • 6
    Why is it not in "Resources", with all the other images?
    – Randomblue
    Jan 11, 2013 at 15:31
  • @randomblue Where should it be? under Frames > superuser.com > Images?
    – amiregelz
    Jan 11, 2013 at 15:36
  • 5
    Yes, or somewhere thereabouts in the "Resources" pane.
    – Randomblue
    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
    Sep 10, 2018 at 13:32
13

You can use the power of google to do this:

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

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


You can also use this variant:

http://www.google.com/s2/favicons?domain_url=http%3A%2F%2Fwww.google.de%2F

that will get the favicon for any url.

2
  • 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
    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
    Dec 10, 2018 at 20:12
11

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

1
  • 2
    I believe this is by far the easiest method in 2019. This answer should really be ranked higher.
    – cyqsimon
    Dec 19, 2019 at 10:30
0

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

1
  • 1
    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
    Oct 12, 2017 at 0:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.