35
4
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?
Randomblue
Posted 2013-01-11T14:34:43.387
Reputation: 2 547
19
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.
Scott
Posted 2013-01-11T14:34:43.387
Reputation: 17 653
How can I open one of my favourite bar sites in a text editor like this? – Joel Balmer – 2016-09-18T22:49:24.127
1Try 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 – 2016-09-19T07:03:08.520
1Thanks 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 – 2016-09-19T16:26:38.230
2I 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 – 2017-12-09T00:42:05.917
12
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">
amiregelz
Posted 2013-01-11T14:34:43.387
Reputation: 6 965
This doesn't work reliably. There are multiple ways of specifying a favicon; a <link> element is only one of them. – me_and – 2018-09-10T13:32:21.140
4Why is it not in "Resources", with all the other images? – Randomblue – 2013-01-11T15:31:24.037
@randomblue Where should it be? under Frames > superuser.com > Images? – amiregelz – 2013-01-11T15:36:20.247
3Yes, or somewhere thereabouts in the "Resources" pane. – Randomblue – 2013-01-11T15:43:27.647
10
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.
blo0p3r
Posted 2013-01-11T14:34:43.387
Reputation: 258
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 https://www.pactcoffee.com.
– me_and – 2018-09-10T13:34:53.460@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 – 2018-12-10T20:12:08.293
6
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
browly
Posted 2013-01-11T14:34:43.387
Reputation: 237
4
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
Hopeless
Posted 2013-01-11T14:34:43.387
Reputation: 41
I believe this is by far the easiest method in 2019. This answer should really be ranked higher. – cyqsimon – 2019-12-19T10:30:50.563
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.
CalvT
Posted 2013-01-11T14:34:43.387
Reputation: 641
1on 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 – 2017-10-12T00:57:25.930
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
– kevinarpe – 2017-02-09T05:17:58.917/favicon.ico. Ref: https://mathiasbynens.be/notes/rel-shortcut-icon