web-dev-qa-db-fra.com

Comment obtenir un logo de site Web haute résolution (favicon) pour une URL donnée

Je développe un navigateur Web sur Android et je souhaite afficher le logo URL pour les sites les plus visités, comme dans Chrome (4 X 2). Mais le Le problème est que la plupart des favicons (par exemple: http://www.bbc.co.uk/favicon.ico ) sont de taille 16X16 ou 32X32 et ne semblent pas bonnes lorsqu'elles sont agrandies.

Existe-t-il un moyen de télécharger une icône/bitmap haute résolution pour une URL de manière standard? Que diriez-vous d'ouvrir la page d'accueil, puis d'extraire tous les liens d'image, puis de choisir une image avec le nom du logo dedans? Cette méthode fonctionnerait-elle pour toutes les URL? Je veux savoir s'il existe un moyen standard d'obtenir une icône haute résolution pour une URL donnée ou un favicon est le seul moyen standard d'obtenir le logo du site Web?

imageurlbrowserfavicongraphical-logo
23
Harish

Vous pouvez le coder vous-même ou utiliser une solution existante.

Algorithme de bricolage

  1. Recherchez Apple déclarations d'icône tactile dans le code, telles que <link rel="Apple-touch-icon" href="/Apple-touch-icon.png">. Ces images varient de 57x57 à 152x152. Voir spécifications Apple pour une référence complète.
  2. Même si vous ne trouvez pas de déclaration d'icône tactile Apple, essayez de les charger quand même, en vous basant sur la convention de dénomination Apple. Par exemple, vous pourriez trouver quelque chose dans /Apple-touch-icon.png. Encore une fois, voir spécifications Apple pour référence.
  3. Recherchez le favicon PNG haute définition dans le code, tel que <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">. Dans cet exemple, vous avez une image 196x196.
  4. Recherchez les images de vignette Windows 8/IE10 et Windows 8.1/IE11, telles que <meta name="msapplication-TileImage" content="/mstile-144x144.png">. Ces images varient de 70x70 à 310x310, voire plus. Voir ces références Windows 8 et Windows 8.1 .
  5. Chercher /browserconfig.xml, dédié à Windows 8.1/IE11. C'est l'autre endroit où vous pouvez trouver des images de tuiles. Voir spécifications Microsoft .
  6. Cherchez le og:image déclaration telle que <meta property="og:image" content="http://somesite.com/somepic.png"/>. C'est ainsi qu'un site Web indique à FB/Pinterest/quelle que soit l'image préférée pour le représenter. Voir Open Graph Protocol pour référence.
  7. À ce stade, vous n'avez trouvé aucun logo approprié ... maudit! Vous pouvez toujours charger toutes les images de la page et faire une supposition pour choisir la meilleure.

Remarque: Les étapes 1, 2 et 3 sont essentiellement ce que Chrome fait pour obtenir des icônes appropriées pour les liens de signet et d'écran d'accueil. Coast by Opera même utiliser la tuile MS images pour faire le travail. Lisez cette liste pour comprendre quel navigateur utilise quelle image (divulgation complète: je suis l'auteur de cette page).

API et projets open source

RealFaviconGenerator: Vous pouvez obtenir n'importe quel favicon de site Web ou icône associée (comme l'icône tactile) avec ceci API de récupération de favicon . Divulgation complète: je suis l'auteur de ce service.

BestIcon: Bien que moins complet, Besticon offre une bonne alternative, surtout si vous voulez héberger le code vous-même. Il existe également une version hébergée que vous pouvez utiliser immédiatement.

48
philippe_b

Le code Go à https://github.com/mat/besticon tente de résoudre ce problème.

Par exemple

$ besticon http://github.com 
http://github.com:  https://github.com/Apple-touch-icon-144.png

Il existe également une version hébergée du code, voir par exemple http://icons.better-idea.org/icons?url=github.com .

(Avertissement: je l'ai écrit parce que j'avais besoin de résoudre le même problème il y a quelque temps.)

12
mat

Voici une nouvelle solution authentique qui vous donnera toujours les meilleurs résultats-

  1. Webchromeclient donne un rappel de la méthode onReceivedTouchIconUrl pour tous les sites Web, il suffit de tenir l'url d'ici.

  2. La prochaine étape consiste à convertir cette URL en bitmap, ce qui peut être fait comme ceci:

    try {
    URL url = new URL(touchiconUrl);
    HttpURLConnection connection =
            (HttpURLConnection)url.openConnection();
    connection.setDoInput(true);
    connection.connect();
    InputStream input = connection.getInputStream();
    Bitmap myBitmap = BitmapFactory.decodeStream(input);
    return myBitmap;
} catch (IOException e) {
    e.printStackTrace();
    return null;
}

  3. L'étape suivante consiste à envoyer ce bitmap pour le raccourci.

Remarque: N'oubliez pas de créer une image bitmap sur le fil d'arrière-plan comme une tâche asynct.

0
Shivam Yadav

Les logos ne seront pas systématiquement nommés et très difficiles à identifier de manière cohérente. Pensez à mettre le favicon sur une tuile de couleur de dimensions appropriées. Les gens associeront rapidement la couleur au site Web. Vous pouvez soit extraire une couleur dominante du site Web ou du favicon en utilisant quelque chose comme colorthief, ou rendre chacune unique en utilisant une formule d'angle d'or pour choisir une teinte.

0
adrianwadey