web-dev-qa-db-ja.com

特定のURLの高解像度Webサイトのロゴ（ファビコン）を取得する方法

私はAndroidでWebブラウザを開発しており、Chrome（4 X 2）のように、最もアクセスされたサイトのURLロゴを表示したいと考えています。しかし、問題は、ほとんどのファビコン（例： http://www.bbc.co.uk/favicon.ico ）のサイズが16X16または32X32であり、拡大しても見栄えがよくないことです。

標準的な方法でURLの高解像度アイコン/ビットマップをダウンロードする方法はありますか？ホームページを開いてすべての画像リンクを抽出し、ロゴが入った画像を選択してみませんか？この方法はすべてのURLで機能しますか？特定のURLまたはファビコンの高解像度アイコンを取得する標準的な方法がWebサイトのロゴを取得する唯一の標準的な方法であるかどうかを知りたいですか？

imageurlbrowserfavicongraphical-logo
23
Harish

自分でコーディングするか、既存のソリューションを使用できます。

Do-it-yourselfアルゴリズム

  1. コード内でAppleタッチアイコン宣言（<link rel="Apple-touch-icon" href="/Apple-touch-icon.png">など）を探します。これらの写真の範囲は57x57から152x152です。完全なリファレンスについては Appleの仕様 を参照してください。
  2. Appleタッチアイコン宣言が見つからない場合でも、Apple命名規則に基づいて、とにかくそれらをロードしてみてください。たとえば、/Apple-touch-icon.png。もう一度、参考のために Apple specs を参照してください。
  3. <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">などのコードで高解像度のPNGファビコンを探します。この例では、196x196の画像があります。
  4. <meta name="msapplication-TileImage" content="/mstile-144x144.png">などのWindows 8/IE10およびWindows 8.1/IE11タイル画像を探します。これらの画像の範囲は70x70から310x310、またはそれ以上です。これらの Windows 8 および Windows 8.1 の参照を参照してください。
  5. Windows 8.1/IE11専用の/browserconfig.xmlを探します。これは、タイル写真を見つけることができるもう1つの場所です。 Microsoft specs を参照してください。
  6. og:imageなどの<meta property="og:image" content="http://somesite.com/somepic.png"/>宣言を探します。これは、WebサイトがFB/Pinterest /それを表すために好ましい画像を示す方法です。 Open Graph Protocol を参照してください。
  7. この時点で、適切なロゴが見つかりませんでした...のろわれた！ページ内のすべての画像をロードして、推測して最適なものを選択することができます。

注：手順1、2、3は、基本的にChromeがブックマークとホーム画面のリンクに適したアイコンを取得するために行うことです。コーストOpera MSタイルを使用することもできます仕事を成し遂げるための写真。理解するためにこのリストを読んでください どのブラウザがどの写真を使用するか （完全な開示：私はこのページの作成者です）。

APIとオープンソースプロジェクト

RealFaviconGenerator：この ファビコン取得API を使用すると、Webサイトのファビコンまたは関連アイコン（タッチアイコンなど）を取得できます。完全な開示：私はこのサービスの作成者です。

BestIcon：それほど包括的ではありませんが、 Besticon は、特にコードを自分でホストする場合に、優れた代替手段を提供します。 ホストされているバージョン もあり、すぐに使用できます。

48
philippe_b

https://github.com/mat/besticon のGoコードは、この問題を解決しようとします。

例えば

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

付随するホストバージョンのコードもあります。例 http://icons.better-idea.org/icons?url=github.com を参照してください。

（免責事項：同じ問題を少し前に解決する必要があったため、私はそれを書きました。）

12
mat

ここに、常に最良の結果をもたらす、新しい真のソリューションがあります。

  1. WebchromeclientはonReceivedTouchIconUrlメソッドのコールバックをすべてのWebサイトに提供します。ここからのURLを保持するだけです。

  2. 次のステップは、このURLをビットマップに変換することです。

    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. 次のステップは、このビットマップをショートカットに送信することです。

注：asynctaskのようなバックグラウンドスレッドでビットマップを作成することを忘れないでください。

0
Shivam Yadav

ロゴは一貫して名前が付けられることはなく、一貫して識別するのは非常に困難です。ファビコンを適切な寸法のカラータイルの上に置くことを検討してください。人々はすぐに色をウェブサイトに関連付けます。 colorthiefのようなものを使用して、Webサイトまたはファビコンから主要な色を抽出するか、または黄金角の式を使用して各色を一意にして、色相を選択することができます。

0
adrianwadey