ขนาด Favicon รูปแบบไฟล์และแท็กเมตา / ลิงก์ใดที่ควรใช้ในปี 2020 ซึ่งรวมถึงไอคอนแอปเปิ้ล, หน้าต่าง, Android และอุปกรณ์อื่น ๆ ที่ผู้คนใช้ในปัจจุบัน

ฉันใช้ Opera และฉันเห็นว่ามันรองรับรูปแบบ svg ปัจจุบันเป็นทางออกที่ดีที่สุดในการใช้ svg หรือไม่? มีตัวเลือก "ไฟล์เดียวเหมาะกับทุกคน" หรือไม่?

ฉันเรียกดูเว็บไซต์หลายแห่งและตรวจสอบ "ตัวสร้างไอคอน Fav" ต่างๆ พวกเขาทั้งหมดมีอายุหลายปีและทำงานกับไฟล์ png เป็นส่วนใหญ่

ตัวอย่างเช่น: ควรใช้รหัสใดสำหรับ ico และ svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

หรือควรระบุขนาดหาก ico มีขนาดมากกว่านี้ ฉันไม่พบคำตอบที่ดีสักคำตอบ

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

โปรดระบุมิติข้อมูลรูปแบบไฟล์และเมตา / ลิงก์แท็กของ Favicons ที่ควรใช้

คำเตือน: ฉันเป็นผู้เขียน RealFaviconGenerator ซึ่งฉันคาดว่าจะเป็นข้อมูลล่าสุด (ส่วนใหญ่ดูด้านล่าง) ดังนั้นอย่าแปลกใจถ้าคำตอบนี้ตรงกับสิ่งที่ RFG สร้างขึ้น

ตำนานขนาดเดียวที่เหมาะกับทุกคน

ไม่มีไอคอน "หนึ่งขนาดที่เหมาะกับทุกคน" คุณไม่สามารถสร้างไอคอน SVG เดียวและคาดว่าจะใช้งานได้ทุกที่

จากมุมมองทางเทคนิคไอคอน SVG เดียวจะเป็นสิ่งที่ดี แต่จากมุมมองของ UI และ UX นี่ไม่ใช่ผลลัพธ์ที่พึงปรารถนา เปรียบเทียบ iOS และ Android บน iOS ไอคอนหน้าจอหลักทั้งหมดจะเป็นสี่เหลี่ยมที่มีมุมโค้งมน ( iOS เติมส่วนโปร่งใสของไอคอน Touch ด้วยสีดำ ) ใน Android ไอคอนหน้าจอหลักมักใช้รูปทรงที่ไม่เป็นสี่เหลี่ยมจัตุรัสและโปร่งใส (รวมถึงไอคอนแอป Google) ส่งไอคอนสัมผัสเดียวและ Android Chrome จะใช้งานได้ แต่คุณจะไม่สามารถจับคู่หลักเกณฑ์เกี่ยวกับไอคอน Androidได้ในขณะที่ไอคอนเฉพาะสามารถทำได้

ดังนั้นฉันขอแนะนำให้หลีกเลี่ยงการใช้ไอคอนเดียวโดยเจตนา แทนที่จะกำหนดเป้าหมายแต่ละแพลตฟอร์มแยกกันถ้าเป็นไปได้ (ไม่ได้เป็นเช่นนั้นเสมอไป)

ไอคอนแพลตฟอร์มต่อแพลตฟอร์ม

iOS Safari

iOS Safari คาดว่าจะมีไอคอนสัมผัส ณ วันนี้นี่คือภาพ PNG 180x180 รูปภาพนี้ไม่ควรใช้ความโปร่งใสและมุมจะถูกปัดโดยอัตโนมัติเมื่อเพิ่มลงในหน้าจอหลัก ประกาศด้วย:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

ในช่วงหลายปีที่ผ่านมาไอคอนนี้ได้กลายเป็น "ไอคอนความละเอียดสูงเริ่มต้น" สำหรับเบราว์เซอร์จำนวนมาก ดังนั้นคุณจะพบที่อื่นเมื่อเพิ่มในบุ๊กมาร์ก ฯลฯ

Android Chrome

Android Chrome อาศัยWeb App Manifest แม้ว่าไฟล์ Manifest นี้จะไม่ได้มีไว้สำหรับ Android Chrome แต่ปัจจุบันเป็นผู้สนับสนุนหลัก ดังนั้นในขณะนี้การพิจารณาไอคอนจาก Web App Manifest เป็นของ Android Chrome ก็ยังค่อนข้างปลอดภัย

ตามชื่อที่แนะนำ Web App Manifest มีไว้สำหรับเว็บแอป แต่เว็บไซต์ใด ๆ ก็สามารถใช้เป็นวิธีอ้างอิงไอคอนบางอย่างได้

Android คาดว่าจะมีไอคอน PNG 192x192 โปร่งใสอนุญาตและสนับสนุน

รายการประกาศด้วย:

<link rel="manifest" href="/icons/site.webmanifest">

Edge และ IE 12

Microsoft เปิดตัวbrowserconfigซึ่งเป็นเอกสาร XML ซึ่งแสดงรายการไอคอนต่างๆที่เหมาะสมกับ Metro UI

ไฟล์และสีพื้นหลังประกาศด้วย:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

เบราว์เซอร์เดสก์ท็อปแบบคลาสสิก

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... นี่คือสิ่งที่พร่ามัวเล็กน้อย ในอดีตมีfavicon.icoไฟล์เดียวที่ยังคงรองรับ อย่างไรก็ตามเบราว์เซอร์ล่าสุดมักเลือกไอคอน PNG ซึ่งมีน้ำหนักเบากว่า นอกจากนี้เบราว์เซอร์บางตัวไม่สามารถเลือกไอคอนที่เหมาะสมในไฟล์ ICO ได้ (รูปแบบนี้สามารถฝังไอคอนได้หลายเวอร์ชัน) ทำให้ไอคอนความละเอียดต่ำถูกนำไปใช้อย่างไม่ถูกต้อง

อาจถูกล่อลวงให้ทิ้งของเก่าfavicon.icoทั้งหมด แม้ว่าฉันต้องการก้าวกระโดดใน RFG แต่ฉันไม่ได้ทำการทดสอบที่จำเป็นเพื่อประเมินผลกระทบต่อเบราว์เซอร์รุ่นเก่า

ดังนั้นคำสั่งผสมที่ฉันยังคงแนะนำในวันนี้ด้วยfavicon.icoการฝังไอคอน 16x16, 32x32 และ 48x48:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

เบราว์เซอร์อื่น ๆ

เบราว์เซอร์อื่น ๆ อาจมีไอคอนเฉพาะ ยกตัวอย่างเช่นโคสต์โดยโอเปร่าที่กำลังมองหาไอคอน 228x228 ความจำเป็นในการให้ความสำคัญกับเบราว์เซอร์เหล่านี้ไม่ชัดเจน โดยปกติจะใช้ไอคอนสัมผัสหรือไอคอนอื่น ๆ เมื่อไม่พบไอคอน "ของพวกเขา"

สรุป

ตามที่ประกาศไว้ตอนต้นนี่คือสิ่งที่RealFaviconGeneratorสร้างขึ้น

นอกจากนี้ยังควรค่าแก่การกล่าวถึงว่าควรเพิ่มแท็กอื่น ๆ ร่วมกับ favicon เช่นแท็ก OG การ์ด Twitter หรือ MS-application ทั้งหมดนี้มีจุดประสงค์เดียวกันนั่นคือการระบุภาพลักษณ์ของแบรนด์ของคุณและควรรวมไว้ด้วย

สามารถพบการ์ด Twitter ได้ที่นี่

ฉันเพิ่มแท็กต่อไปนี้

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

ฉันพบว่าผู้ใช้หลายคนสร้างรูปภาพในรูปแบบ 1300px x 650px และ jpg / png

หลังจากเพิ่มแท็กทั้งหมดแล้วควรตรวจสอบความถูกต้องที่นี่

Facebook OG มีตัวเลือกเพิ่มเติม แต่โดยทั่วไปมีดังนี้:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook แนะนำอัตราส่วนเฉพาะของรูปภาพและขนาดไฟล์ จำกัด ไว้ที่ 8Mb ในการเก็บภาพที่คล้ายกันด้วยการ์ด twitter ขอแนะนำขนาด 1240px x 650px และรูปแบบ jpg / png Facebook และ twitter ไม่รับ svg ...

ฉันพบว่าแบรนด์ระดับโลกบางแบรนด์ใช้แท็กนี้ในเว็บไซต์ของตน หนึ่งมีขนาด 150x150 พิกเซลและรูปแบบ png เบราว์เซอร์อาจใช้รูปภาพนี้เพื่อแสดงในผลการค้นหา

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator ครอบคลุม Microsoft favicons ด้วย มีเมตาแท็กอื่น ๆ อีกมากมายสำหรับ MS-application เพื่อเพิ่มประสิทธิภาพในการโค้งคำนับหน้าและข้อมูลอื่น ๆ เช่นรูปภาพจะปรากฏขึ้น หัวข้อนี้น่าอ่านด้วย

ฉันหวังว่านี่จะเป็นประโยชน์สำหรับใครบางคนและขยายหัวข้อการสร้างแบรนด์เว็บไซต์ของคุณ