วิธีทำให้ไอคอนขนาดใหญ่ปรากฏในแท็บใหม่ของ Firefox Top Sites?


13

ใน Firefox รุ่นเสถียรล่าสุด (รุ่น 57) ขนานนาม Quantum ผู้ใช้ควบคุมคุณสมบัติของเว็บไซต์ยอดนิยมบนแท็บใหม่เปลี่ยนไป ก่อนหน้านี้มีเพียงภาพย่อขนาดย่อของภาพหน้าจอบางส่วนที่ปรากฏโดยไม่คำนึงถึงเว็บไซต์และไม่สามารถควบคุมได้ ขณะนี้บางเว็บไซต์ปรากฏขึ้นพร้อมกับไอคอนขนาดใหญ่ในขณะที่บางเว็บไซต์จะแสดงเป็นภาพขนาดย่อดังกล่าวข้างต้นและ favicon ของพวกเขาวางซ้อนอยู่ที่มุม ตัวอย่างเว็บไซต์ที่มีไอคอนขนาดใหญ่: Amazon, TechCrunch, Slack และ GitHub ตัวอย่างเว็บไซต์ที่ได้รับภาพขนาดย่อที่มีการรักษาแบบ favicon: Slashdot, Steam, Kongregate, Gizmodo

เท่าที่ฉันสามารถบอกได้ไม่มีการสัมผัสหรือเหตุผลใด ๆ โดยเฉพาะกับเรื่องนี้ ฉันยังไม่พบเอกสารใด ๆ เลยในคุณลักษณะ Top Sites


หลังจากขุดลงไปในซอร์สโค้ด 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_SIZEถูกกำหนดให้เป็น 96 ซึ่งฉันถือว่าเป็นพิกเซล

มองไปที่TippyTopฉันเห็นการรักษาสิทธิพิเศษบางอย่างที่ถูกสร้างขึ้นสำหรับ Amazon, Reddit, Twitter, Facebook และเว็บไซต์อื่น ๆ (เยี่ยมชมresource://activity-stream/data/content/tippytop/Firefox สำหรับไฟล์ JSON + รูปภาพที่เกี่ยวข้อง) ซึ่งฉันคิดว่า Firefox จะมีไอคอนพิเศษพร้อมไบนารีสุดท้าย เว็บไซต์ที่เฉพาะเจาะจง แต่ไม่ใช่ทุกเว็บไซต์ที่ฉันพูดถึง

ตัวอย่างเช่น TechCrunch ไม่ได้อยู่ในรายการ TippyTop และมี favicon ขนาด 16x16 เท่านั้น อย่างไรก็ตาม Firefox จะแสดงไอคอนแทนภาพหน้าจอ มีไอคอน Apple touch บนเว็บไซต์ TechCrunch ที่มีขนาดเกิน 96 พิกเซล ดังนั้นหนึ่งในนั้นอาจถูกใช้แทน โดยทั่วไปฉันคิดว่า favicons แยกเอนทิตี้จากเมตาแท็กไอคอนแบบสัมผัสของ Apple ซึ่งหมายความว่าผู้ดูแลเว็บสามารถแทนที่กลไกการจับภาพหน้าจอ (อย่างใด) และเพียงแสดงไอคอนที่ดีในรายการ Top Sites ดังนั้นคำถามยังคงเป็นวิธีการที่จะเกิดขึ้น ตรรกะ favicon ณ จุดนี้ยังค่อนข้างลึกลับ


นี่อาจเป็นสิ่งเดียวกันสำหรับ Speed ​​Dial ของ 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.