favicon ต้องมีขนาด 32x32 หรือ 16x16 หรือไม่

ฉันต้องการใช้รูปภาพเดียวเป็นทั้ง favicon ทั่วไปและ favicon ที่เป็นมิตรกับ iPhone / iPad

เป็นไปได้ไหม ขนาด 72x72 PNG ที่เป็นมิตรกับ iPad จะเชื่อมโยงกับเบราว์เซอร์ favicon ทั่วไปหรือไม่? หรือฉันต้องใช้ภาพ 16x16 หรือ 32x32 แยกต่างหาก

สำหรับ IE, Microsoft แนะนำ 16x16, 32x32 และ 48x48 บรรจุในไฟล์

สำหรับ iOS แอปเปิ้ลแนะนำชื่อไฟล์และความละเอียดโดยเฉพาะอย่างยิ่ง 180x180 สำหรับอุปกรณ์ล่าสุดที่ใช้ iOS 8

Android Chrome ใช้การแสดงรายการเป็นหลักและอาศัยไอคอน Apple touch

IE 10 บน Windows 8.0 ต้องใช้ภาพ PNG และสีพื้นหลังและIE 11 บน Windows 8.1 และ 10 ยอมรับภาพ PNG หลายประกาศในไฟล์ XML browserconfig.xmlเฉพาะที่เรียกว่า

Safari สำหรับ Mac OS X El Capitan แนะนำไอคอน SVG สำหรับแท็บตรึง

แพลตฟอร์มอื่นบางแห่งมองหาไฟล์ PNG ที่มีความละเอียดต่าง ๆ เช่นรูปภาพ 96x96 สำหรับ Google TVหรือรูปภาพ 228x228 สำหรับ Opera Coastชายฝั่ง

ดูรายการรูปภาพ faviconนี้สำหรับการอ้างอิงที่สมบูรณ์

TLDR: ตัวสร้างfaviconนี้สามารถสร้างไฟล์เหล่านี้ทั้งหมดในครั้งเดียว ตัวสร้างสามารถใช้เป็นปลั๊กอิน WordPressได้ การเปิดเผยแบบเต็ม: ฉันเป็นผู้เขียนของเว็บไซต์นี้

ฉันไม่เห็นข้อมูลล่าสุดอยู่ที่นี่ดังนั้นที่นี่จะไป:

เพื่อตอบคำถามนี้ในตอนนี้ 2 favicons จะไม่ทำถ้าคุณต้องการให้ไอคอนของคุณดูดีในทุกที่ ดูขนาดด้านล่าง:

16 x 16 - ขนาดมาตรฐานสำหรับเบราว์เซอร์
24 x 24 - ขนาดไซต์ตรึง IE9 สำหรับส่วนติดต่อผู้ใช้
32 x 32 - แท็บหน้าใหม่ของ IE, ปุ่มแถบงาน Windows 7+, แถบรายการอ่านซาฟารีแถบด้านข้าง
48 x 48 - ไซต์ Windows
57 x 57 - iPod touch , iPhone สูงถึง 3G
60 x 60 - iPhone สัมผัสถึง iOS7
64 x 64 - ไซต์ Windows, แถบรายการตัวอ่าน Safari ใน HiDPI / Retina
70 x 70 - ชนะ 8.1 Metro ไทล์
72 x 72 - iPad สัมผัสได้ถึง iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - เรตินาของ iPhone สัมผัสได้ถึง iOS6
120 x 120 - iPhone เรตินาแตะ iOS7
128 x 128 - แอป Chrome Web Store, Android
144 x 144 - IE10 Metro ไทล์สำหรับไซต์ที่ถูกยึด iPad retina ถึง iOS6
150 x 150 - ชนะไทล์ 8.1 เมโทร
152 x 152 - หน้าจอสัมผัสของ iPad iPad iOS7
196 x 196 - Android Chrome
310 x 150 - ชนะ 8.1 กระเบื้อง Metro แบบกว้าง
310 x 310 - Win 8.1 Metro tile

ฉันไม่แน่ใจว่าเบราว์เซอร์จะขยายไอคอนขนาดใหญ่หรือไม่ แต่ W3C แนะนำดังต่อไปนี้¹ :

รูปแบบของภาพที่คุณเลือกต้องมีขนาด 16x16 พิกเซลหรือ 32x32 พิกเซลโดยใช้สี 8 บิตหรือ 24 บิต รูปแบบของภาพต้องเป็นหนึ่งใน PNG (มาตรฐาน W3C), GIF หรือ ICO

¹ w3c.org: วิธีการเพิ่ม Favicon ที่เว็บไซต์ของคุณ (ร่างในการพัฒนา)

ที่จริงแล้วเพื่อให้ favicon ของคุณทำงานในเบราว์เซอร์ทั้งหมดได้อย่างถูกต้องคุณจะต้องเพิ่มมากกว่า 10 ไฟล์ในขนาดและรูปแบบที่ถูกต้อง

เพื่อนของฉันและฉันได้สร้างแอพสำหรับสิ่งนี้! คุณสามารถค้นหาได้ในfaviconit.com

เราทำสิ่งนี้ดังนั้นผู้คนไม่จำเป็นต้องสร้างรูปภาพเหล่านี้และแท็กที่ถูกต้องด้วยมือสร้างทั้งหมดของพวกเขาที่เคยรบกวนฉันมาก!

คุณสามารถมีไอคอนหลายขนาดในไฟล์เดียวกัน ฉันสร้าง favicons ( .icoไฟล์) เป็นประจำที่ 48, 32 และ 16 พิกเซล คุณสามารถเพิ่มภาพขนาดใดก็ได้ที่คุณต้องการ คำถามคือ iPhone จะใช้icoไฟล์หรือไม่

icoยังรองรับความโปร่งใส แต่ฉันไม่แน่ใจว่าเป็นช่องอัลฟ่าเช่น PNG หรือไม่ น่าจะเป็นมากกว่า GIF ที่เปิดหรือปิดอยู่

ตามบทความของ Wikipedia เกี่ยวกับ Favicon Internet Explorer รองรับเฉพาะรูปแบบ ICO สำหรับ favicons

ฉันจะติดกับสองไอคอนที่แตกต่างกัน

favicon ไม่จำเป็นต้องเป็น 16x16 หรือ 32x32 คุณสามารถสร้าง favicon ที่มีขนาด 80x80 หรือ 100x100 เพียงตรวจสอบให้แน่ใจว่าค่าทั้งสองมีขนาดเท่ากันและแน่นอนว่าอย่าทำให้ใหญ่หรือเล็กเกินไปให้เลือกขนาดที่เหมาะสม

คุณจะต้องแยกไฟล์สำหรับแต่ละความละเอียดที่ฉันกลัว มีบทความที่ดีมากในการตรวจสอบแคมเปญที่อธิบายถึงวิธีการสร้างและนำไอคอนไปใช้กับอุปกรณ์ iOS แต่ละเครื่องด้วยเช่นกัน:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

ดังที่ฉันได้เรียนรู้ว่าไม่มีวิธีแก้ปัญหาหลายอย่างที่สมบูรณ์แบบ การใช้ตัวสร้างfaviconนั้นเป็นทางออกที่ดี แต่จำนวนของพวกเขานั้นเยอะและยากที่จะเลือก ฉันชอบที่จะเพิ่มว่าถ้าคุณต้องการให้เว็บไซต์ของคุณเปิดใช้งาน PWA คุณจะต้องให้ไอคอน 512x512 ตามที่ Google Devsระบุไว้:

ไอคอนรวมถึงรุ่น 192px และ512px

ฉันไม่ได้พบกับเครื่องกำเนิดไฟฟ้า favicon จำนวนมากที่บังคับใช้เกณฑ์นั้น ( firebase ทำแต่มีหลายสิ่งที่ไม่ได้ทำ) ดังนั้นการแก้ปัญหาจะต้องเป็นการผสมผสานของโซลูชั่นอื่น ๆ อีกมากมาย

ฉันไม่รู้วันนี้ที่ต้นปี 2563 ถ้าให้ 16x16, 32x32 ยังคงเกี่ยวข้อง ฉันเดาว่ามันยังคงมีความสำคัญในบางบริบทเช่นหากผู้ใช้ของคุณยังคงใช้ IE ด้วยเหตุผลบางอย่าง (สิ่งนี้ยังคงเกิดขึ้นใน บริษัท เอกชนบางแห่งที่ไม่ย้ายไปยังเบราว์เซอร์ที่ใหม่กว่าด้วยเหตุผลบางประการ)