

ทำโลโก้พื้นหลังโปร่งใส
JPG ทำให้โปร่งใสไม่ได้ เพราะรูปแบบนี้ไม่มีช่องอัลฟา โลโก้ JPG จึงมีกรอบสีขาวติดมาเสมอ ลบพื้นหลังแล้วบันทึกเป็น PNG หรือ WebP ซึ่งเก็บพื้นหลังโปร่งใสไว้ได้ ถ้ามีไฟล์เวกเตอร์ (SVG, PDF, AI, EPS) ให้ใช้ไฟล์นั้นสำหรับเว็บและงานพิมพ์แทน เพราะคมชัดทุกขนาด จากนั้นตรวจรูปที่ตัดพื้นหลังแล้วบนพื้นหลังสีเข้มก่อนนำไปใช้
นักพัฒนา: เรียก API ครั้งเดียวหรือลากไฟล์มาวาง วางรูป Ctrl/⌘+V หรือใส่
ประมวลผลบนเซิร์ฟเวอร์ของเรา รูปพรีวิวจะถูกลบทันทีหลังจากนั้น
ไม่มีรูป?
ลองใช้รูปเหล่านี้:
โลโก้: สรุปสั้นๆ
| รูปแบบที่เก็บความโปร่งใสได้ | PNG และ WebP (แบบ lossy หรือ lossless) JPG ไม่มีช่องอัลฟา |
|---|---|
| ดีที่สุดสำหรับโลโก้และไอคอนบนเว็บ | SVG ถ้ามี เพราะขยายได้ทุกขนาดโดยไม่เบลอ |
| Favicon สำหรับ Google Search | สี่เหลี่ยมจัตุรัส (1:1) อย่างน้อย 8 x 8 px Google แนะนำให้ใหญ่กว่า 48 x 48 px |
| ไอคอนเว็บแอป | อย่างน้อยไอคอน 192 x 192 px หนึ่งรูปและ 512 x 512 px หนึ่งรูป (Chromium) |
| โลโก้ LinkedIn Page | แนะนำ 400 x 400 px ขั้นต่ำ 268 x 268 px เป็น PNG หรือ JPEG สูงสุด 3 MB |
| โลโก้ร้าน Etsy | แนะนำ 500 x 500 px |
โลโก้: ทีละขั้นตอน
- เริ่มจากไฟล์ที่ใหญ่ที่สุดที่หาได้โลโก้ในลายเซ็นอีเมลมักกว้างไม่ถึง 200 px ให้หาต้นฉบับในโฟลเดอร์แบรนด์ ชุดข่าวประชาสัมพันธ์ ไฟล์ PDF หรือไฟล์รูปของเว็บไซต์เอง การตัดพื้นหลังเพิ่มรายละเอียดที่ไม่มีอยู่ไม่ได้ ต้นฉบับ 2000 px จึงให้ขอบคม ส่วนต้นฉบับ 150 px ให้ขอบเบลอและหยัก
- ลบพื้นหลังและตรวจช่องโหว่ลบพื้นหลัง แล้วซูมดูตัวอักษรที่มีรูปทรงปิด เช่น O, A, B, e และ g รวมถึงช่องว่างระหว่างไอคอนกับชื่อแบรนด์ พื้นที่ด้านในเหล่านั้นต้องโปร่งใสด้วย ไม่อย่างนั้นสีของสไลด์หรือส่วนหัวจะไม่ทะลุผ่าน สลับตัวอย่างเป็นพื้นหลังสีเข้มเพื่อหาสีขาวที่หลงเหลือ
- ส่งออกตามที่จะนำไปใช้ดาวน์โหลด PNG พื้นหลังโปร่งใสสำหรับสไลด์ เอกสาร และม็อกอัปสินค้า หรือ WebP สำหรับเว็บไซต์ซึ่งไฟล์เล็กกว่า ทำเวอร์ชันสี่เหลี่ยมจัตุรัสสำหรับ favicon และโปรไฟล์โซเชียล โดยเว้นที่รอบสัญลักษณ์ไว้ เพื่อไม่ให้การครอปวงกลมตัดโดน
โลโก้: เคล็ดลับและข้อผิดพลาดที่พบบ่อย
- ขอบขาวบนพื้นหลังสีเข้มพิกเซลที่ขอบของโลโก้ที่บันทึกบนพื้นขาวจะผสมกับสีขาว หลังตัดพื้นหลังจึงเห็นเป็นเส้นขอบจางๆ บนสีกรมท่าหรือสีดำ แก้ได้โดยตัดจากไฟล์ต้นฉบับที่ใหญ่กว่า หรือทำโลโก้เวอร์ชันสีอ่อน (สีขาวหรือสีกลับ) แยกไว้สำหรับพื้นเข้ม หลายแบรนด์มีทั้งสองแบบ
- ใช้ SVG ถ้ามีสำหรับโลโก้ส่วนหัวของเว็บไซต์ MDN แนะนำ SVG เมื่อมีเวอร์ชันเวกเตอร์ และแนะนำรูปแบบ lossless สำหรับโลโก้แบบราสเตอร์ เพราะขอบหยักรอบขอบคมจะเห็นชัดมาก PNG พื้นหลังโปร่งใสเป็นทางเลือกสำรองเมื่อมีแค่รูปถ่ายหรือ JPG
- Favicon ใช้สัญลักษณ์ ไม่ใช่ชื่อแบรนด์Favicon แสดงขนาดเล็กมากในแท็บเบราว์เซอร์และผลการค้นหา ครอปเฉพาะสัญลักษณ์หรืออักษรตัวแรก ให้เป็นสี่เหลี่ยมจัตุรัส (Google กำหนด 1:1) และใช้รูปทรงทึบหรือคอนทราสต์สูง เพื่อให้อ่านได้ทั้งบนแท็บสีอ่อนและสีเข้ม
- สไลด์และเอกสารสไลด์แบบจอกว้างของ PowerPoint มีขนาด 13.333 x 7.5 นิ้ว (16:9) แทรกโลโก้เป็น PNG ไม่ใช่ JPG เพื่อให้สีของสไลด์ทะลุผ่าน และไม่มีสี่เหลี่ยมสีขาวบนเทมเพลตที่มีสี
- สินค้าที่ระลึกและงานพิมพ์โรงพิมพ์พิมพ์โลโก้แบบราสเตอร์ได้คมเท่าที่พิกเซลมีเท่านั้น ส่งไฟล์เวกเตอร์ถ้ามี และใช้ PNG พื้นหลังโปร่งใสสำหรับม็อกอัป ประกาศขายในร้าน และปรู๊ฟด่วน
- โลโก้ที่มีข้อความบนโซเชียลFacebook ระบุว่ารูปโปรไฟล์และรูปหน้าปกที่มีโลโก้หรือข้อความอาจดูดีกว่าเมื่อเป็น PNG การบีบอัดแบบ lossy ของ JPG ทำให้ขอบคมเบลอและหยัก ซึ่งเห็นชัดที่สุดบนตัวอักษร
โลโก้: คำถามที่พบบ่อย
ทำโลโก้ JPG ให้โปร่งใสได้ไหม
ไม่ได้ถ้ายังเป็น JPG เพราะ JPG ไม่มีช่องอัลฟา พื้นที่โปร่งใสจะถูกเติมสีเมื่อบันทึก ให้ลบพื้นหลังแล้วบันทึกเป็น PNG หรือ WebP แทน
ทำไมโลโก้พื้นหลังโปร่งใสของฉันมีขอบขาวบนพื้นหลังสีเข้ม
พิกเซลที่ขอบผสมกับพื้นหลังสีขาวเดิม ให้ตัดใหม่จากไฟล์ต้นฉบับที่ใหญ่กว่า หรือใช้โลโก้เวอร์ชันสีอ่อนที่ทำไว้สำหรับพื้นหลังสีเข้ม
โลโก้เว็บไซต์ควรใช้ SVG หรือ PNG
ใช้ SVG ถ้ามีไฟล์เวกเตอร์ เพราะขยายได้ทุกหน้าจอโดยไม่เบลอและมักมีขนาดเล็ก ใช้ PNG หรือ WebP พื้นหลังโปร่งใสเมื่อมีแค่รูปแบบราสเตอร์
Favicon ควรมีขนาดเท่าไร
Google กำหนดให้ favicon เป็นสี่เหลี่ยมจัตุรัสอย่างน้อย 8 x 8 px และแนะนำให้ใหญ่กว่า 48 x 48 px สำหรับเว็บแอปที่ติดตั้งได้ ให้เพิ่มไอคอน 192 x 192 px และ 512 x 512 px
LinkedIn Company Page ต้องใช้โลโก้ขนาดเท่าไร
LinkedIn แนะนำ 400 x 400 px ขั้นต่ำ 268 x 268 px เป็น PNG หรือ JPEG ไม่เกิน 3 MB
การลบพื้นหลังจะเปลี่ยนสีแบรนด์ของฉันไหม
ไม่ เฉพาะพิกเซลพื้นหลังเท่านั้นที่กลายเป็นโปร่งใส สีของโลโก้ยังเหมือนเดิม ถ้าสีดูผิด ให้ตรวจว่าไฟล์ที่ส่งออกไม่ได้ถูกแปลงเป็น JPG บนสีอื่น
ลองกับรูปของคุณเอง
บัญชีใหม่รับฟรี 50 เครดิต หนึ่งเครดิตต่อรูป ไม่ต้องสมัครสมาชิกรายเดือน และเครดิตไม่มีวันหมดอายุ
ลบพื้นหลังแหล่งที่มา
- MDN: Image file type and format guide
- Google Search Central: Define a favicon to show in search results
- web.dev: Add a web app manifest
- LinkedIn Help: Image specifications for your LinkedIn Pages and Career Pages
- Etsy Help: Requirements and best practices for images in your Etsy shop
- Microsoft Support: Change the size of your PowerPoint slides
- Facebook Help: Facebook Page profile picture and cover photo dimensions
อัปเดต 23 ตุลาคม 2569