Saisissez favicon.ico à l'aide des outils de développement de Google Chrome

33

Où puis-je récupérer le favicon d'un site Web à l'aide des outils de développement de Google Chrome. J'ai accès aux ressources (html, css, js, images, etc.) mais je ne trouve pas le favicon.

Où est le favicon caché dans les outils de développement Chrome?

google-chrome favicon Randomblue
la source
1
J'ai eu le même problème avec une page HTML, puis j'ai réalisé que le favicon n'avait pas besoin d'être explicitement spécifié. Au lieu de cela, le navigateur lisait automatiquement /favicon.ico. Ref: mathiasbynens.be/notes/rel-shortcut-icon
kevinarpe

Réponses:

19

Il peut parfois être un peu fastidieux de trouver le lien «icône de raccourci» dans le HTML. Une autre approche consiste à créer un raccourci Internet (c'est-à-dire un «favori» dans IE, alias un «signet») et à l'ouvrir avec le Bloc-notes:

    [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 et IconIndex sont généralement à la fin.

Scott
la source
Comment puis-je ouvrir l'un de mes sites de bars préférés dans un éditeur de texte comme celui-ci?
Joel Balmer
1
Essayez ceci: démarrez le Bloc-notes, réduisez-le, faites glisser le favori vers le bouton de tâche Bloc-notes de la barre des tâches (ne le déposez pas là-bas) et attendez la réouverture de la fenêtre du Bloc-notes, puis faites-la glisser dans la fenêtre ouverte et déposez-la là.
Scott
1
Merci Scott, malheureusement sur mac, j'utilise textedit / xcode / sublime pour modifier le code, et l'exécution de votre suggestion semble simplement coller le lien du site préféré. Espérons qu'il existe un moyen!
Joel Balmer
2
Je sais que le demandeur a accepté cette réponse, mais il ne répond pas à la question posée, qui était explicite sur «l'utilisation des outils de développement Chrome». Cela n'est également utile que dans le cas où le système d'exploitation de l'utilisateur est Windows.
jsejcksn
10

Vous pouvez cliquer sur Ctrl+ Upour afficher la source et rechercher le favicon dans le code ( <link rel="shortcut icon"). Il se trouve généralement en haut du fichier source HTML, car il se trouve à l'intérieur du <head>.

Pour cette page, c'est dans la 7ème ligne:

<!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
la source
4
Pourquoi n'est-il pas dans "Ressources", avec toutes les autres images?
Randomblue
@randomblue Où cela devrait-il être? sous Cadres> superuser.com> Images ?
amiregelz
3
Oui, ou quelque part dans le volet "Ressources".
Randomblue
Cela ne fonctionne pas de manière fiable. Il existe plusieurs façons de spécifier un favicon; un <link>élément n'est que l'un d'entre eux.
me_and
9

Vous pouvez utiliser la puissance de Google pour ce faire:

http://www.google.com/s2/favicons?domain=www.google.de

Le remplacement du nom de domaine ci-dessus récupérera le favicon pour ce domaine donné.

Vous pouvez également utiliser cette variante:

http://www.google.com/s2/favicons?domain_url=http%3A%2F%2Fwww.google.de%2F

qui obtiendra le favicon pour n'importe quelle URL.

blo0p3r
la source
Cela ne fonctionne certainement pas pour toutes les URL. En particulier, je n'ai pas réussi à le faire fonctionner pour une variante que j'ai essayée de pactcoffee.com .
me_and
@me_and a https://www.google.com/s2/favicons?domain=media.pactcoffee.com/fini par travailler. Je suppose que cela n'a pas fonctionné sur l'original car il obtenait le favicon d'un sous-domaine différent.
blo0p3r
4

Voici un outil qui fait réellement partie de Google Chrome (comme demandé dans la question), et fonctionne pour les sites qui nécessitent une connexion.

Dans la barre d'adresse, entrez chrome://favicon/, suivi de l'url.

Par exemple, chrome://favicon/https://example.com/private-page.html

La source

browly
la source
2

Utilisez l'onglet Réseau des outils de développement Chrome. Filtrer par favicon Recharger la page avec Maj + F5 Vous obtiendrez l'icône indépendamment du fait qu'elle ait été chargée avec le lien ou à partir de l'emplacement par défaut

Désespéré
la source
0

Pourquoi ne faites-vous pas juste un clic droit sur la page et sélectionnez inspect element? Cela vous donne le code html de la page et le favicon y est répertorié. Il suffit de cliquer sur le lien.

Exemple http://cdn.sstatic.net/superuser/img/favicon.ico

CalvT
la source
1
sur les pages où il est explicitement lié. Si la page ne le spécifie pas , le navigateur Web essaiera l'emplacement par défaut de /favicon.ico, qui ne se connecte pas aux ressources ou n'affiche pas le trafic réseau dans Chrome
frumbert