วิธีตั้งค่าไอคอน Fav แบบกำหนดเองใน Express

ฉันเพิ่งเริ่มทำงานใน Node.js และในไฟล์ app.js มีบรรทัดนี้:

app.use(express.favicon());

ตอนนี้ฉันจะตั้งค่า favicon.ico ที่กำหนดเองได้อย่างไร

ใน Express 4

ติดตั้งมิดเดิลแวร์ faviconแล้วทำ:

var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));

หรือดีกว่าโดยใช้pathโมดูล:

app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));

(โปรดทราบว่าโซลูชันนี้จะทำงานในแอป Express 3 ได้เช่นกัน)

ใน Express 3

ตาม API .faviconยอมรับพารามิเตอร์ตำแหน่ง:

app.use(express.favicon("public/images/favicon.ico")); 

โดยส่วนใหญ่คุณอาจต้องการสิ่งนี้ (ตามที่ vsync แนะนำ):

app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

หรือดีกว่านั้นให้ใช้pathโมดูล (ตามที่ Druska แนะนำ):

app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico'))); 

ทำไมFaviconจึงดีกว่าแบบคงที่

ตามรายละเอียดแพ็คเกจ :

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

ไม่จำเป็นต้องมีตัวกลางเพิ่มเติม เพียงใช้:

app.use('/favicon.ico', express.static('images/favicon.ico'));

ไอคอน Fav ยิ้มเพื่อป้องกันข้อผิดพลาด:

 //const fs = require('fs'); 
 //const favicon = fs.readFileSync(__dirname+'/public/favicon.ico'); // read file
 const favicon = new Buffer.from('AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA/4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAAAAAEAAAEAAAAAEAAAABAAAAEAAAAAAQAAAQAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAEAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD8HwAA++8AAPf3AADv+wAA7/sAAP//AAD//wAA+98AAP//AAD//wAA//8AAP//AAD//wAA', 'base64'); 
 app.get("/favicon.ico", function(req, res) {
  res.statusCode = 200;
  res.setHeader('Content-Length', favicon.length);
  res.setHeader('Content-Type', 'image/x-icon');
  res.setHeader("Cache-Control", "public, max-age=2592000");                // expiers after a month
  res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());
  res.end(favicon);
 });

เพื่อเปลี่ยนไอคอนในโค้ดด้านบน

สร้างไอคอนได้ที่นี่: http://www.favicon.cc/หรือที่นี่: http://favicon-generator.org

แปลงเป็น base64 ได้ที่นี่: http://base64converter.com/

จากนั้นแทนที่ค่าไอคอนฐาน 64

ข้อมูลทั่วไปเกี่ยวกับวิธีสร้างไอคอนความชอบส่วนตัว

ไอคอนถูกสร้างขึ้นโดยใช้ photoshop หรือ inkscape อาจจะใช้ inkscape แล้วก็ photoshop สำหรับการสั่นและการแก้ไขสี

สำหรับไอคอนด่วนไปที่http://www.clker.com/และเลือกเวกเตอร์ภาพตัดปะและดาวน์โหลดเป็น svg จากนั้นนำไปที่ inkscape ( https://inkscape.org/ ) และเปลี่ยนสีหรือลบบางส่วนอาจเพิ่มบางอย่างจากภาพเวกเตอร์ภาพตัดปะอื่นจากนั้นในการส่งออกเลือกชิ้นส่วนที่จะส่งออกและคลิกไฟล์> ส่งออกเลือกขนาดเช่น 16x16 สำหรับ Favicon หรือ 32x32 สำหรับการแก้ไขเพิ่มเติม 128x128 หรือ 256x256 แพ็คเกจ ico สามารถมีไอคอนหลายขนาดอยู่ภายใน มันสามารถมีไอคอน Favicon 16x16 พิกเซลคุณภาพสูงสำหรับลิงค์สำหรับเว็บไซต์

จากนั้นอาจปรับปรุงภาพใน photoshop เช่น vibrance, bevel effect, round mask, อะไรก็ได้

จากนั้นอัปโหลดภาพนี้ไปยังหนึ่งในเว็บไซต์ที่สร้าง Favicons นอกจากนี้ยังมีโปรแกรมสำหรับหน้าต่างสำหรับการแก้ไขไอคอนเหมือนhttps://sourceforge.net/projects/variicons/

เพื่อเพิ่มไอคอน Fav ลงในเว็บไซต์ เพียงแค่ใส่ favicon.ico เป็นไฟล์ในโฟลเดอร์รากของโดเมน ตัวอย่างเช่นใน node.js ในโฟลเดอร์สาธารณะที่มีไฟล์คงที่ ไม่จำเป็นต้องมีอะไรพิเศษเหมือนโค้ดข้างบนไฟล์ธรรมดา ๆ

ไม่จำเป็นต้องมีมิดเดิลแวร์ที่กำหนดเอง! ด่วน:

 //you probably have something like this already    
app.use("/public", express.static('public')); 

จากนั้นใส่ไอคอน Fav ของคุณในที่สาธารณะและเพิ่มบรรทัดต่อไปนี้ในหัว html ของคุณ:

<link rel="icon" href="/public/favicon.ico">

app.use(express.favicon(__dirname + '/public/images/favicon.ico')); 

ฉันให้มันทำงานในเครื่องโดยไม่มี__dirname +แต่ไม่สามารถทำงานบนเซิร์ฟเวอร์ที่ใช้งานได้

หากคุณใช้ Express> 4.0 คุณสามารถไปที่ไอคอน serve-fav

หากคุณกำหนดเส้นทางแบบคงที่ให้ใช้<link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">ในมุมมองของคุณ ไม่ต้องการสิ่งอื่นใด โปรดตรวจสอบให้แน่ใจว่าคุณมีโฟลเดอร์รูปภาพของคุณอยู่ในโฟลเดอร์สาธารณะ

ติดตั้งexpress-faviconมิดเดิลแวร์:

npm install express-favicon --save

ใช้แบบนี้:

const favicon = require('express-favicon');
app.use(favicon(__dirname + 'favicon.ico'));

คุณต้องติดตั้งมิดเดิลแวร์เพื่อให้บริการไอคอน Fav

ฉันลองแล้วตอนนี้:

app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico'))); 

และได้รับข้อความแสดงข้อผิดพลาดนี้กลับมา:

ข้อผิดพลาด: มิดเดิลแวร์ส่วนใหญ่ (เช่นไอคอน Fav) ไม่รวมอยู่ใน Express อีกต่อไปและต้องติดตั้งแยกต่างหาก โปรดดู https://github.com/senchalabs/connect#middleware

ผมคิดว่าเราสามารถสรุปได้

หากคุณต้องการโซลูชันที่ไม่เกี่ยวข้องกับไฟล์ภายนอกและไม่ได้ใช้express.static(ตัวอย่างเช่นเว็บเซิร์ฟเวอร์และไซต์ไฟล์เดียวที่มีน้ำหนักเบามาก) คุณสามารถใช้serve-faviconและเข้ารหัสfavicon.icoไฟล์ของคุณเป็น Base64 ได้ แบบนี้:

const favicon = require('serve-favicon');
const imgBuffer = new Buffer.from('IMAGE_AS_BASE64_STRING_GOES_HERE', 'base64');
// assuming app is already defined
app.use(favicon(imgBuffer));

แทนที่IMAGE_AS_BASE64_STRING_GOES_HEREด้วยผลลัพธ์ของการเข้ารหัสไฟล์ Favicon ของคุณเป็น Base64 มีเว็บไซต์มากมายที่สามารถทำเช่นนั้นได้ทางออนไลน์มีการค้นหา

โปรดทราบว่าคุณอาจต้องรีสตาร์ทเซิร์ฟเวอร์และ / หรือเบราว์เซอร์เพื่อให้ทำงานได้localhostและทำการรีเฟรช / ล้างแคชของเบราว์เซอร์อย่างหนักเพื่อดูว่าทำงานบนเว็บ

รหัสด้านล่างใช้งานได้:

var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));

อย่าลืมรีเฟรชเบราว์เซอร์หรือล้างแคช

ขั้นตอนที่ 0: เพิ่มโค้ดด้านล่างลงใน app.js หรือ index.js

app.use("/favicon.ico", express.static('public/favicon.ico'));

ขั้นตอนที่ 1: ดาวน์โหลดไอคอนจากที่นี่https://icons8.com/หรือสร้าง
ขั้นตอนที่ 2 ของคุณเอง: ไปที่https://www.favicongenerator.com/
ขั้นตอนที่ 3 : อัปโหลดไฟล์ icon.png ที่ดาวน์โหลด> ตั้งค่า 16px> สร้างไอคอน Fav> ดาวน์โหลด
ขั้นตอนที่ 4: ไปที่โฟลเดอร์ดาวน์โหลดคุณจะพบ [.ico ไฟล์] เปลี่ยนชื่อเป็น favicon.ico
ขั้นตอนที่ 5: คัดลอก favicon.ico ในไดเรกทอรีสาธารณะ คุณสร้าง
ขั้นตอนที่ 6: เพิ่มโค้ดด้านล่างลงในไฟล์. pug ของคุณใต้แท็กหัวใต้แท็กชื่อเรื่อง

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

ขั้นตอนที่ 7: บันทึก> รีสตาร์ทเซิร์ฟเวอร์> ปิดเบราว์เซอร์> เปิดเบราว์เซอร์อีกครั้ง> ไอคอน Fav ปรากฏขึ้น

หมายเหตุ: คุณสามารถใช้ชื่ออื่นที่ไม่ใช่ไอคอน Fav ได้
            แต่ต้องแน่ใจว่าคุณเปลี่ยนชื่อในรหัสและในโฟลเดอร์สาธารณะ

ใน app.js:

app.use(express.static(path.join(__dirname, 'public')));

สมมติว่าไอคอนอยู่ใน "/public/images/favicon.ico" ให้เพิ่มลิงก์ถัดไปในส่วนหัวของ html:

<link rel='icon' href='/images/favicon.ico' class='js-favicon'>

สิ่งนี้ใช้ได้ดีในโปรเจ็กต์ที่สร้างขึ้นโดยอัตโนมัติด้วยคำสั่ง:

express my-project

หากคุณกำลังใช้ Express.static เพื่อให้บริการโฟลเดอร์เพียงแค่ใส่ไฟล์ favicon.ico ในรูทของโฟลเดอร์นั้นและจะได้รับบริการเมื่อเบราว์เซอร์ร้องขอ ไม่จำเป็นต้องเพิ่มlinkแท็กใน html หรือเส้นทางมิดเดิลแวร์พิเศษในโค้ดแอปพลิเคชัน

หากคุณอยู่เบื้องหลัง reverse proxy คุณอาจต้องระบุประเภทสื่อ / mime สำหรับไฟล์ ( นี่คือวิธีการใน IIS ) แต่ถ้าคุณไปที่แอปของคุณโดยตรงมัน "ใช้ได้"