2014-02-24 1 views
19

저는 Android에서 웹 브라우저를 개발 중이며 Chrome (4 X 2)과 같이 가장 많이 방문한 사이트에 대한 URL 로고를 표시하려고합니다. 그러나 문제는 대부분의 파비콘 (예 : http://www.bbc.co.uk/favicon.ico)이 크기가 16X16 또는 32X32이고 크기 조정시 잘 보이지 않는다는 것입니다.주어진 URL에 고해상도 웹 사이트 로고 (favicon)를 얻는 방법

URL에 대한 고해상도 아이콘/비트 맵을 표준 방식으로 다운로드 할 수있는 방법이 있습니까? 홈페이지를 열고 모든 이미지 링크를 추출한 다음 이름이 로고로 표시된 이미지를 선택하는 방법은 무엇입니까? 이 방법은 모든 URL에서 작동합니까? 주어진 URL 또는 favicon에 대한 고해상도 아이콘을 얻는 표준 방법이 웹 사이트 로고를 얻는 유일한 표준 방법인지 알고 싶습니다.

+1

파이어 폭스는 자주 방문한 페이지의 스크린 샷을 소요하고 시작 페이지에 썸네일로 정렬합니다. 나는 그것이 최선의 방법이라고 생각한다. 그 외에도, favicon을 제외하고는 표준화 된 방법이 없습니다. 헤더 영역에 대한 페이지를 스캔하여 일반적으로 가장 왼쪽에 가장 큰 이미지를 찾습니다.이 이미지는 웹 사이트의 로고 일 것입니다. 가장 일반적으로 사용되는 CMS 및 블로그 소프트웨어를 분석하여 일반적인 태그 태깅 또는 배치 패턴을 확인할 수 있습니다. http://googlewebmastercentral.blogspot.com/2013/05/using-schemaorg-markup-for-organization.html – tiguchi

+0

@ 노부, webView에서 스냅 샷을 찍을 수는 있지만 문제는 여러 번 표시 할 때입니다. 모바일 장치의 스냅 샷은별로 의미가 없습니다. 또한 모바일 장치에 방문한 모든 페이지의 스냅 샷을 저장해야합니다. 가장 왼쪽의 가장 큰 이미지가 대부분의 경우 로고가 될 수 있다면 시도해 보겠습니다. – Harish

+0

브라우저 기록 목록에 대해 이러한 로고 또는 아이콘이 필요합니까? 이 스크린 샷을 자르고 크기를 조정하고 Android의 작업 전환기와 비슷한 시각적 효과를 낼 수 있습니다. 하지만 로고 감지 기능이 잘 작동한다면 괜찮습니다. 브라우저가 로고를 감지 할 수없는 경우를 대비해 어떤 종류의 대체 동작이 필요합니다. – tiguchi

답변

36

직접 코딩하거나 기존 솔루션을 사용할 수 있습니다.

- 그것 - 스스로는 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 같은 코드에서 애플 터치 아이콘 선언에 대한

  1. 봐 알고리즘입니다. 이 사진의 범위는 57x57에서 152x152입니다. 전체 참조 정보는 Apple specs을 참조하십시오.
  2. Apple 터치 아이콘 선언을 찾지 못하더라도 Apple 명명 규칙에 따라 어쨌든로드하려고 시도하십시오. 예를 들어, /apple-touch-icon.png에서 찾을 수 있습니다. 참조 용으로 다시 Apple specs을 참조하십시오.
  3. 코드에서 고화질 PNG favicon을 찾으십시오 (예 : <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">). 이 예에서는 196x196 크기의 그림이 있습니다.
  4. <meta name="msapplication-TileImage" content="/mstile-144x144.png">과 같은 Windows 8/IE10 및 Windows 8.1/IE11 타일 사진을 찾으십시오. 이 사진의 범위는 70x70에서 310x310 또는 그 이상입니다. 이 Windows 8Windows 8.1 참조를 참조하십시오.
  5. Windows 8.1/IE11 전용 인 /browserconfig.xml을 찾으십시오. 이것은 타일 사진을 찾을 수있는 다른 장소입니다. Microsoft specs을 참조하십시오.
  6. 과 같은 og:image 선언을 찾습니다. 이것은 웹 사이트가 FB/Pinterest/무엇이든지 그것을 표현하기 위해 선호하는 그림을 나타내는 방법입니다. 참조 용으로 Open Graph Protocol을 참조하십시오.
  7. 이 시점에서 적절한 로고를 찾지 못했습니다 ... 저주! 페이지의 모든 그림을로드하고 최상의 그림을 추측 할 수 있습니다.

참고 : 1, 2, 3 단계는 기본적으로 북마크 및 홈 스크린 링크에 적합한 아이콘을 얻기 위해 Chrome이 수행하는 작업입니다. Opera의 Coast는 MS 타일 사진을 사용하여 작업을 완료합니다. which browser uses which picture (전체 공개 : 나는이 페이지의 저자 임)을 알아 내기 위해이 목록을 읽으십시오.

API와 오픈 소스 RealFaviconGenerator

프로젝트 :이 favicon retrieval API 어떤 웹 사이트의 파비콘 또는 (예 : 터치 아이콘 등) 관련 아이콘을 얻을 수 있습니다. 전체 공개 : 저는이 서비스의 저자입니다.

BestIcon : 포괄적이지는 않지만 Besticon은 좋은 대안을 제공합니다. 특히 코드를 직접 호스트하려는 경우 더욱 그렇습니다. 지금 당장 사용할 수있는 hosted version도 있습니다.

+0

아주 좋습니다! PHP 구현에 대해 알고 있습니까? –

+0

Nope, 죄송합니다 : -/ –

+0

이 경우 자바 클래스를 작성할 수 있습니까? Jsoup에서 URL을 받았다고 말하면 누군가 로고를 추출 할 수 있습니까? 나는 5 단계에 걸려있다. – learner

-1

보통 favicon은 작습니다 (예 : 16x16 또는 32x32). 더 큰 차원이 필요한 경우 홈페이지/헤더에서 favicon이 아닌 로고를 추출하십시오.

+0

로고가 헤더에 항상 표시되도록 보장됩니까? 웹 페이지에 여러 개의 이미지 요소가 포함 된 경우 어떤 요소가 로고에 해당하는지 어떻게 알 수 있습니까? – Harish

+0

@Harish 최신 브라우저는 루트 디렉토리에있는 favicon을 자동으로 감지하므로 웹 사이트에 favicon 코드를 포함 할 수 없습니다. favicon이 사이트에 있으면 더 높은 해상도의 이미지를 넣으십시오. – Justinas

-1

로고는 일관되게 이름이 지정되지 않으며 일관되게 식별하기가 어렵습니다. 파빌리온을 적절한 크기의 색상 타일에 두는 것을 고려하십시오. 사람들은 신속하게 색상을 웹 사이트와 연결합니다. colorthief와 같은 것을 사용하여 웹 사이트 나 favicon에서 지배적 인 색상을 추출하거나, 골든 앵글 수식을 사용하여 고유 한 색상으로 색을 선택할 수 있습니다.

11

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를 참조하십시오.

(면책 조항 :. 내가 얼마 전에 같은 문제를 해결하기 위해 필요로했기 때문에 나는 그것을 썼다는)

+0

Java에서이 코드를 사용하는 간단한 방법이 있습니까? 'ScriptEngine'과 같은 종류 – learner

+0

다른 환경에서 Go 코드를 사용하는 가능성/실현 가능성을 조사하지 않았습니다. Java에서이 API를 사용하는 가장 간단한 방법은 Java HTTP 클라이언트 중 하나를 사용하여 제공된 URL API를 사용하는 것입니다. – mat

+0

Jiahaog에는 [여기] (https://github.com/jiahaog/page-icon)의 자바 스크립트 구현이 있습니다. – Qix

관련 문제