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?
Super User is a question and answer site for computer enthusiasts and power users. It only takes a minute to sign up.Sign up to join this community
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:
The IconFile and IconIndex are usually at the end.
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
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">
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.
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.
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
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.