หลัง
ก่อน
กรณีใช้งาน

ทำโลโก้พื้นหลังโปร่งใส

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

โลโก้: ทีละขั้นตอน

  1. เริ่มจากไฟล์ที่ใหญ่ที่สุดที่หาได้โลโก้ในลายเซ็นอีเมลมักกว้างไม่ถึง 200 px ให้หาต้นฉบับในโฟลเดอร์แบรนด์ ชุดข่าวประชาสัมพันธ์ ไฟล์ PDF หรือไฟล์รูปของเว็บไซต์เอง การตัดพื้นหลังเพิ่มรายละเอียดที่ไม่มีอยู่ไม่ได้ ต้นฉบับ 2000 px จึงให้ขอบคม ส่วนต้นฉบับ 150 px ให้ขอบเบลอและหยัก
  2. ลบพื้นหลังและตรวจช่องโหว่ลบพื้นหลัง แล้วซูมดูตัวอักษรที่มีรูปทรงปิด เช่น O, A, B, e และ g รวมถึงช่องว่างระหว่างไอคอนกับชื่อแบรนด์ พื้นที่ด้านในเหล่านั้นต้องโปร่งใสด้วย ไม่อย่างนั้นสีของสไลด์หรือส่วนหัวจะไม่ทะลุผ่าน สลับตัวอย่างเป็นพื้นหลังสีเข้มเพื่อหาสีขาวที่หลงเหลือ
  3. ส่งออกตามที่จะนำไปใช้ดาวน์โหลด 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 เครดิต หนึ่งเครดิตต่อรูป ไม่ต้องสมัครสมาชิกรายเดือน และเครดิตไม่มีวันหมดอายุ

ลบพื้นหลัง

แหล่งที่มา

อัปเดต 23 ตุลาคม 2569