147

คุณตั้งค่าไอคอนแอพสำหรับแอพ Electron ของคุณอย่างไร?

ฉันพยายามBrowserWindow({icon:'path/to/image.png'});แต่มันใช้งานไม่ได้

ฉันต้องแพ็คแอปเพื่อดูผลหรือไม่

icons electron

คุณสามารถติดตามgithub.com/onmyway133/blog/issues/66

— onmyway133

สิ่งหนึ่งที่คุณสามารถทำได้สำหรับ Mac คือใส่postinstallสคริปต์ในโครงการของคุณที่จะคัดลอกไฟล์. icns ในตำแหน่งภายใต้ node_modules / โดยอัตโนมัติ

— theram

164

การตั้งค่าiconคุณสมบัติเมื่อสร้างสิ่งBrowserWindowเดียวจะมีผลกับ Windows และ Linux

ในการตั้งค่าไอคอนบน OS X คุณสามารถใช้อิเล็กตรอน - แพ็คเกอร์และตั้งไอคอนโดยใช้--iconสวิตช์

มันจะต้องอยู่ในรูปแบบ. icns สำหรับ OS X มีตัวแปลงไอคอนออนไลน์ซึ่งสามารถสร้างไฟล์นี้ได้จาก. png ของคุณ

— Alex Warren
แหล่งที่มา

5

การตั้งค่าไอคอนบน BrowserWindow เป็นไฟล์. PNG จะแสดงในทาสก์บาร์ในหน้าต่าง ตัวอย่างของการทำงานสามารถพบได้ในบล็อกของฉันที่นี่: mylifeforthecode.com/อาจเป็นไปได้ว่าเส้นทางต้องสมบูรณ์เพื่อที่จะทำงานเมื่อฉันตั้งเป็น __dirname + 'path / to / icon.png' อย่างไรก็ตามในการตั้งค่าไอคอนสำหรับ. exe คุณจะต้องใช้อิเล็กตรอน - แพ็คเกจหรือทรัพยากรแฮ็กเกอร์

— Shawn Rakowski

คุณช่วยแก้ไขคำตอบนี้ให้เป็น Windows wrt ที่ถูกต้องได้มั้ย

— Ana Betts

ขอบคุณ @ShawnRakowski คุณพูดถูก - ฉันเพิ่งทดสอบสิ่งนี้และคุณสมบัติของไอคอนก็ใช้ได้กับ Windows เช่นกัน ฉันได้อัปเดตคำตอบเพื่อแสดงถึงสิ่งนี้แล้ว

— Alex Warren

1

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

— เจตน์

10

@Nick คุณจะต้องทำสิ่งต่อไปนี้electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"

— Mateo

47

ด้านล่างเป็นวิธีแก้ปัญหาที่ฉันมี:

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});

— Sh4m
แหล่งที่มา

18

ควรกล่าวถึง __dirname เป็นเส้นทางของ / src / โฟลเดอร์ (เช่นโฟลเดอร์ของไฟล์ app.js / main.js)

— Konstantin

.icnsไม่ต้องการ ?

— ishandutta2007

20

คุณสามารถทำเพื่อ macOS ได้เช่นกัน ตกลงไม่ใช่ผ่านรหัส แต่ด้วยขั้นตอนง่าย ๆ :

ค้นหาไฟล์. icns ที่คุณต้องการใช้เปิดและคัดลอกผ่านทางเมนูแก้ไข
ค้นหา electron.app ซึ่งมักอยู่ใน node_modules / electron / dist
เปิดหน้าต่างข้อมูล
เลือกไอคอนที่มุมบนซ้าย (ขอบสีเทารอบ ๆ )
วางไอคอนผ่าน cmd + v
เพลิดเพลินกับไอคอนของคุณในระหว่างการพัฒนา :-)

จริงๆแล้วมันเป็นเรื่องทั่วไปที่ไม่เฉพาะเจาะจงกับอิเล็กตรอน คุณสามารถเปลี่ยนไอคอนของแอพ macOS มากมายเช่นนี้

— alexrjs
แหล่งที่มา

6

ขอบคุณมากสำหรับสิ่งนี้ ฉันต้องลากแล้วปล่อยเพื่อให้มันทำงาน แต่ก็น่าทึ่ง

— Robert Masen

คำแนะนำที่สมบูรณ์: support.apple.com/kb/PH25383?locale=en_US

— AndroidDev

ดูเหมือนว่าจะทำงานเพื่อการพัฒนาเท่านั้น เมื่อฉันรัน 'yarn dist' ไฟล์ icns จะถูกแทนที่ด้วยอิเล็กตรอนเริ่มต้น

— เดฟ

2

@Dave จริง ๆ แล้วเขาพูด6. Enjoy your icon during *development* :-)

— Mia

อืม ... ฉันรู้ว่า ... แต่การแก้ไขนี้มีอายุมากกว่า 2 ปี ... ;-) และ btw คุณควรจะสามารถใช้ "แฮ็ค" นี้ในการสร้างขั้นสุดท้ายได้เนื่องจากคุณเพียงแค่เปลี่ยนมันในแอพ dist ... ยังไม่ได้ลองมาสักครู่ .. และใครจะรู้ว่าอาจมีทางเป็นทางการอยู่ตอนนี้ ... ;-)

— alexrjs

12

อัปเดตpackage.json:

"build": {
  "appId": "com.my-website.my-app",
  "productName": "MyApp",
  "copyright": "Copyright © 2019 ${author}",
  "mac": {
    "icon": "./public/icons/mac/icon.icns",     <---------- set Mac Icons
    "category": "public.app-category.utilities"
  },
  "win": {
    "icon": "./public/icons/png/256x256.png" <---------- set Win Icon
  },
  "files": [
    "./build/**/*",
    "./dist/**/*",
    "./node_modules/**/*",
    "./public/**/*",       <---------- need for get access to icons
    "*.js"
  ],
  "directories": {
    "buildResources": "public" <---------- folder where placed icons
  }
},

หลังจากสร้างแอปพลิเคชันแล้วคุณจะเห็นไอคอน โซลูชันนี้ไม่แสดงไอคอนในโหมดผู้พัฒนา new BrowserWindow()ฉันทำไม่ได้ไอคอนติดตั้งใน

— Andrey Patseiko
แหล่งที่มา

1

ตัวสร้างอิเล็กตรอนรองรับไอคอน

— loevborg
แหล่งที่มา

1

หากคุณต้องการอัปเดตไอคอนแอปในทาสก์บาร์ให้อัปเดตการติดตามใน main.js (หากใช้ typescript แล้ว main.ts)

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

__dirnameชี้ไปที่ไดเรกทอรีราก (ไดเรกทอรีเดียวกับpackage.json) แอปพลิเคชันของคุณ

— ฮาริดาส
แหล่งที่มา

แน่ใจเกี่ยวกับ mac ไหม

— Anil8753

0

โปรดระวังว่าตัวอย่างสำหรับเส้นทางไฟล์ไอคอนมีแนวโน้มที่จะถือว่า main.js อยู่ภายใต้ไดเรกทอรีฐาน หากไฟล์ไม่ได้อยู่ในไดเรกทอรีฐานของแอปข้อกำหนดคุณสมบัติของพา ธ ต้องคำนึงถึงข้อเท็จจริงนั้น

ตัวอย่างเช่นหาก main.js อยู่ภายใต้ src / ไดเรกทอรีย่อยและไอคอนอยู่ภายใต้ asset / icons / ข้อมูลจำเพาะพา ธ ของไอคอนนี้จะทำงาน:

icon: __dirname + "../assets/icons/icon.png"

— Giao Vu
แหล่งที่มา

0

อิเล็กตรอนแพกเกจ

การตั้งค่าคุณสมบัติไอคอนเมื่อสร้างสิ่งBrowserWindowเดียวจะมีผลกับแพลตฟอร์ม Windows และ Linux คุณต้องจัดแพคเกจ. ics ให้สูงสุด

ในการตั้งค่าไอคอนบน OS X โดยใช้electron-packagerให้ตั้งไอคอนโดยใช้สวิตช์ --icon

มันจะต้องอยู่ในรูปแบบ. icns สำหรับ OS X มีตัวแปลงไอคอนออนไลน์ที่สามารถสร้างไฟล์นี้จาก. png ของคุณ

อิเล็กตรอนสร้าง

เป็นวิธีแก้ปัญหาล่าสุดฉันพบทางเลือกในการใช้--iconสวิตช์ นี่คือสิ่งที่คุณสามารถทำได้

สร้างไดเรกทอรีชื่อbuildในไดเรกทอรีโครงการของคุณและใส่ไอคอนในไดเรกทอรีเป็นชื่อ.icnsicon.icns
electron-builder --dirเรียกใช้คำสั่งสร้างโดยการดำเนินการ

คุณจะพบไอคอนแอปพลิเคชันของคุณจะถูกเลือกโดยอัตโนมัติจากตำแหน่งไดเรกทอรีนั้นและใช้สำหรับแอปพลิเคชันขณะบรรจุภัณฑ์

หมายเหตุ : คำตอบที่ให้ไว้สำหรับเวอร์ชั่นล่าสุดelectron-builderและทดสอบด้วย electron-builder v21.2.0

— กีรานมณียา
แหล่งที่มา

วิธีตั้งค่าไอคอนแอพสำหรับ Electron / Atom Shell App

อิเล็กตรอนแพกเกจ

อิเล็กตรอนสร้าง