วิธีสร้าง Favicon
การสร้าง favicon นั้นใช้เวลาสองนาทีด้วยเครื่องมือที่เหมาะสม เริ่มจากรูปภาพต้นฉบับสี่เหลี่ยมจัตุรัส — อย่างน้อย 512×512 พิกเซล — รันผ่าน favicon generator และรับแพ็คเกจที่สมบูรณ์: หลายขนาด .ico, SVG, apple-touch-icon และ manifest PNGs คู่มือนี้จะอธิบายทุกขั้นตอนตั้งแต่การเตรียมแหล่งที่มาไปจนถึงการตรวจสอบเบราว์เซอร์ สำหรับการอ้างอิงแบบเจาะลึก โปรดดูที่ full tutorial
ไอคอน Fav คือไอคอนขนาดเล็กที่เบราว์เซอร์แสดงในแถบแท็บ แถบที่อยู่ และรายการบุ๊กมาร์ก บนอุปกรณ์เคลื่อนที่ ไอคอนนี้จะกลายเป็นไอคอนบนหน้าจอหลักเมื่อผู้ใช้บันทึกไซต์ของคุณ บน Windows จะปรากฏบนหมุดแถบงานและทางลัดบนเดสก์ท็อป การทำให้ไอคอน Fav ถูกต้องนั้นใช้เวลาเพียงเล็กน้อยโดยมีผลกระทบต่อแบรนด์ในวงกว้าง — ทุกการดูหน้าเว็บเริ่มต้นด้วยไอคอนของคุณที่วางอยู่ในแท็บของผู้ใช้
การตั้งค่า favicon สมัยใหม่ไม่ใช่ไฟล์เดียว แต่เป็นชุดที่มีการประสานงานกัน .ico หลายขนาดรองรับการใช้เบราว์เซอร์สำรองแบบสากล SVG ให้การเรนเดอร์ที่คมชัดและปรับขนาดได้บนเบราว์เซอร์สมัยใหม่ รวมถึงการรองรับโหมดมืด 180×180 PNG (apple-touch-icon) คือสิ่งที่ iOS ใช้สำหรับการติดตั้งบนหน้าจอหลัก 192×192 และ 512×512 PNG ป้อนข้อความแจ้งการติดตั้ง Android PWA อิมเมจต้นฉบับที่เตรียมมาอย่างดีหนึ่งอิมเมจจะสร้างสิ่งเหล่านี้ทั้งหมดในคราวเดียว
การเตรียมรูปภาพต้นฉบับเป็นขั้นตอนที่ถูกมองข้ามมากที่สุด โลโก้ของคุณต้องเป็นสี่เหลี่ยมจัตุรัส — การครอบตัดแบบไม่สมมาตรจะให้ผลลัพธ์ที่ยืดออกเสมอ ออกแบบเครื่องหมายแบรนด์ของคุณในรูปแบบที่เรียบง่ายซึ่งอ่านได้ชัดเจนในขนาดที่เล็ก: ลดเส้นละเอียด ลบข้อความเล็กๆ และเพิ่มคอนทราสต์ สิ่งที่ดูสวยงามที่ 512×512 อาจกลายเป็นหยดที่อ่านไม่ได้ที่ 16×16 หากคุณข้ามขั้นตอนการลดความซับซ้อนนี้
SVG เป็นรูปแบบต้นฉบับที่เหมาะสมที่สุดเนื่องจากไม่ขึ้นกับความละเอียด กราฟิกแบบเวกเตอร์จะแรสเตอร์ตามความหนาแน่นของพิกเซลโดยไม่สูญเสียคุณภาพ หากคุณมีแรสเตอร์ PNG หรือ JPG เท่านั้น ตรวจสอบให้แน่ใจว่ามีขนาดอย่างน้อย 512×512 ก่อนสร้าง การลดขนาดจากสิ่งที่เล็กกว่าจะทำให้เกิดภาพเบลอที่ประกอบกันในทุกขั้นตอนการปรับขนาด และส่งผลให้ไอคอนแท็บไม่ชัดเจน
รูปแบบ .ico เป็นคอนเทนเนอร์ ไม่ใช่รูปภาพเดียว มันเก็บเฟรมแรสเตอร์หลายเฟรม — โดยทั่วไปคือ 16×16, 32×32, 48×48 และ 64×64 — ในไฟล์เดียว เบราว์เซอร์แยกวิเคราะห์ไดเร็กทอรี ICO และเรนเดอร์เฉพาะเฟรมที่ตรงกับความหนาแน่นของการแสดงผลที่ต้องการมากที่สุด วิธีการใช้ไฟล์เดียวนี้หมายความว่าคุณไม่จำเป็นต้องมีแท็กลิงก์แยกกันสำหรับความละเอียดแต่ละรายการ แท็กเดียวครอบคลุมแท็บทุกขนาด
อัปโหลดภาพต้นฉบับของคุณไปที่ favicon generator เครื่องมือนี้จะประมวลผลทุกอย่างภายในเบราว์เซอร์ของคุณ — รูปภาพของคุณจะไม่มีวันออกจากอุปกรณ์ของคุณ ภายในไม่กี่วินาที ระบบจะสร้างแพ็คเกจดาวน์โหลดที่ประกอบด้วย favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png และ site.webmanifest รวมถึงแท็กลิงก์ HTML ที่พร้อมสำหรับวาง
การวางไฟล์ทำได้ง่ายตรงไปตรงมา วางไฟล์ที่สร้างขึ้นทั้งหมดลงในไดเร็กทอรีรากสาธารณะของไซต์ของคุณ ซึ่งเป็นโฟลเดอร์เดียวกับที่ใช้กับ index.html ของคุณ สำหรับโปรเจ็กต์ Vite และ Create React App นี่คือโฟลเดอร์ /public สำหรับโปรเจ็กต์ Next.js App Router ให้วาง favicon.ico ภายใน /app และไฟล์ PNG ใน /public สำหรับไซต์แบบคงที่ ให้วางทุกอย่างไว้ข้างไฟล์ HTML ของคุณ
แท็กลิงก์ HTML บอกให้เบราว์เซอร์ทราบว่าจะใช้ไฟล์ใดสำหรับแต่ละบริบท ค่าขั้นต่ำคือหนึ่งบรรทัด: `<link rel='icon' href='/favicon.ico'>` ชุดที่แนะนำแบบเต็มจะเพิ่มอีกสามบรรทัด: บรรทัดหนึ่งสำหรับตัวแปร SVG หนึ่งบรรทัดสำหรับ apple-touch-icon และอีกหนึ่งบรรทัดสำหรับรายการเว็บ วางข้อมูลโค้ดที่สร้างขึ้นภายในองค์ประกอบ `<head>` ของคุณ ลำดับแท็กไม่สำคัญตราบใดที่อยู่นำหน้า "</head>"
การแคชของเบราว์เซอร์เป็นสาเหตุสำคัญของความสับสนเมื่อไอคอน Fav ไม่อัปเดต เบราว์เซอร์แคช /favicon.ico ต่อต้นทาง และอาจไม่เคารพส่วนหัวการควบคุมแคชมาตรฐานเช่นเดียวกับที่ทำกับเนื้อหาอื่นๆ หากไอคอนเก่าของคุณยังคงอยู่ ให้เปิดหน้าต่างที่ไม่ระบุตัวตนใหม่ หรือเพิ่มสตริงข้อความค้นหาป้องกันแคช เช่น `?v=2` ต่อท้าย href ในแท็กลิงก์ของคุณ เพื่อบังคับให้เบราว์เซอร์ดึงไฟล์ที่อัปเดต
ข้อผิดพลาดทั่วไป ได้แก่ การอัปโหลดรูปภาพที่ไม่ใช่สี่เหลี่ยมจัตุรัส (ทำให้ไอคอนยืดออก) โดยใช้แหล่งที่มาที่มีขนาดต่ำกว่า 256×256 พิกเซล (เบลอเมื่อแสดงขนาดที่ใหญ่ขึ้น) และการละเว้น apple-touch-icon (การติดตั้งหน้าจอหลัก iOS จะแสดงภาพหน้าจอของหน้าแทน) ทั้งสามได้รับการแก้ไขโดยเริ่มจากแหล่งสี่เหลี่ยมจัตุรัส 512×512 PNG หรือ SVG และปล่อยให้ตัวสร้างจัดการทุกขนาดเอาต์พุต
การสนับสนุนโหมดมืดนั้นคุ้มค่าที่จะสร้างขึ้นตั้งแต่เริ่มต้น เบราว์เซอร์จำนวนมากแสดงแถบแท็บเป็นโครเมียมสีเข้มเมื่อระบบของผู้ใช้อยู่ในโหมดมืด หากไอคอนของคุณเป็นเครื่องหมายสีเข้มบนพื้นหลังโปร่งใส ไอคอนนั้นสามารถหายไปได้ในแท็บสีเข้ม จัดส่ง favicon SVG พร้อมด้วยบล็อกสไตล์ `@media (prefers-color-scheme: dark)` แบบฝังที่เปลี่ยนสีเติม — ไม่จำเป็นต้องใช้แท็ก HTML เพิ่มเติม มีเพียงไฟล์ SVG ที่อัปเดตแล้ว
ตรวจสอบ favicon ของคุณโดยใช้ live favicon tester หลังจากการปรับใช้ ผู้ทดสอบจำลองแท็บเบราว์เซอร์ บุ๊กมาร์ก และบริบทพร้อมท์การติดตั้ง และแสดงให้เห็นว่าไอคอนของคุณแสดงผลที่ขนาด 16, 32, 48, 128 และ 512 พิกเซลเคียงข้างกัน ตรวจสอบแท็บที่ปักหมุดใน Chrome และ Safari ด้วยตนเอง และใช้ "เพิ่มไปที่หน้าจอหลัก" บน iOS เพื่อยืนยัน apple-touch-icon
สำหรับคำแนะนำเฉพาะแพลตฟอร์ม โปรดดูที่ favicon for WordPress, favicon for Shopify, favicon for React และ favicon for Next.js ชุดไฟล์ที่สร้างขึ้นจะเหมือนกันในทุกแพลตฟอร์ม สิ่งที่แตกต่างกันคือตำแหน่งที่คุณอัปโหลดไฟล์ และวิธีที่แพลตฟอร์มแทรกหรือแทนที่แท็กลิงก์ HTML
เยี่ยมชม favicon ของคุณอีกครั้งทุกครั้งที่คุณเปลี่ยนโฉมใหม่ ไอคอน Fav ที่แคชไว้จะยังคงอยู่ในบุ๊กมาร์กและหน้าจอหลักของอุปกรณ์เคลื่อนที่เป็นเวลานานหลังจากการออกแบบไซต์ใหม่ใช้งานได้ การอัปเดตสตริงเวอร์ชันในแท็กลิงก์ href บังคับให้เบราว์เซอร์ดึงไฟล์ใหม่ในการเข้าชมครั้งถัดไป โดยค่อยๆ แทนที่ไอคอนเก่าในตำแหน่งที่แคชไว้ทั้งหมด ดูคำแนะนำ best favicon format สำหรับการแจกแจงขนาดไฟล์และการแลกเปลี่ยนความเข้ากันได้ในรูปแบบต่อรูปแบบ
วิธีการทำงาน
- 1
เตรียมอิมเมจต้นฉบับแบบสี่เหลี่ยม
ส่งออกโลโก้หรือไอคอนของคุณเป็น 512×512 PNG โดยมีพื้นหลังโปร่งใส หรือเป็น SVG ที่มีสี่เหลี่ยมจัตุรัส viewBox (เช่น `viewBox='0 0 512 512'') ลดความซับซ้อนของรายละเอียดเล็กๆ น้อยๆ ที่จะมองไม่เห็นที่ขนาด 16×16
- 2
สร้างแพ็คเกจ favicon ของคุณ
อัปโหลดซอร์สไปยัง [favicon generator](tool:favicon-generator) เครื่องมือนี้สร้าง favicon.ico (หลายขนาด 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png และ site.webmanifest ทั้งหมดในครั้งเดียว
- 3
คัดลอกไฟล์ทั้งหมดไปยังรูทไซต์ของคุณ
วางทุกไฟล์จากไฟล์ zip ดาวน์โหลดลงในรูทสาธารณะของโปรเจ็กต์ของคุณ — ไดเร็กทอรีที่รองรับ index.html สำหรับ Next.js App Router, favicon.ico ไปใน /app; PNG ไปใน /public
- 4
วางแท็กลิงก์ HTML ลงใน <head>
คัดลอกข้อมูลโค้ด HTML ที่สร้างขึ้นและเพิ่มลงในองค์ประกอบ `<head>` ชุดเต็มครอบคลุม .ico fallback, ตัวแปร SVG, apple-touch-icon และลิงก์รายการ — ทั้งหมดหกบรรทัด
- 5
ตรวจสอบข้ามเบราว์เซอร์และอุปกรณ์
เปิดไซต์ของคุณใน Chrome, Safari, Firefox และ Edge ตรวจสอบแท็บ แถบบุ๊กมาร์ก และแถบที่อยู่ บน iOS ให้แตะแผ่นแบ่งปันและ "เพิ่มไปที่หน้าจอหลัก" เพื่อทดสอบ apple-touch-icon ใช้ [favicon tester](utility:favicon-tester) สำหรับการจำลองอย่างรวดเร็ว
- 6
แคชหยุดทำงานเมื่ออัปเดต favicon ที่มีอยู่
หากแทนที่ไอคอน favicon แบบสด ให้เพิ่มสตริงเวอร์ชันในแท็กลิงก์ href (`?v=2`, `?v=3` ฯลฯ) การดำเนินการนี้บังคับให้เบราว์เซอร์ทั้งหมดดึงไฟล์ที่อัปเดตเมื่อโหลดหน้าถัดไป แทนที่จะให้บริการเวอร์ชันแคช
ลองเลย
สร้าง favicon ของคุณทันที
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
วิธีที่ง่ายที่สุดในการสร้าง favicon คืออะไร?+
อัปโหลดสี่เหลี่ยมจัตุรัส 512×512 PNG หรือ SVG ไปยังตัวสร้าง FetchFavicon สร้างไฟล์ที่จำเป็นทั้งหมด — .ico, SVG, apple-touch-icon, manifest PNGs — รวมถึง HTML ที่พร้อมสำหรับวางภายในไม่กี่วินาที โดยไม่ต้องสมัครและไม่มีการอัพโหลดเซิร์ฟเวอร์
รูปภาพต้นฉบับของฉันควรมีขนาดเท่าใด+
อย่างน้อย 512×512 พิกเซล ถ้าจะให้ดีควรเป็น SVG การที่น้อยลงจะเสี่ยงต่อการเบลอที่มองเห็นได้ในขนาด 256×256 ที่ใช้โดย Windows และในขนาด 512×512 ที่จำเป็นสำหรับข้อความแจ้งการติดตั้ง PWA การลดขนาดภาพขนาดเล็กจะส่งผลให้สูญเสียคุณภาพของภาพในทุกขั้นตอนการปรับขนาด
ฉันจำเป็นต้องมี apple-touch-icon หรือไม่?+
ใช่ หากผู้เยี่ยมชมใช้ iPhone หรือ iPad หากไม่มีสิ่งนี้ การติดตั้งหน้าจอหลัก iOS จะแสดงภาพหน้าจอขนาดย่อของเพจคุณภาพต่ำ แทนที่จะเป็นเครื่องหมายแบรนด์ของคุณ สิ่งที่คุณต้องการคือ 180×180 PNG ที่เชื่อมโยงกับ `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`
เหตุใด favicon ของฉันจึงไม่แสดงในแท็บเบราว์เซอร์+
ส่วนใหญ่มักเป็นปัญหาเกี่ยวกับแคช เปิดหน้าต่างส่วนตัว/ไม่ระบุตัวตน และไปที่ไซต์ของคุณ หากยังคงไม่ปรากฏขึ้น ให้ตรวจสอบว่ามีการแสดง favicon.ico ที่รูทโดเมนของคุณ และเส้นทางแท็ก href แก้ไขอย่างถูกต้อง — ตรวจสอบการพิมพ์ผิดและเครื่องหมายทับนำหน้าหายไป
ฉันต้องการทั้ง .ico และ SVG หรือไม่+
ใช่ เพื่อความคุ้มครองเต็มรูปแบบ .ico จัดการกับเบราว์เซอร์รุ่นเก่า ทางลัด Windows และเครื่องมือของบริษัทอื่นที่ดึงข้อมูล /favicon.ico โดยตรง SVG จัดการการเรนเดอร์ที่คมชัดบน Chrome, Firefox, Edge และ Safari 15+ และรองรับการสลับสีในโหมดมืด โดยทั่วไปขนาดไฟล์รวมจะต่ำกว่า 30 KB
การเปลี่ยนแปลง favicon ใช้เวลานานเท่าใดในการเผยแพร่?+
ตั้งแต่วินาทีไปจนถึงหลายวัน ขึ้นอยู่กับว่าเบราว์เซอร์แคชต้นฉบับมากเพียงใด การแก้ไขที่เร็วที่สุดคือการเพิ่มสตริงการสืบค้นใหม่ (`?v=2`) ต่อท้าย favicon href ของคุณ ทำให้เบราว์เซอร์ถือว่าเป็น URL ใหม่และดึงสำเนาใหม่ทันที
ฉันสามารถใช้ JPEG เป็นแหล่ง favicon ของฉันได้หรือไม่+
คุณสามารถอัปโหลด JPEG ไปยังตัวสร้างได้ แต่ JPEG ไม่รองรับความโปร่งใส หากไอคอนของคุณต้องการพื้นหลังโปร่งใส ซึ่งดูดีที่สุดในแท็บเบราว์เซอร์ ให้เริ่มจาก PNG-32 หรือ SVG แทน เครื่องกำเนิดไฟฟ้าจะแปลงเป็น .ico และ PNG อย่างถูกต้อง