ใน favicons.zip มีอะไรบ้าง
อัปโหลดรูปเพียงรูปเดียว เครื่องมือจะสร้างไฟล์ทั้งหมดที่เว็บไซต์ยุคนี้ต้องใช้ให้ภายในเบราว์เซอร์:
| ไฟล์ | ขนาด | ใช้ที่ไหน |
|---|---|---|
favicon.ico |
16, 32 และ 48 px ในไฟล์เดียว | แท็บเบราว์เซอร์ บุ๊กมาร์ก Windows และเครื่องมือใดก็ตามที่ขอ /favicon.ico |
favicon-16x16.png |
16×16 | แท็บบนหน้าจอทั่วไป |
favicon-32x32.png |
32×32 | แท็บบนหน้าจอความละเอียดสูง ทางลัด |
favicon-48x48.png |
48×48 | ผลการค้นหาของ Google ทางลัดบนเดสก์ท็อป |
apple-touch-icon.png |
180×180 | "เพิ่มไปยังหน้าจอโฮม" บน iPhone และ iPad |
android-chrome-192x192.png |
192×192 | หน้าจอหลักของ Android |
android-chrome-512x512.png |
512×512 | เว็บที่ติดตั้งเป็นแอป (PWA) และหน้าจอเปิดแอป |
site.webmanifest |
— | บอก Android/Chrome ว่าไอคอนใหญ่สองไฟล์อยู่ที่ไหน |
README-favicon.html |
— | แท็ก HTML สำหรับนำไปวาง |
รูปต้นฉบับแบบไหนดีที่สุด
- สี่เหลี่ยมจัตุรัส เรียบง่าย ชัดเจน ที่ขนาด 16 px คุณมีพิกเซลทั้งหมดแค่ 256 จุด โลโก้เต็มพร้อมสโลแกนจะกลายเป็นจุดเลอะ ๆ แต่ตัวอักษรตัวเดียวหรือสัญลักษณ์ยังอ่านออก หลายแบรนด์จึงใช้โลโก้ฉบับย่อสำหรับ favicon โดยเฉพาะ
- อย่างน้อย 512×512 ไอคอนใหญ่ที่สุดคือ 512 px รูปที่เล็กกว่านั้นจะถูกขยายและดูเบลอ โลโก้ SVG เหมาะที่สุด เพราะจะถูกเรนเดอร์ที่ความละเอียดสูงก่อนย่อ
- PNG พื้นโปร่งใสหรือ SVG ความโปร่งใสยังคงอยู่ใน
.icoและ PNG ขนาดเล็ก ไอคอนจึงดูดีทั้งบนธีมสว่างและธีมมืดของเบราว์เซอร์ - รูปไม่ใช่สี่เหลี่ยมจัตุรัส? รูปจะถูกวางให้พอดีในกรอบสี่เหลี่ยมโดยไม่ถูกตัด และมีพื้นที่โปร่งใสด้านข้าง ถ้าต้องการให้เต็มกรอบ ให้ ครอบตัด ก่อน หรือทำเวอร์ชันวงกลมด้วย ครอบตัดวงกลม
พื้นหลังของไอคอน Apple touch
iOS ไม่รองรับความโปร่งใสในไอคอนหน้าจอโฮม ส่วนที่โปร่งใสจะกลายเป็นสีดำ ดังนั้น apple-touch-icon.png ขนาด 180×180 จะมีพื้นหลังสีทึบเสมอ ค่าเริ่มต้นเป็นสีขาว คุณใช้ช่องเลือกสีข้างกรอบอัปโหลดเพื่อตั้งเป็นสีแบรนด์ได้ (เครื่องมือดูดสี ช่วยหาสีจากโลโก้ของคุณได้) ส่วนขนาดอื่นยังคงโปร่งใส
วางไฟล์ไว้ที่ไหน
- แตกไฟล์ ZIP แล้วอัปโหลดทุกไฟล์ไปที่ โฟลเดอร์ราก (root) ของเว็บไซต์ ให้
https://yoursite.com/favicon.icoเปิดแล้วเห็นไอคอน - คัดลอกแท็กจาก
README-favicon.htmlไปวางใน<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">
- ถ้าเว็บไซต์อยู่ในโฟลเดอร์ย่อย ให้แก้พาธให้ตรง
ใน WordPress เมนู รูปแบบ → ปรับแต่ง → อัตลักษณ์เว็บไซต์ → ไอคอนเว็บไซต์ จัดการให้ได้ด้วยรูป 512×512 รูปเดียว ให้ใช้ android-chrome-512x512.png ส่วน Shopify, Wix และ Squarespace ก็มีช่อง "favicon" คล้ายกัน
ไฟล์ site.webmanifest ที่ให้มามีแค่รายการไอคอน หากต้องการให้ผู้เข้าชมติดตั้งเว็บของคุณเป็นแอปได้ ให้เพิ่ม name, short_name, theme_color, background_color และ "display": "standalone"
"เปลี่ยน favicon แล้ว แต่ยังเห็นอันเก่า"
Favicon ถูกแคชไว้แน่นกว่าแทบทุกอย่างบนเว็บไซต์
- เปิด
https://yoursite.com/favicon.icoโดยตรงแล้วรีโหลดแบบบังคับ (Ctrl + F5 หรือ Cmd + Shift + R บน Mac) - เพิ่มเวอร์ชันในลิงก์ เช่น
href="/favicon.ico?v=2"เพื่อให้เบราว์เซอร์มองว่าเป็นไฟล์ใหม่ - ล้างแคชของ CDN หรือปลั๊กอินแคช หากใช้อยู่
- บุ๊กมาร์กและทางลัดบนหน้าจอโฮมจะยังใช้ไอคอนเก่าจนกว่าจะสร้างใหม่
- Google จะอัปเดตไอคอนในผลการค้นหาหลังจากรวบรวมข้อมูลหน้าแรกของคุณใหม่ ซึ่งอาจใช้เวลาหลายวันถึงหลายสัปดาห์ Google ต้องการไอคอนสี่เหลี่ยมจัตุรัสที่มีด้านเป็นพหุคูณของ 48 px ซึ่ง PNG 48×48 และ
.icoตรงตามเงื่อนไขนี้
เครื่องมือที่เกี่ยวข้อง
- ลบพื้นหลังรูปถ่ายก่อนนำไปทำไอคอน: ลบพื้นหลัง
- มีโลโก้เป็น WebP? แปลงเป็น PNG ถ้าโปรแกรมของคุณเปิดไม่ได้
- ต้องการรูป 512×512 ธรรมดาสำหรับร้านค้าหรือโปรไฟล์? ปรับขนาดเป็น 512×512