favicon ไม่ใช่ภาพเดียวอีกต่อไปแล้ว เบราว์เซอร์ มือถือ และระบบปฏิบัติการต่างหยิบขนาดที่ต่างกันไปใช้ในช่องที่ต่างกันแท็บเบราว์เซอร์ บุ๊กมาร์ก หน้าจอหลัก iOS ตัวสลับแอป Android ส่ง PNG 32×32 อันเดียวแล้วมันจะใช้ได้ในแท็บแต่ดูเบลอเมื่อมีคนบันทึกเว็บของคุณลงมือถือ ส่งชุดเต็มแล้วทุกพื้นผิวได้ไอคอนคมชัด
นี่คือขนาดที่คุณต้องการเป๊ะ ๆ แต่ละอันทำอะไร และทำไมรายการถึงเป็นแบบนี้
ขนาดที่สำคัญ
เว็บส่วนใหญ่ครอบคลุมด้วย PNG หกขนาดบวก .ico ตกทอด นี่คือการอ้างอิง:
| ขนาด | รูปแบบ | ใช้ที่ไหน |
|---|---|---|
| 16×16 | PNG (ใน .ico) | แท็บเบราว์เซอร์ แถบที่อยู่ บุ๊กมาร์ก |
| 32×32 | PNG (ใน .ico) | แท็บ Retina ทางลัดทาสก์บาร์ Windows |
| 48×48 | PNG | ไอคอนเว็บ Windows พื้นผิว Android บางอย่าง |
| 180×180 | PNG | หน้าจอหลัก iOS (apple-touch-icon) |
| 192×192 | PNG | หน้าจอหลัก Android การติดตั้ง PWA |
| 512×512 | PNG | หน้าจอเริ่มต้น PWA ร้านแอป DPI สูง |
ไฟล์ favicon.ico เป็นภาชนะที่รวมขนาดเล็ก (ปกติ 16 และ 32 บางครั้ง 48) เบราว์เซอร์รุ่นเก่าและ Windows หามันด้วยชื่อที่รากเว็บของคุณ มันจึงยังคุ้มที่จะส่งแม้ว่าเบราว์เซอร์สมัยใหม่จะใช้ PNG อย่างเต็มใจ
ทำไมเยอะจัง? ทัวร์ด่วน
เหตุผลที่รายการยาวคือไอคอนปรากฏในขนาดทางกายภาพที่ต่างกันมาก
16 และ 32 คือไอคอนแท็บประจำวัน 16 คือขนาดคลาสสิก 32 ครอบคลุมจอ DPI สูง ("Retina") ที่ 16 จะดูนุ่ม เบราว์เซอร์เลือกอันที่พอดีกับความหนาแน่นพิกเซล
48 เป็นเรื่องของ Windowsมันใช้สำหรับทางลัดเว็บและแสดงคมกว่าในไม่กี่ที่ที่ 32 ครอบคลุมได้ไม่ดี
180 คือ apple-touch-icon ของ Apple เมื่อมีคนแตะ "เพิ่มไปยังหน้าจอหลัก" บน iPhone หรือ iPad iOS ใช้อันนี้ ทำผิดแล้ว iOS จะหยิบภาพหน้าจอที่ย่อลงหรือแสดงไทล์ตัวอักษรธรรมดาซึ่งทั้งคู่ไม่เหมือนแบรนด์ของคุณ
192 และ 512 คือขนาด Progressive Web App ที่ประกาศในไฟล์ manifest.webmanifest 192 คือไอคอนหน้าจอหลัก Android 512 ป้อนหน้าจอเริ่มต้นและถูกย่อสำหรับอย่างอื่นที่ OS ต้องการ ถ้าเว็บของคุณติดตั้งได้ สองอันนี้ห้ามต่อรอง
คุณต้องการใหญ่กว่า 512 ไหม?
ไม่ 512×512 คือเพดานในทางปฏิบัติสำหรับ favicon เว็บสเปก webmanifest และทุกแพลตฟอร์มหลักสูงสุดราว ๆ นั้น ถ้างานศิลป์ต้นทางของคุณเป็น 1024 หรือใหญ่กว่า นั่นก็โอเคในฐานะภาพ เริ่มต้น (มีรายละเอียดให้ย่อจากมากกว่า) แต่คุณไม่ส่ง favicon 1024 อะไรที่เกิน 512 แค่เพิ่มไบต์ที่ไม่มีใครใช้
กฎเดียวที่สำคัญตอนทำ ขึ้น: เริ่มจากต้นทางที่ใหญ่และเป็นสี่เหลี่ยมจัตุรัส ต้นฉบับ 512×512 หรือ 1024×1024 ย่อได้สะอาดเป็นทุกขนาดที่เล็กกว่า เริ่มจากภาพจิ๋วแล้วขนาดเล็กจะดูขุ่นเพราะไม่เคยมีรายละเอียดพอให้เก็บ
ออกแบบให้รอด 16×16
ขนาดที่ยากที่สุดคือเล็กที่สุด ที่ 16×16 โลโก้ที่มีรายละเอียดกลายเป็นรอยเลอะที่อ่านไม่ออก เคล็ดลับบางข้อที่ใช้ได้ทั่วทุกเว็บ:
- ทำให้เรียบง่าย เวิร์ดมาร์กเต็มจะอ่านไม่ออกที่ 16px ใช้ตัวอักษรเดียว อักษรย่อ หรือส่วนที่จำได้มากที่สุดของเครื่องหมายคุณ
- คงคอนทราสต์ให้สูง เพื่อให้รูปทรงยังอ่านออกทั้งบนพื้นหลังแท็บสว่างและมืด
- เว้นระยะขอบนิดหน่อยไอคอนที่แตะขอบทั้งสี่รู้สึกอึดอัดในแท็บ
- ทดสอบมันเล็ก ๆ ซูมเบราว์เซอร์ออก หรือแค่ดูแท็บจริง ถ้าคุณบอกไม่ได้ว่ามันคืออะไรในพริบตา ให้ทำให้เรียบง่ายขึ้น
สร้างทั้งชุด
คุณไม่สร้างพวกนี้ด้วยมือ วางภาพสี่เหลี่ยมจัตุรัสหนึ่งภาพลงในเครื่องมือสร้าง Favicon แล้วมันผลิตชุดเต็มในครั้งเดียวfavicon.ico PNG ขนาด 16/32/48/180/192/512 webmanifest ที่พร้อมใช้ และสนิปเป็ต HTML <head> ที่แน่นอนให้วางเข้าไป ทุกอย่างทำงานในเบราว์เซอร์ของคุณ: ภาพไม่เคยถูกอัปโหลด และหลังเข้าครั้งแรก เครื่องมือทำงานแบบออฟไลน์ได้
HTML ที่คุณจะได้ในที่สุด
สำหรับอ้างอิง การตั้งค่า favicon ที่สมบูรณ์ดูประมาณนี้ใน <head> ของคุณ:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
เครื่องมือสร้างเขียนอันนี้ให้คุณ คุณจึงวางมันเข้าไปได้เลย ครอบคลุมหกขนาดบวก .ico และ manifest แล้วทุกเบราว์เซอร์ มือถือ และ OS ก็ได้ไอคอนคมชัดที่มันขอ