☰

Google Chrome 開発ツールを使用して favicon.ico を取得する

tag-icon • tag-icon google-chrome favicon
Google Chrome 開発ツールを使用して favicon.ico を取得する

Google Chrome 開発ツールを使用して、Web サイトのファビコンをどこで取得できますか。リソース (html、css、js、画像など) にアクセスできますが、ファビコンが見つかりません。

Chrome 開発ツールでファビコンはどこに隠されていますか?

答え1

HTML で「ショートカット アイコン」リンクを見つけるのは、少々面倒な場合があります。別の方法としては、インターネット ショートカット (IE の「お気に入り」、別名「ブックマーク」) を作成し、メモ帳で開くという方法があります。

    [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

IconFile と IconIndex は通常、最後にあります。

答え2

これは、実際には Google Chrome の一部であり（質問で要求されているとおり）、ログインが必要なサイトで機能するツールです。

アドレスバーに と入力しchrome://favicon/、その後に URL を入力します。

例えば、chrome://favicon/https://example.com/private-page.html

ソース

答え3

Ctrl+をクリックするUとソースを表示コード内のファビコンを探します ( <link rel="shortcut icon")。通常は 内にあるため、HTML ソース ファイルの先頭にあります<head>。

このページでは、7 行目にあります。

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

Chrome Dev Tools のネットワークタブを使用します。ファビコンでフィルタリングします。Shift+F5 でページを再読み込みします。リンクから読み込まれたか、デフォルトの場所から読み込まれたかに関係なく、アイコンが表示されます。

関連情報