เครื่องมือแปลง Favicon

สร้างไฟล์ที่จำเป็นสำหรับเพิ่ม favicon ให้เว็บไซต์จากภาพแรสเตอร์เพียงภาพเดียว เลือกวิธีจัดวางภาพต้นฉบับบนผืนผ้าใบสี่เหลี่ยมจัตุรัส กำหนดพื้นหลัง แล้วดาวน์โหลด ZIP ที่มี ICO หลายขนาด ไอคอน PNG 7 ไฟล์ manifest ของเว็บแอป การกำหนดค่าไทล์ของ Windows และ HTML สำหรับส่วน head ที่พร้อมคัดลอก การแปลงภาพและสร้าง ZIP ทำงานภายในเบราว์เซอร์ของคุณเท่านั้น

วิธีแปลงภาพเป็นชุด favicon

1

เลือกภาพแรสเตอร์

เลือกไฟล์ PNG, JPEG หรือ WebP ที่เป็นไปตามขีดจำกัดขนาดไฟล์และมิติภาพที่แสดง ไม่รองรับไฟล์ SVG, GIF และ AVIF
2

เลือกวิธีจัดภาพ

ใช้โหมดเติมเต็มและครอบตัดเพื่อให้ภาพเต็มพื้นที่สี่เหลี่ยมและตัดขอบ หรือใช้โหมดพอดีและเติมขอบเพื่อเก็บภาพทั้งหมดพร้อมเพิ่มพื้นที่ว่างรอบภาพ
3

ตั้งค่าพื้นหลัง

เลือกสีพื้นหลังสำหรับพิกเซลโปร่งใสและพื้นที่ว่างที่เกิดจากโหมดพอดีและเติมขอบ แล้วตรวจสอบภาพตัวอย่างที่สร้างขึ้น
4

ดาวน์โหลดและติดตั้ง

ดาวน์โหลด ZIP วางไฟล์ไอคอนและไฟล์กำหนดค่าบนเว็บไซต์ แล้วคัดลอกแท็ก link ที่ให้มาไว้ใน head ของเอกสาร

ไฟล์ภายใน ZIP

รายการในชุด	จุดประสงค์
`favicon.ico`	คอนเทนเนอร์ ICO หนึ่งไฟล์ที่มีขนาด 16, 32, 48 และ 256 px สำหรับเบราว์เซอร์และซอฟต์แวร์ที่เรียกใช้ตำแหน่ง favicon แบบดั้งเดิม
`favicon-16x16.png`	PNG ขนาดเล็กสำหรับแท็บเบราว์เซอร์และพื้นที่แสดงผลขนาดเล็กอื่น ๆ
`favicon-32x32.png`	ไอคอนความหนาแน่นสูงสำหรับแท็บเบราว์เซอร์และบุ๊กมาร์ก
`favicon-48x48.png`	ขนาดเพิ่มเติมสำหรับเดสก์ท็อปและทางลัด
`mstile-150x150.png`	PNG ขนาด 150 x 150 ที่การกำหนดค่าไทล์ Windows อ้างถึง
`apple-touch-icon.png`	PNG ขนาด 180 x 180 สำหรับลิงก์บนหน้าจอหลักของ Apple
`android-chrome-192x192.png`	ไอคอนแอปขนาด 192 x 192 ที่ manifest ของเว็บแอปอ้างถึง
`android-chrome-512x512.png`	ไอคอนแอปขนาด 512 x 512 ที่ manifest ของเว็บแอปอ้างถึง
`site.webmanifest`	ข้อมูลเมตา JSON ที่ชี้เบราว์เซอร์ที่รองรับไปยังไอคอนขนาด 192 px และ 512 px
`browserconfig.xml`	การกำหนดค่าไทล์ Windows ที่อ้างถึงไฟล์ไอคอนที่สร้างขึ้น
`favicon-head.html`	แท็กพร้อมคัดลอกสำหรับเชื่อมหน้าเว็บกับ ICO, PNG, ไอคอน Apple, manifest และการกำหนดค่าเบราว์เซอร์

ไฟล์ ICO และ PNG แยกกันโดยตั้งใจ เบราว์เซอร์และระบบปฏิบัติการเลือกไอคอนต่างกัน ชุดไฟล์ที่ครบถ้วนจึงรองรับทั้งคำขอ /favicon.ico แบบดั้งเดิมและการประกาศไอคอนสมัยใหม่อย่างชัดเจน

แท็กสำหรับ 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">
<meta name="msapplication-config" content="/browserconfig.xml">

หากไฟล์อยู่ในไดเรกทอรีย่อยหรือโฮสต์ไฟล์แยกต่างหาก ให้แก้ไขเส้นทางก่อนวางแท็กใน <head> ชื่อไฟล์และเส้นทางภายใน site.webmanifest และ browserconfig.xml ต้องตรงกับไฟล์ที่นำไปใช้งานจริง

การเลือกแบบเติมเต็ม แบบพอดี และพื้นหลัง

เติมเต็มและครอบตัด จะให้ภาพเต็มพื้นที่สี่เหลี่ยมทุกขนาด ภาพต้นฉบับแนวกว้างหรือแนวสูงจะถูกตัดจากขอบตรงข้ามเท่า ๆ กัน จึงควรวางส่วนสำคัญไว้ใกล้กึ่งกลาง
พอดีและเติมขอบ จะเก็บภาพต้นฉบับทั้งหมด พื้นที่ที่เหลือจะกลายเป็นขอบสีพื้นหลังที่เลือก
พื้นหลัง สามารถคงความโปร่งใสหรือใช้สีทึบที่กำหนดเอง ในโหมดพอดีและเติมขอบ ตัวเลือกนี้จะควบคุมสีของพื้นที่รอบภาพด้วย ตรวจสอบภาพตัวอย่างบนทั้งธีมหน้าสว่างและมืดก่อนเผยแพร่

เพื่อให้ไอคอนขนาดเล็กคมชัดที่สุด ควรเริ่มจากภาพสี่เหลี่ยมที่เรียบง่ายขนาดอย่างน้อย 512 x 512 พิกเซล ตัวอักษรที่บาง เส้นละเอียด และรายละเอียดเล็ก ๆ อาจหายไปในรุ่น 16 px แม้ภาพต้นฉบับจะมีขนาดใหญ่

ขีดจำกัดข้อมูลเข้าและการวางไฟล์

เครื่องมือนี้รับเฉพาะภาพแรสเตอร์ PNG, JPEG และ WebP โดยตรวจสอบลายเซ็นของภาพและปฏิเสธ SVG, GIF, AVIF รวมถึงรูปแบบอื่นที่ไม่รองรับ ไฟล์ต้นฉบับมีขนาดได้สูงสุด 20 MiB แต่ละด้านยาวไม่เกิน 8,192 พิกเซล และมีความละเอียดรวมไม่เกิน 24 เมกะพิกเซล ระบบจะตรวจสอบมิติก่อนถอดรหัสภาพทั้งไฟล์

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

manifest ที่รวมมาให้มีข้อมูลเมตาของไอคอน แต่เพียง manifest และชุดไอคอนไม่ได้ทำให้เว็บไซต์กลายเป็นเว็บแอปแบบก้าวหน้าที่ติดตั้งได้ การติดตั้งยังขึ้นอยู่กับหน้าเว็บ ความปลอดภัยในการรับส่งข้อมูล และข้อกำหนดของแต่ละเบราว์เซอร์

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

ใช้ PNG, JPEG หรือ WebP ได้ เครื่องมือตรวจสอบลายเซ็นของไฟล์แทนการเชื่อถือเพียงชื่อไฟล์ และปฏิเสธ SVG, GIF, AVIF รวมถึงรูปแบบอื่น

แบบเติมเต็มและครอบตัดจะขยายภาพจนเต็มสี่เหลี่ยม และตัดส่วนจากขอบตรงข้ามเท่า ๆ กันเมื่ออัตราส่วนภาพไม่เป็นสี่เหลี่ยม แบบพอดีและเติมขอบจะเก็บภาพทั้งหมดไว้และเติมพื้นที่สี่เหลี่ยมที่เหลือด้วยสีพื้นหลังที่เลือก

ICO เป็นคอนเทนเนอร์ที่เก็บไอคอนขนาดเล็กหลายขนาดไว้ในไฟล์ favicon แบบดั้งเดิมไฟล์เดียว ส่วน PNG แยกให้ไฟล์ที่มีขนาดชัดเจนแก่เบราว์เซอร์และแพลตฟอร์มสำหรับแท็บ ลิงก์บนหน้าจอหลัก และไอคอนแอป การมีทั้งสองรูปแบบช่วยเพิ่มความครอบคลุมในการใช้งานจริง

ไม่ manifest อธิบายไอคอนแอปที่สร้างขึ้นและข้อมูลเมตาที่เกี่ยวข้องกับการแสดงผล แต่ความสามารถในการติดตั้งขึ้นอยู่กับข้อกำหนดเพิ่มเติมของเบราว์เซอร์และวิธีสร้างกับให้บริการเว็บไซต์

โค้ดที่ให้มาใช้เส้นทางอ้างอิงจากราก วิธีที่ง่ายที่สุดคือวางไฟล์ที่แตกแล้วไว้ที่รากของโดเมน หากใช้โฟลเดอร์หรือโฮสต์ไฟล์อื่น ให้แก้ไขโค้ดและเส้นทางใน manifest กับการกำหนดค่าเบราว์เซอร์ให้ตรงกัน

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

เครื่องมือแปลง Favicon

วิธีแปลงภาพเป็นชุด favicon

เลือกภาพแรสเตอร์

เลือกวิธีจัดภาพ

ตั้งค่าพื้นหลัง

ดาวน์โหลดและติดตั้ง

ไฟล์ภายใน ZIP

แท็กสำหรับ HTML head

การเลือกแบบเติมเต็ม แบบพอดี และพื้นหลัง

ขีดจำกัดข้อมูลเข้าและการวางไฟล์

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

เครื่องมือที่เกี่ยวข้อง

เครื่องมือปรับขนาดรูปภาพสำหรับโซเชียลมีเดีย

แปลง WebP เป็น JPG

บีบอัด GIF

แปลง PNG เป็น SVG แบบเวกเตอร์

ตัวสร้างบาร์โค้ด

BMP เป็น PNG