Firefox의 새 탭 인기 사이트에 큰 아이콘을 표시하는 방법은 무엇입니까?


13

Quantum이라고 불리는 Firefox의 최신 안정 버전 (버전 57)에서 새 탭의 사용자 제어 Top Sites 기능이 변경되었습니다. 이전에는 웹 사이트와 상관없이 부분 스크린 샷의 조잡한 썸네일 만 나타 났으며 제어 할 수 없었습니다. 이제 일부 웹 사이트는 큰 아이콘으로 표시되고 다른 웹 사이트는 위에서 언급 한 축소판 그림으로 표시되고 파비콘이 모서리에 겹쳐 표시됩니다. 큰 아이콘으로 처리되는 사이트 예 : Amazon, TechCrunch, Slack 및 GitHub. 파비콘 처리로 썸네일을 얻는 사이트 예 : Slashdot, Steam, Kongregate, Gizmodo.

내가 알 수있는 한, 이것에 대한 특별한 운율이나 이유가 없습니다. 또한 최상위 사이트 기능의 어느 곳에서도 설명서를 찾지 못했습니다.


Firefox 소스 코드를 잠시 동안 파고 들자이 코드 browser\extensions\activity-stream\lib\TopSitesFeed.jsm섹션이 있습니다.

/**
 * Get an image for the link preferring tippy top, rich favicon, screenshots.
 */
async _fetchIcon(link) {
  // Check for tippy top icon and rich icon.
  this._tippyTopProvider.processSite(link);
  let hasTippyTop = !!link.tippyTopIcon;
  let hasRichIcon = link.favicon && link.faviconSize >= MIN_FAVICON_SIZE;

  if (!hasTippyTop && !hasRichIcon) {
    this._requestRichIcon(link.url);
  }

  // Request a screenshot if needed.
  if (!hasTippyTop && !hasRichIcon && !link.screenshot) {
    const {url} = link;
    await Screenshots.maybeCacheScreenshot(link, url, "screenshot",
      screenshot => this.store.dispatch(ac.BroadcastToContent({
        data: {screenshot, url},
        type: at.SCREENSHOT_UPDATED
      })));
  }
}

이전에는 MIN_FAVICON_SIZE96으로 정의되었으며 픽셀로 가정합니다.

를 살펴보면 TippyTopAmazon, Reddit, Twitter, Facebook 및 기타 웹 사이트 ( resource://activity-stream/data/content/tippytop/관련 JSON 파일 + 이미지에 대해 Firefox 내부 방문)에 대해 우선 처리가 이루어집니다 .Firefox에는 최종 바이너리가있는 특수 아이콘이 포함되어 있음을 의미합니다 특정 웹 사이트이지만 내가 언급 한 모든 사이트가 아닙니다.

예를 들어 TechCrunch는 TippyTop 목록에 없으며 16x16 파비콘 만 있습니다. 그러나 Firefox는 스크린 샷 대신 아이콘을 표시합니다. TechCrunch 웹 사이트에는 96 픽셀을 초과하는 Apple touch 아이콘이 있습니다. 아마도 그 중 하나가 대신 사용됩니다. 나는 일반적으로 파비콘이 애플 고유의 터치 아이콘 메타 태그와 별개의 엔티티라고 생각합니다. 이는 웹 마스터가 스크린 샷 작성 메커니즘을 무시하고 (어떻게 든) 최상위 사이트 목록에 멋진 아이콘을 표시 할 수 있음을 의미합니다. 그래서 어떻게 그렇게 할 수 있는지에 대한 질문이 여전히 남아 있습니까? 이 시점에서 파비콘 논리는 여전히 미스터리입니다.


이것은 Opera의 단축 다이얼과 동일 할 수 있습니다.
Andrew Lott

답변:


7

많은 테스트를 거친 후 웹 사이트 (Firefox 57.0.4)에서 큰 아이콘을 사용할 수있었습니다.

큰 (> 100px) 아이콘을 사용하고 크기를 지정하는 것이 중요하다고 생각합니다.

<link rel="icon" type='image/png' sizes='256x256' href="/webmasters//applogo_256.png"/>

또한 Firefox는 미리보기를 매우 적극적으로 캐시하는 것처럼 보이므로 변경 사항을 즉시 보려면 새 프로필을 사용해야했습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.