แปลง PNG เป็น ICNS
สร้างไอคอน .icns สำหรับ macOS จากไฟล์ PNG ทรงจัตุรัสได้โดยไม่ต้องเปิด Xcode หรือ Terminal ใช้ได้กับสคริปต์ที่รวมเป็นแอป ดิสก์อิมเมจ โฟลเดอร์ หรือบิลด์ Electron และดูด้านล่างว่าชุด iconset แบบเต็มทำงานอย่างไรเมื่อเผยแพร่แอปผ่าน Xcode
แปลงไฟล์รูปภาพ
หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·
สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที
ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที
ค่า 85 ทำให้ภาพถ่ายดูเหมือนต้นฉบับทุกประการ ควรลดค่านี้เฉพาะเมื่อต้องการไฟล์ที่เล็กลง
JPG, BMP และ EPS ไม่รองรับความโปร่งใส พิกเซลโปร่งใสจะถูกเติมด้วยสีนี้
รหัสสีแบบ Hex ที่ใช้แทนพิกเซลโปร่งใส เช่น #FFFFFF
รูปแบบนี้เก็บภาพได้เพียงภาพเดียว หากต้องการคงภาพเคลื่อนไหวไว้ ให้เลือกผลลัพธ์เป็น GIF หรือ WebP
ไอคอนหลายขนาดจะรวมความละเอียดหลายระดับไว้ในไฟล์เดียว เบราว์เซอร์และระบบปฏิบัติการจะเลือกขนาดที่ต้องใช้เอง
คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้
จำนวนพิกเซลของด้านที่เลือกไว้ด้านบน
เปอร์เซ็นต์ของขนาดภาพต้นฉบับ
sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด
เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล
วิธีใช้เครื่องมือนี้
- 1
อัปโหลดไฟล์ PNG ทรงจัตุรัส
ใช้งานภาพที่มีพื้นหลังโปร่งใสและมีขนาดอย่างน้อย 1024 × 1024 px
- 2
เก็บไว้ทุกขนาด
ใน การตั้งค่าขั้นสูง ตัวเลือก ขนาดไอคอน ถูกตั้งเป็น ทุกขนาด (16–256) ดังนั้นรายการใน Finder, แถบด้านข้าง และไอคอนใน Dock จะได้ภาพที่มีขนาดตรงกันทุกจุด
- 3
แปลงเป็น ICNS
กด แปลงเป็น ICNS แล้วดาวน์โหลดไฟล์ .icns ซึ่งพร้อมนำไปใส่ในโฟลเดอร์ Resources ของ app bundle หรือใช้ในหน้าต่าง Get Info
ไฟล์ .icns คือคอนเทนเนอร์ไอคอนของ Apple ที่เก็บบิตแมปสี่เหลี่ยมจัตุรัสหลายขนาดไว้ในไฟล์เดียว โดย Finder, Dock หรือ Spotlight จะเลือกวาดตามขนาดที่ต้องการ การแปลง PNG จะเติมทุกช่องเหล่านั้นจากภาพต้นฉบับภาพเดียว
แปลง PNG เป็น ICNS: ไฟล์ไอคอน macOS มีอะไรอยู่ข้างใน
Apple เปิดตัวฟอร์แมต ICNS พร้อม Mac OS 8.5 ในปี 1998 และ Mac OS X ยังคงใช้เป็นไฟล์ที่ application bundle ทุกตัวอ้างถึง คอนเทนเนอร์นี้ขยายตามความละเอียดหน้าจอ โดยรายการขนาด 512 px เริ่มมีใน Mac OS X 10.5 และรายการขนาด 1024 px ที่ระบุว่า 512 × 512 @2x มาพร้อมจอ Retina ใน OS X 10.7 และ 10.8
แต่ละช่องเป็นคู่ภาพ คือภาพ 1x และภาพ @2x ที่มีขนาดพอยต์เท่ากันสำหรับหน้าจอ Retina Finder จะเลือกภาพที่ตรงกับจอและมุมมอง นี่คือเหตุผลที่ PNG 1024 px ภาพเดียวที่ Finder ย่อเองจะดูเบลอกว่ารายการ 16 px จริงในมุมมองรายการ
ขนาดใน iconset ของ Mac ตั้งแต่ 16 px ถึง 1024 px
| ขนาดพอยต์ | ไฟล์ 1x (พิกเซล) | ไฟล์ @2x (พิกเซล) | ที่ที่แสดง |
|---|---|---|---|
| 16 pt | icon_16x16.png (16) | [email protected] (32) | มุมมองรายการใน Finder, เมนู |
| 32 pt | icon_32x32.png (32) | [email protected] (64) | แถบด้านข้าง, มุมมองไอคอนขนาดเล็ก |
| 128 pt | icon_128x128.png (128) | [email protected] (256) | มุมมองไอคอนใน Finder, Dock |
| 256 pt | icon_256x256.png (256) | [email protected] (512) | มุมมองไอคอนขนาดใหญ่, Quick Look |
| 512 pt | icon_512x512.png (512) | [email protected] (1024) | ตัวอย่างใน Get Info, App Store |
mkdir MyApp.iconset sips -z 512 512 icon-1024.png --out MyApp.iconset/icon_512x512.png cp icon-1024.png MyApp.iconset/[email protected] # ทำซ้ำคำสั่ง sips สำหรับไฟล์ขนาด 16, 32, 64, 128 และ 256 px iconutil -c icns MyApp.iconset
PNG
Portable Network Graphics
PNG เป็นรูปแบบภาพแรสเตอร์แบบไม่สูญเสียข้อมูล (lossless) ที่ PNG Development Group เผยแพร่ในปี 1996 และต่อมาได้รับการกำหนดเป็นมาตรฐานโดย W3C และ ISO รักษาทุกพิกเซลไว้อย่างแม่นยำ รองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ และแสดงข้อความ ขอบคม และสีพื้นเรียบได้โดยไม่มีสิ่งแปลกปลอมในภาพ (artefact) ความแม่นยำนี้ทำให้เหมาะกับภาพหน้าจอ โลโก้ ไอคอน และกราฟิกส่วนติดต่อผู้ใช้ ข้อแลกเปลี่ยนคือขนาด ภาพถ่ายที่บันทึกเป็น PNG มักใหญ่กว่าภาพเดียวกันในรูปแบบ JPEG หรือ WebP หลายเท่า เบราว์เซอร์ ระบบปฏิบัติการ และโปรแกรมแต่งภาพทุกตัวเปิดไฟล์ PNG ได้
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ไม่ได้
- เปิดตัว
- 1996 · PNG Development Group
ICNS
Apple Icon Image
ICNS คือรูปแบบคอนเทนเนอร์ไอคอนของ Apple ใช้กับไอคอนแอปพลิเคชัน โฟลเดอร์ และเอกสารใน macOS ตั้งแต่ Mac OS 8.5 ในปี 1998 ไฟล์เดียวรวมหลายขนาดตั้งแต่ 16×16 ถึง 1024×1024 พิกเซล รวมถึงรุ่น Retina โดยมักเก็บเป็นข้อมูล PNG ที่มีพื้นหลังโปร่งใส Xcode และ macOS อ่านได้โดยตรง แต่แทบไม่ใช้นอกแพลตฟอร์มของ Apple Windows และเครื่องมือบนเว็บส่วนใหญ่เปิด ICNS ไม่ได้หากไม่มีตัวแปลง
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ไม่ได้
- เปิดตัว
- 1998 · Apple
แปลง PNG เป็น ICNS เมื่อ app bundle, ตัวติดตั้ง หรือโฟลเดอร์บน Mac ต้องใช้คอนเทนเนอร์ไอคอนของ Apple ที่รวมหลายความละเอียดไว้ในไฟล์เดียว ส่วนการแปลง ICNS กลับเป็น PNG ใช้เมื่อต้องการนำไอคอนแอปที่มีอยู่ไปใช้ในเอกสารหรือบนเว็บไซต์เท่านั้น
ตัวแปลง ICNS ออนไลน์ หรือใช้ Xcode และ iconutil
ตัวแปลงนี้เติมช่องขนาด 16 ถึง 256 px ซึ่งครอบคลุมรายการใน Finder, แถบด้านข้าง, Dock และมุมมองไอคอนบน Mac ทุกเครื่อง รวมถึง Retina จนถึงช่อง 128 pt เพียงพอสำหรับไอคอนโฟลเดอร์, ไอคอนวอลลุ่ม DMG, แอป AppleScript หรือ Automator และเครื่องมือภายในองค์กร โดยไม่ต้องติดตั้งเครื่องมือนักพัฒนา
สำหรับแอปที่จะส่งขึ้น Mac App Store ให้ใช้ต้นฉบับ 1024 px ใน asset catalog ของ Xcode หรือรัน iconutil กับ iconset ที่ครบชุดตามตัวอย่างข้างต้น เพื่อให้ช่อง 512 pt ได้พิกเซลจริง ควรเริ่มจากภาพสี่เหลี่ยมจัตุรัสที่เรียบร้อย หากโลโก้ของคุณกว้าง ให้ใช้เครื่องมือครอปรูปเพื่อได้พื้นที่ 1:1 ก่อน และดูวิธีครอปรูปตามสัดส่วนเพื่อดูว่าควรเว้นขอบตรงไหน
คำถามเรื่องแปลง PNG เป็น ICNS จากผู้ใช้ Mac
จะใส่ไอคอน ICNS ที่กำหนดเองให้โฟลเดอร์หรือแอปบน Mac ได้อย่างไร
เลือกรายการใน Finder แล้วกด Command-I เพื่อเปิด Get Info จากนั้นลากไฟล์ .icns ไปวางบนไอคอนเล็กที่มุมซ้ายบนของหน้าต่าง หากเป็นแอปที่คุณสร้างเอง ให้วางไฟล์ไว้ใน Contents/Resources และระบุชื่อไฟล์ในคีย์ CFBundleIconFile ของ Info.plist
ควรเริ่มจากไฟล์ PNG ขนาดเท่าใดเพื่อแปลงเป็น ICNS
1024 × 1024 px ซึ่งเป็นช่องที่ใหญ่ที่สุดที่ Apple กำหนด หาก PNG มีขนาดเล็กกว่านี้ก็ยังแปลงได้ แต่ทุกขนาดที่ใหญ่กว่าต้นฉบับจะถูกขยายและดูไม่คมบนหน้าจอ Retina ภาพควรเป็นสี่เหลี่ยมจัตุรัสและมีพื้นหลังโปร่งใสนอกรูปทรงของไอคอน
หากโปรเจกต์ Xcode มี asset catalog อยู่แล้ว ยังต้องทำไฟล์ ICNS เองหรือไม่
ไม่จำเป็น เมื่อเป้าหมาย macOS ใช้ชุด AppIcon ใน Assets.xcassets Xcode จะคอมไพล์และสร้างไฟล์ไอคอนของแอปให้เองระหว่างบิลด์ ส่วน .icns แยกต่างหากใช้กับโปรเจกต์ที่ไม่ได้ใช้ Xcode เช่น แอปแบบเชลล์สคริปต์, ตัวแพ็กเกจ Electron และ Tauri, ตัวรวมไฟล์ของ Python และพื้นหลัง DMG
ทำไมไอคอนใหม่จึงอยู่ในกรอบสี่เหลี่ยมมุมมนสีเทา
ตั้งแต่ macOS 11 Big Sur ไอคอนแอปบน Mac ใช้รูปทรงสี่เหลี่ยมมุมมน และ macOS 26 Tahoe จะวางไอคอนที่ไม่เต็มรูปทรงนี้ไว้ในกรอบสีเทา ให้วาดสี่เหลี่ยมมุมมนลงในภาพเองโดยเว้นมุมให้โปร่งใส ระบบจะแสดงผลตามที่ออกแบบไว้
ไฟล์ ICNS บีบอัดภาพต้นฉบับของฉันหรือไม่
ไม่ถึงขั้นที่มองเห็นได้ ไฟล์ .icns รุ่นใหม่เก็บภาพขนาดใหญ่เป็นข้อมูล PNG ภายในคอนเทนเนอร์ ซึ่งไม่สูญเสียคุณภาพ มีเพียงรายการรุ่นเก่าขนาดเล็กที่ใช้การบีบอัดแบบ run-length ของ Apple พร้อมมาสก์ 8 บิตแยกต่างหาก และ Mac ปัจจุบันแทบไม่แสดงรายการเหล่านั้น
Windows หรือ Linux ใช้ไฟล์ไอคอนเดียวกันได้หรือไม่
Windows ต้องใช้ ICO ไม่ใช่ ICNS ใช้ แปลง PNG เป็น ICO เพื่อสร้างจากภาพเดียวกันได้ ส่วนเดสก์ท็อป Linux อ่านไอคอน PNG หรือ SVG จากโฟลเดอร์ธีมโดยตรง ดังนั้น PNG ต้นฉบับก็ใช้ได้เลย
