33

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?

18

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.

  • How can I open one of my favourite bar sites in a text editor like this? – Joel Balmer Sep 18 '16 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. – Scott Sep 19 '16 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! – Joel Balmer Sep 19 '16 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 '17 at 0:42
10

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

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.

  • 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 '18 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 '18 at 20:12
4

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

2

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

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
    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 '17 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.