Image to Favicon: สร้างไอคอนเว็บไซต์จากทุกรูปภาพ

Q: ฉันจะอ้างถึง favicons ใน HTML ได้อย่างไร?

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

อัปเดตล่าสุด: June 28, 2026. การรองรับ favicon ของเบราว์เซอร์มีการพัฒนาอย่างต่อเนื่อง ขนาดและรูปแบบหลักที่ระบุไว้ในที่นี้ครอบคลุมภาพรวมปัจจุบัน

Favicon คือไอคอนขนาดเล็กที่ปรากฏในแท็บเบราว์เซอร์ รายการบุ๊กมาร์ก และหน้าจอหลักของโทรศัพท์เมื่อมีคนบันทึกเว็บไซต์ของคุณ การแปลงรูปภาพให้เป็น favicon หมายถึงการสร้างไฟล์ประเภทที่ถูกต้องในขนาดที่เหมาะสม เพื่อให้ไอคอนดูคมชัดไม่ว่าจะปรากฏที่ใด — ตั้งแต่แท็บเบราว์เซอร์ขนาด 16-pixel ไปจนถึง Apple Touch icon ขนาด 180-pixel คู่มือนี้จะครอบคลุมขนาดที่แต่ละแพลตฟอร์มคาดหวัง รูปแบบไฟล์ที่ต้องสร้าง และวิธีการทำให้ไอคอนยังคงสามารถจดจำได้แม้ในขนาดเล็กจิ๋ว

คำตอบสั้นๆ: วิธีสร้าง favicon จากรูปภาพ?

เริ่มต้นด้วยรูปภาพต้นฉบับที่เป็นสี่เหลี่ยมจัตุรัส (หรือครอบตัดให้เป็นสี่เหลี่ยมจัตุรัสด้วย image cropper), resize ให้มีขนาดเล็กลงตามขนาด favicon มาตรฐาน (16px, 32px, 180px, 512px), และส่งออกเป็น PNG พร้อมกับไฟล์ ICO สำหรับเบราว์เซอร์รุ่นเก่า อ้างอิงพวกมันในส่วน <head> ของ HTML ด้วยแท็กลิงก์ที่เหมาะสม ทดสอบเวอร์ชัน 16px ในแถบแท็บของเบราว์เซอร์ เพราะถ้าไอคอนไม่สามารถจดจำได้ที่ขนาดนั้น การมีเวอร์ชันที่ใหญ่กว่าก็จะไม่ช่วยแก้ไข ควรเก็บเวอร์ชัน SVG ไว้ด้วย หากโลโก้เป็นแบบเวกเตอร์ เพื่อให้แสดงผลคมชัดบนหน้าจอ high-DPI

ต้องใช้ขนาด favicon เท่าไหร่บ้าง?

บริบทที่แตกต่างกันจะแสดง favicon ด้วยขนาดที่ต่างกัน การระบุขนาดที่เหมาะสมจะช่วยให้ภาพคมชัดในทุกที่

ขนาด	ไฟล์	ใช้สำหรับ
16x16	ICO / PNG	Browser tab (legacy)
32x32	ICO / PNG	Browser tab (retina)
180x180	PNG	Apple Touch icon
192x192	PNG	Android home screen
512x512	PNG	PWA / splash
Any	SVG	Modern browsers, high-DPI

เวอร์ชัน 16px เป็นเวอร์ชันที่สำคัญที่สุด เพราะเป็นสิ่งที่คนส่วนใหญ่เห็นในแท็บเบราว์เซอร์
ไอคอน Apple Touch ต้องการขนาด 180px เพื่อการแสดงผลบนหน้าจอหลักของ iOS ที่คมชัด
SVG ให้บริการสำหรับเบราว์เซอร์สมัยใหม่ได้ทุกความละเอียดโดยไม่ต้องใช้หลายไฟล์
ไฟล์ ICO หนึ่งไฟล์สามารถรวมขนาดหลายขนาดเพื่อรองรับระบบเก่าได้

ต้องออกแบบ favicon อย่างไรให้ใช้งานได้ดีที่ขนาด 16px?

ความท้าทายของ favicon คือมันจะต้องสามารถจดจำได้ที่ขนาด 16 pixels ซึ่งถือว่าเล็กมาก รายละเอียดที่ดูดีที่ 512px จะหายไปเมื่อลดเหลือ 16px ดังนั้นการออกแบบจึงต้องเรียบง่าย

ใช้รูปทรงเดี่ยวที่โดดเด่น เช่น ตัวอักษร สัญลักษณ์โลโก้ หรือไอคอนง่ายๆ
หลีกเลี่ยงเส้นบางและข้อความขนาดเล็ก เพราะมันจะหายไปที่ 16px
ใช้ความเปรียบต่างสูงเพื่อให้รูปทรงโดดเด่นเมื่ออยู่บนพื้นหลังของแท็บ
ทดสอบเวอร์ชัน 16px ด้วยขนาดจริงก่อนใช้งาน

ข้อผิดพลาดทั่วไปคือการใช้โลโก้เต็มพร้อมข้อความ ที่ 16px ตัวอักษรจะอ่านไม่ออก ทำให้ favicon ดูเหมือนคราบเบลอ การแก้ไขคือการดึงองค์ประกอบที่จดจำได้ที่สุดเพียงอย่างเดียว — เช่น ไอคอนหรือตัวอักษรแรก — และใช้สิ่งนั้นเป็น favicon คู่มือ SVG to PNG guide ครอบคลุมการส่งออกเครื่องหมายแบบเวกเตอร์ในขนาดที่คุณต้องการ

คุณควรสร้างรูปแบบไฟล์ใดบ้าง?

Favicons ใช้หลายรูปแบบเนื่องจากการรองรับของเบราว์เซอร์มีการพัฒนาเมื่อเวลาผ่านไป และการครอบคลุมทั้งหมดจะช่วยให้ไอคอนทำงานได้ทุกที่

ICO — รูปแบบดั้งเดิม บรรจุหลายขนาด รองรับโดยทุกเบราว์เซอร์
PNG — มาตรฐานสมัยใหม่ ไฟล์หนึ่งไฟล์ต่อขนาด
SVG — เวกเตอร์ ปรับขนาดได้ทุกขนาด รองรับโดยเบราว์เซอร์สมัยใหม่
Apple Touch PNG — สำหรับไอคอนหน้าจอหลักของ iOS โดยเฉพาะ ขนาด 180x180

Format	เมื่อใดที่ควรใช้
ICO	การรองรับเบราว์เซอร์แบบดั้งเดิม, บรรจุหลายขนาด
PNG	เบราว์เซอร์สมัยใหม่, ไฟล์แยกตามขนาด
SVG	เบราว์เซอร์สมัยใหม่, ไฟล์เดียวที่ปรับขนาดได้
Apple Touch PNG	หน้าจอหลักของ iOS

ควรสร้าง ICO เพื่อความเข้ากันได้กับระบบดั้งเดิม PNG ในทุกขนาดเพื่อการรองรับที่กว้างขวาง และ SVG หากแหล่งที่มาเป็นแบบเวกเตอร์ เครื่องมือ image converter จะจัดการการสร้างรูปแบบไฟล์ และเครื่องมือ image cropper จะได้ภาพต้นฉบับที่เป็นสี่เหลี่ยมจัตุรัสก่อน

วิธีอ้างอิง favicons ใน HTML อย่างไร?

ไฟล์ที่สร้างขึ้นจะต้องถูกอ้างถึงในส่วน <head> ของหน้า เพื่อให้เบราว์เซอร์สามารถค้นหาได้ แท็ก link จะแจ้งให้เบราว์เซอร์ทราบว่าจะใช้ไฟล์ใดสำหรับบริบทใด

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ICO ใช้สำหรับเบราว์เซอร์รุ่นเก่าที่รวมขนาดไว้แล้ว
SVG รองรับเบราว์เซอร์สมัยใหม่ในทุกความละเอียด
Apple Touch icon ใช้สำหรับบันทึกหน้าจอหลักของ iOS
ควรวางไฟล์เหล่านี้ที่ root ของเว็บไซต์เพื่อความเข้ากันได้สูงสุด

Mozilla favicon guide ให้รายละเอียดเกี่ยวกับแท็ก link และพฤติกรรมของเบราว์เซอร์ ขณะที่ Web.dev app icons guide ครอบคลุมมาตรฐานไอคอนแบบ maskable สำหรับ Android ควรทดสอบผลลัพธ์ในแท็บเบราว์เซอร์จริงและบนหน้าจอหลักของโทรศัพท์หลังจากใช้งานจริง เนื่องจากความผิดปกติในการแสดงผลจะปรากฏเฉพาะในบริบทที่ใช้งานจริงเท่านั้น

การออกแบบ favicon สำหรับโหมดสว่างและโหมดมืด

เบราว์เซอร์และระบบปฏิบัติการสมัยใหม่มีการสลับระหว่างโหมดสว่างและโหมดมืด และ favicon ที่ดูดีบนแท็บสีอ่อนอาจหายไปเมื่ออยู่บนแท็บสีเข้ม PNG พื้นหลังโปร่งใส หรือ SVG ที่มีสีปรับเปลี่ยนได้จะจัดการกับทั้งสองบริบทนี้ได้ เนื่องจากไอคอนจะปรับให้เข้ากับส่วนประกอบโดยรอบ (chrome) แทนที่จะแบกพื้นหลังของตัวเอง

ความท้าทายของโหมด	วิธีแก้ไข
ไอคอนมืดหายไปบนแท็บสีเข้ม	เพิ่มขอบที่ละเอียดอ่อนหรือใช้ความโปร่งใส
ไอคอนสว่างหายไปบนแท็บสีสว่าง	เช่นกัน — ขอบหรือสีปรับเปลี่ยนได้
ความสามารถในการอ่านยากที่ 16px	ทำให้รูปร่างง่ายขึ้น เพิ่มความเปรียบต่าง

สำหรับ favicons แบบ SVG คุณสามารถใช้ media query prefers-color-scheme ภายใน SVG เพื่อแสดงสีที่แตกต่างกันสำหรับบริบทสว่างและมืด ซึ่งเป็นวิธีที่สะอาดที่สุด สำหรับ PNG พื้นหลังโปร่งใสพร้อมรูปร่างที่มีความเปรียบต่างภายในเพียงพอจะใช้งานได้ดีในทั้งสองโหมด เป้าหมายคือเพื่อให้ favicon สามารถอ่านได้บนแท็บ ไม่ว่าผู้ใช้จะเปิดโหมดสว่างหรือโหมดมืด เนื่องจากสิ่งนี้กำลังกลายเป็นค่าเริ่มต้นมากกว่าข้อยกเว้น

ข้อผิดพลาดทั่วไปของ Favicon

รายละเอียดมากเกินไป — ไอคอนไม่สามารถระบุได้ที่ขนาด 16px ต้องทำให้เรียบง่ายขึ้น
แหล่งที่มาที่ไม่เป็นสี่เหลี่ยมจัตุรัส — ควรครอปให้เป็นสี่เหลี่ยมก่อน มิฉะนั้นไอคอนจะผิดรูป
ขาด Apple Touch icon — การบันทึกของ iOS จะแสดงภาพหน้าจอทั่วไปแทน
ไม่มี SVG — หน้าจอ DPI สูงจะเรนเดอร์เป็น PNG ที่เบลอ แทนที่จะเป็นเวกเตอร์ที่คมชัด
ลืมทดสอบที่ 16px — ขนาดที่คนส่วนใหญ่เห็นคือขนาดที่มักถูกละเลยที่สุด

Favicon มีขนาดเล็ก แต่ปรากฏในทุกที่ที่มีการแสดงเว็บไซต์ของคุณ ไม่ว่าจะเป็นแท็บ (tabs), บุ๊กมาร์ก (bookmarks), หน้าจอหลัก (home screens) หรือผลการค้นหา ไอคอนที่คมชัดและสามารถจดจำได้ในทุกขนาดจะช่วยเสริมสร้างแบรนด์ในทันที ในขณะที่ favicon ที่เบลอหรือขาดหายไปบ่งบอกถึงความไม่สมบูรณ์แบบ ใช้เวลาในการทำให้เวอร์ชัน 16px ถูกต้อง สร้างชุดขนาดและรูปแบบทั้งหมด แล้วไอคอนก็จะแสดงเว็บไซต์ได้อย่างสะอาดตาไม่ว่าจะปรากฏที่ใด การลงทุนนี้มีน้อย — เพียงแค่ช่วงบ่ายเดียวของการออกแบบและการส่งออก — แต่มันคุ้มค่าทุกครั้งที่ผู้ใช้เห็นเว็บไซต์ของคุณในแท็บ บุ๊กมาร์ก หรือหน้าจอหลัก ซึ่งเกิดขึ้นบ่อยกว่าที่ทีมส่วนใหญ่ตระหนัก

คำถามที่พบบ่อย

ไอคอนโปรด (favicon) ต้องมีขนาดเท่าไหร่?

ชุดไอคอนสมัยใหม่: 16×16, 32×32, 48×48 (แบบคลาสสิก), รวมถึง 180×180 (Apple touch icon) และ 192×192 / 512×512 (Android) การสร้างภาพหลักเพียงภาพเดียวจะสร้างชุดไอคอนทั้งหมดให้โดยอัตโนมัติ ตัวเบราว์เซอร์จะเลือกขนาดที่เหมาะสมตามบริบท

ฉันควรออกแบบ favicon ที่ใช้งานได้ดีที่ขนาด 16px อย่างไร?

ทำให้เรียบง่าย — รูปทรงเด่นชัดเพียงรูปเดียว มีความเปรียบต่างสูง และไม่มีรายละเอียดเล็ก ๆ น้อย ๆ หรือข้อความใด ๆ ที่ขนาด 16px สิ่งที่ซับซ้อนเกินไปจะดูเป็นรอยด่าง ดังนั้นควรทดสอบการออกแบบที่ขนาด 16px ก่อนนำไปใช้จริง หากมันไม่สามารถอ่านได้ในขนาดนั้น แสดงว่ามีความซับซ้อนมากเกินไป

favicon ควรใช้รูปแบบไฟล์ใด?

ICO สำหรับความเข้ากันได้กับระบบเก่า (legacy compatibility), PNG สำหรับเบราว์เซอร์สมัยใหม่และไอคอน Apple/Android, และ SVG สำหรับเวอร์ชันที่ไม่ขึ้นอยู่กับการแก้ไขความละเอียดเมื่อมีการรองรับ ควรสร้างชุดไอคอนทั้งหมด เพราะรูปแบบเดียวไม่สามารถครอบคลุมทุกอุปกรณ์ได้

ฉันจะอ้างถึง favicons ใน HTML ได้อย่างไร?

โดยใช้แท็ก <link rel="icon"> ที่ชี้ไปยังขนาดและรูปแบบที่แตกต่างกัน รวมถึง <link rel="apple-touch-icon"> สำหรับ iOS ตัวเบราว์เซอร์จะเลือกสิ่งที่เหมาะสมที่สุด ชุดของแท็ก link ที่สมบูรณ์แบบจะครอบคลุมทุกแพลตฟอร์ม

ฉันสามารถใช้ภาพเดียวสำหรับ favicon ทุกขนาดได้หรือไม่?

ได้ — ภาพหลักสี่เหลี่ยมจัตุรัสเพียงภาพเดียว (512×512 หรือใหญ่กว่า) สามารถสร้างชุดไอคอนทั้งหมด ตั้งแต่ 16×16 ถึง 512×512 ออกแบบภาพหลักให้สามารถอ่านได้ที่ขนาด 16px (รูปทรงเด่นชัดเพียงรูปเดียว) เพื่อให้แน่ใจว่าแม้แต่ขนาดเล็กที่สุดก็ยังใช้งานได้ ภาพหลักหนึ่งภาพ หลายขนาด

ฉันจะทดสอบ favicon ได้อย่างไร?

เปิดเว็บไซต์ในแท็บเบราว์เซอร์และตรวจสอบไอคอนที่ขนาด 16px (ขนาดแท็บ), 32px (บุ๊กมาร์ก), และ 180px (Apple touch) หากเวอร์ชัน 16px อ่านได้ยาก แสดงว่าการออกแบบมีความซับซ้อนเกินไป — ให้ลดความซับซ้อนให้เหลือเพียงรูปทรงเด่นชัด รูปไอคอนมีขนาดเล็กแต่ปรากฏอยู่ทุกที่ ดังนั้นไอคอนที่คมชัดและจดจำได้ในทุกขนาดจะช่วยเสริมสร้างแบรนด์ได้อย่างรวดเร็ว

ไฟล์ ICO คืออะไร?

เป็นรูปแบบ container สำหรับระบบเก่าที่เก็บภาพแบบ raster หนึ่งภาพหรือมากกว่านั้นในขนาดต่างกัน ใช้สำหรับ favicons บนเบราว์เซอร์รุ่นเก่า (โดยเฉพาะ Internet Explorer รุ่นเก่า) เบราว์เซอร์สมัยใหม่ใช้ PNG และ SVG ดังนั้น ICO จึงทำหน้าที่หลักในการรองรับความเข้ากันได้กับระบบเก่า ควรสร้างไฟล์ ICO ควบคู่ไปกับชุด PNG/SVG ของคุณ เพื่อให้มั่นใจว่าทุกเบราว์เซอร์ ไม่ว่าจะเก่าแค่ไหน ก็จะได้ไอคอนไปใช้งาน