โรงงานไอคอนในเครื่องคุณ
ตัวแปลงรูปภาพเป็นไอคอน
เปลี่ยนไฟล์ PNG, JPG, WebP หรือ SVG ให้เป็น favicon.ico ไอคอนแอป และไฟล์ manifest ของ PWA ดูตัวอย่างว่าไอคอนของคุณจะเป็นอย่างไรบนแท็บเบราว์เซอร์ หน้าจอโฮมของ iOS และหน้าต่างติดตั้งของ Android ก่อนดาวน์โหลดจริง
พร้อมสำหรับวันเปิดตัว
แปลงรูปภาพเป็นไอคอนแบบออนไลน์
OneImageTool เปลี่ยนโลโก้ รูปโปรไฟล์ มาสคอต หรือเครื่องหมายสินค้า ให้กลายเป็นไฟล์ไอคอนที่เว็บไซต์หรือแอปจริง ๆ ต้องใช้ อัปโหลดรูป จัดให้เป็นจัตุรัสที่สะอาดตา ดูตัวอย่างบนแท็บเบราว์เซอร์และหน้าจอโฮมของมือถือ แล้วบันทึก favicon.ico ไอคอน PNG ไฟล์ Apple Touch Icon และ manifest ของ PWA หากไฟล์ต้นทางยังต้องจัดการก่อน ให้ครอบตัดให้เป็นจัตุรัสก่อน หรือบีบอัดไฟล์ที่ใหญ่เกินไป ทั้งสองเครื่องมือก็ทำงานในเบราว์เซอร์ของคุณเช่นกัน
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ซึ่งสำคัญมากเมื่อไฟล์ต้นทางเป็นโลโก้ลับของลูกค้า เครื่องหมายของแอปที่ยังไม่เปิดตัว หรือไอเดียที่คุณยังไม่อยากส่งไปเซิร์ฟเวอร์ของใคร ปรับระยะขอบ สีพื้นหลัง และความมนของมุมได้ พร้อมดูตัวอย่างบนอุปกรณ์ต่าง ๆ แบบสด
- your-logo.pngSRC
- favicon.icoICO
- apple-touch-icon.pngiOS
- android-chrome-512x512.pngPWA
- site.webmanifestJSON
Favicon สำหรับเว็บไซต์
สร้างไอคอนบนแท็บเบราว์เซอร์จากไฟล์ต้นทางเดียวกัน ใช้โหมดครอบตัดเมื่ออยากให้เครื่องหมายเด่นชัด หรือโหมดย่อให้พอดีพร้อมระยะขอบเมื่อโลโก้ต้องการที่ว่างรอบตัว
ไฟล์ ICO สำหรับทางลัด
ดาวน์โหลดไฟล์ ICO ที่รวมหลายขนาดไว้ สำหรับ favicon แบบเดิมและทางลัดบนเดสก์ท็อป ขนาดเล็กถูกปรับมาให้ยังคมชัดบนตัวอย่างแท็บ
ไอคอนแอปและ PWA
สร้างไฟล์ PNG ขนาดใหญ่ขึ้นสำหรับหน้าจอโฮมและหน้าต่างติดตั้ง ในชุดไฟล์มี web manifest ที่ตั้งค่าไว้ให้แล้วพร้อมโค้ด HTML
ดูตัวอย่างได้หลายอุปกรณ์
ต่างจากเครื่องมือที่แสดงแค่แท็บเบราว์เซอร์ OneImageTool แสดงทั้งหน้าจอโฮมของ iOS แบนเนอร์ติดตั้งของ Android และไทล์ของ Windows โดยอัปเดตแบบสดขณะที่คุณปรับแต่ง
ดาวน์โหลดครั้งเดียว ใช้ได้หลายที่
ตัวแปลงรูปภาพเป็นไอคอนสร้างอะไรให้บ้าง
ขั้นตอนทำงานที่ดีไม่ได้ให้ภาพเล็ก ๆ มาแค่ไฟล์เดียว ทั้งหน้าแลนดิ้ง เอกสาร แอป PWA และโปรเจกต์เสริม ล้วนต้องใช้ไฟล์หลายแบบพร้อมโค้ด HTML คุณจะได้ชุดไฟล์ที่เบราว์เซอร์รองรับครบในไฟล์ ZIP เดียว
ในชุดไฟล์มีทั้ง favicon.ico ไฟล์ PNG ขนาดที่ใช้บ่อย web manifest โค้ด HTML และ README ซึ่งครอบคลุมการตั้งค่าเว็บไซต์ทั่วไปและ PWA
- favicon.icoICO
- favicon-16x16.png … 512x512.pngPNG
- apple-touch-icon.pngiOS
- android-chrome-192x192.pngPWA
- site.webmanifestJSON
- favicon-html.txtHTML
- README.txtDOC
ห้าขั้นตอนสั้น ๆ
วิธีใช้ตัวแปลงรูปภาพเป็นไอคอน
01
อัปโหลด
ลากไฟล์ PNG, JPG, WebP หรือ SVG มาวาง ไฟล์ต้นทางที่เป็นจัตุรัสจะได้ผลดีที่สุด แต่ภาพแนวกว้างก็ใช้ได้
02
จัดรูปทรง
เลือกโหมดย่อให้พอดี ครอบตัด หรือยืดเต็ม แล้วดูตัวอย่างบนเบราว์เซอร์ iOS และ Android อัปเดตทันที
03
จัดสไตล์
เพิ่มระยะขอบ ทำมุมให้มน คงพื้นหลังโปร่งใสไว้ หรือเลือกพื้นหลังสีทึบ
04
ดูตัวอย่าง
ตรวจดูตัวอย่างบนแท็บขนาด 16px และหน้าจอโฮม หากไอคอนบนแท็บอ่านไม่ออก ให้เพิ่มระยะขอบหรือใส่พื้นหลังสีทึบ
05
ดาวน์โหลด
บันทึกชุดไอคอนทั้งหมดที่มี favicon.ico ไฟล์ PNG, manifest, โค้ด HTML และ README
ตั้งแต่จิ๋วจนถึงพร้อมติดตั้ง
ขนาดที่เหมาะสมของไอคอนที่ได้
ไอคอนปรากฏในที่ที่ต่างกันมาก แท็บเบราว์เซอร์ต้องการสัญลักษณ์ที่หนักแน่นและแทบไม่มีรายละเอียด ส่วนหน้าติดตั้ง PWA แสดงเครื่องหมายขนาดใหญ่กว่าได้ ตัวแปลงนี้สร้างทุกขนาดที่ใช้บ่อยจากไฟล์ต้นทางเพียงไฟล์เดียว
| ขนาด | ใช้ที่ไหน | ตัวอย่างในเครื่องมือ | เคล็ดลับ |
|---|
| 16×16 | แท็บเบราว์เซอร์ favicon แบบเดิม | ตัวอย่างแท็บเบราว์เซอร์ | ใช้รูปทรงที่หนักแน่น รายละเอียดน้อยที่สุด |
| 32×32 | favicon แบบ PNG ยุคใหม่ แท็บความละเอียดสูง | ตารางขนาด | เป็นค่าเริ่มต้นที่ใช้งานได้จริงสำหรับ favicon ใน HTML |
| 48×48 | ทางลัดบนเดสก์ท็อป ไทล์ของ Windows | ตัวอย่างไทล์ของ Windows | จัดรูปทรงให้อยู่กึ่งกลาง |
| 180×180 | Apple Touch Icon | ตัวอย่างหน้าจอโฮมของ iOS | พื้นหลังสีทึบมักดูสะอาดตากว่าบน iOS |
| 192×192 | Chrome บน Android และ PWA | ตัวอย่างหน้าติดตั้งของ Android | ใช้ในรายการไอคอนของ manifest.json |
| 512×512 | หน้าจอเปิดของ PWA และหน้าต่างติดตั้ง | ตารางขนาด | ควรเริ่มจากไฟล์ต้นทางคุณภาพสูง |
ทำให้เวอร์ชันจิ๋วยังอ่านออก
รายการตรวจสอบงานออกแบบก่อนดาวน์โหลด
favicon มีขนาดเล็กมาก เส้นบาง ตัวอักษรจิ๋ว รูปถ่ายที่รกตา และภาพหน้าจอ มักกลายเป็นภาพเลอะ ใช้ตัวอย่างแท็บและหน้าจอโฮมแบบสดทดสอบว่ายังอ่านออกไหมก่อนส่งออก
หากตัวอย่างบนแท็บขนาด 16px อ่านยาก ลองครอบตัดให้เด่นขึ้น เพิ่มระยะขอบ หรือใส่พื้นหลังสีทึบ รูปทรงที่อยู่กึ่งกลางและมีคอนทราสต์ชัดจะรอดจากการย่อจากภาพใหญ่มาเป็นไอคอนได้ดีกว่ามาก
ใช้ได้ดีโลโก้เรียบง่าย มาสคอตสีแบน เครื่องหมายทรงจัตุรัส ตัวอักษรย่อหนา ๆ และสัญลักษณ์ที่คอนทราสต์สูง
ใช้อย่างระวังรูปถ่ายที่มีรายละเอียดเยอะ เส้นขอบบาง ภาพหน้าจอ คำยาว ๆ และเครื่องหมายที่ชนขอบภาพ
วางแล้วขึ้นเว็บได้เลย
ควรวางไฟล์ไอคอนที่สร้างไว้ตรงไหน
สำหรับเว็บไซต์แบบสแตติก ให้วางไฟล์ไว้ที่รากของโฟลเดอร์สาธารณะหรือโฟลเดอร์ทรัพยากรที่คัดลอกขึ้นเซิร์ฟเวอร์จริง แล้ววางโค้ด HTML ไว้ใน <head> ควรคง URL ของ favicon ไว้เหมือนเดิมหลังเปิดตัว เพื่อให้บุ๊กมาร์กและทางลัดที่ติดตั้งไว้ยังใช้ไอคอนเดิม
แคชของ favicon ดื้อมากเวลาทดสอบ — ให้ใช้หน้าต่างส่วนตัวหรือเปลี่ยนชื่อไฟล์ระหว่างที่ยังลองอยู่
public/
├── favicon.ico
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest
