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
6 Answers
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.
answered Jan 11, 2013 at 18:50
-
How can I open one of my favourite bar sites in a text editor like this? Sep 18, 2016 at 22:49
-
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. Sep 19, 2016 at 7:03
-
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! Sep 19, 2016 at 16:26
-
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.– jsejcksnDec 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
-
-
-
1Really cool, is there a way to specify the size? Currently it renders only a 16px icon Jun 14, 2022 at 8:42
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">
answered Jan 11, 2013 at 15:28
-
6
-
@randomblue Where should it be? under Frames > superuser.com > Images? Jan 11, 2013 at 15:36
-
5
-
This doesn't work reliably. There are multiple ways of specifying a favicon; a
<link>element is only one of them.– me_andSep 10, 2018 at 13:32
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.
-
1This 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_andSep 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.– blo0p3rDec 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
-
2I believe this is by far the easiest method in 2019. This answer should really be ranked higher.– cyqsimonDec 19, 2019 at 10:30
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.
-
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– frumbertOct 12, 2017 at 0:57
/favicon.ico. Ref: mathiasbynens.be/notes/rel-shortcut-icon