Làm cách nào để đặt favicon tùy chỉnh trong Express?

Gần đây tôi đã bắt đầu làm việc trong Node.js và trong tệp app.js có dòng này:

app.use(express.favicon());

Bây giờ, làm cách nào để thiết lập favicon.ico tùy chỉnh của riêng tôi?

Trong Express 4

Cài đặt phần mềm trung gian favicon và sau đó làm:

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

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

Hoặc tốt hơn, sử dụng pathmô-đun:

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

(lưu ý rằng giải pháp này cũng sẽ hoạt động trong 3 ứng dụng)

Trong Express 3

Theo API, .faviconchấp nhận tham số vị trí:

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

Hầu hết thời gian, bạn có thể muốn điều này (như vsync đề xuất):

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

Hoặc tốt hơn nữa, sử dụng pathmô-đun (như Druska đề xuất):

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

Tại sao favicon tốt hơn tĩnh

Theo mô tả gói :

1. Mô-đun này lưu trữ biểu tượng trong bộ nhớ để cải thiện hiệu suất bằng cách bỏ qua quyền truy cập đĩa.
2. Mô-đun này cung cấp ETagdựa trên nội dung của biểu tượng, thay vì thuộc tính hệ thống tệp.
3. Mô-đun này sẽ phục vụ với sự tương thích nhất Content-Type.

Không có phần mềm trung gian bổ sung cần thiết. Chỉ dùng:

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

favicon mặt cười để ngăn ngừa lỗi:

 //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);
 });

để thay đổi biểu tượng trong mã ở trên

tạo một biểu tượng có thể ở đây: http://www.favicon.cc/ hoặc tại đây: http://favicon-generator.org

chuyển đổi nó thành base64 có thể ở đây: http://base64converter.com/

sau đó thay thế giá trị biểu tượng cơ sở 64

thông tin chung làm thế nào để tạo một biểu tượng fav cá nhân

các biểu tượng được tạo bằng photoshop hoặc inkscape, có thể là inkscape rồi photoshop để chỉnh rung và chỉnh màu (trong menu hình ảnh-> điều chỉnh).

để có biểu tượng nhanh goto http://www.clker.com/ và chọn một số Vector Clip Arts và tải xuống dưới dạng svg. sau đó mang nó đến inkscape ( https://inkscape.org/ ) và thay đổi màu sắc hoặc xóa các phần, có thể thêm một cái gì đó từ một hình ảnh clipart vector khác, sau đó để xuất chọn các phần để xuất và nhấp vào tệp> xuất, chọn kích thước như 16x16 cho favicon hoặc 32x32. để chỉnh sửa thêm 128x128 hoặc 256x256. Gói ico có thể có một số kích thước biểu tượng bên trong. nó có thể có cùng với favicon 16x16 pixel một biểu tượng chất lượng cao để liên kết cho trang web.

sau đó có thể nâng cao hình ảnh trong photoshop. như rung động, hiệu ứng vát, mặt nạ tròn, bất cứ điều gì.

sau đó tải hình ảnh này lên một trong những trang web tạo favicon. cũng có các chương trình cho windows để chỉnh sửa các biểu tượng như https://sourceforge.net/projects/variicons/ .

để thêm favicon vào trang web. chỉ cần đặt favicon.ico như một tệp trong thư mục gốc của tên miền. ví dụ: trong node.js trong thư mục công cộng có chứa các tệp tĩnh. nó không phải là bất cứ điều gì đặc biệt như mã ở trên chỉ là một tệp đơn giản.

Không cần phần mềm trung gian tùy chỉnh?! Thể hiện:

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

Sau đó đặt favicon của bạn ở chế độ công khai và thêm dòng sau vào đầu html của bạn:

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

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

Tôi đã có nó hoạt động tại địa phương mà không có __dirname +nhưng không thể làm cho nó hoạt động trên máy chủ được triển khai của tôi.

Nếu bạn đang sử dụng Express> 4.0, bạn có thể dùng dịch vụ-favicon

Nếu bạn có đường dẫn tĩnh được đặt, thì chỉ cần sử dụng <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">trong chế độ xem của bạn. Không cần bất cứ điều gì khác. Vui lòng đảm bảo rằng bạn có thư mục hình ảnh của bạn trong thư mục công cộng.

Cài đặt express-faviconphần mềm trung gian:

npm install express-favicon --save

Sử dụng nó như thế này:

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

Bạn phải cài đặt phần mềm trung gian để phục vụ favicon.

Tôi đã thử điều này ngay bây giờ:

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

và nhận được thông báo lỗi này trở lại:

Lỗi: Hầu hết các phần mềm trung gian (như favicon) không còn được gói cùng với Express và phải được cài đặt riêng. Vui lòng xem https://github.com/senchalabs/connect#middleware .

Tôi nghĩ rằng chúng ta có thể coi đó là dứt khoát.

Mã được liệt kê dưới đây hoạt động:

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

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

Chỉ cần đảm bảo làm mới trình duyệt của bạn hoặc xóa bộ nhớ cache của bạn.

bước 0: thêm mã bên dưới vào app.js hoặc index.js

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

bước 1: biểu tượng tải xuống từ đây https://icons8.com/ hoặc tạo
bước 2 của riêng bạn : truy cập https://www.favicongenerator.com/
bước 3 : tải lên tệp icon.png đã tải xuống> đặt 16px> tạo favicon> tải xuống
bước 4: vào thư mục tải xuống, bạn sẽ tìm thấy [.ico tệp], đổi tên thành favicon.ico
bước 5: sao chép favicon.ico trong thư mục công cộng bạn đã tạo
bước 6: thêm mã bên dưới vào tệp .pug của bạn dưới thẻ tiêu đề, bên dưới thẻ tiêu đề

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

Bước 7: lưu> khởi động lại máy chủ> đóng trình duyệt> mở lại trình duyệt> favicon xuất hiện

LƯU Ý: bạn có thể sử dụng tên khác với favicon,
            nhưng đảm bảo bạn thay đổi tên trong mã và trong thư mục công cộng.

Trong app.js:

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

Giả sử biểu tượng nằm trong "/public/images/favicon.ico" thêm liên kết tiếp theo vào đầu html:

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

Điều này hoạt động tốt trong một dự án được tạo tự động với lệnh:

express my-project

Nếu bạn muốn một giải pháp không liên quan đến các tệp bên ngoài và không sử dụng express.static(ví dụ: máy chủ web và trang web siêu nhẹ), bạn có thể sử dụng serve-faviconvà mã hóa favicon.icotệp của mình dưới dạng Base64. Như thế này:

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));

Thay thế IMAGE_AS_BASE64_STRING_GOES_HEREbằng kết quả mã hóa tệp favicon của bạn là Base64. Có rất nhiều trang web có thể làm điều đó trực tuyến, có một tìm kiếm.

Lưu ý bạn có thể cần phải khởi động lại máy chủ và / hoặc trình duyệt để thấy nó hoạt động localhostvà bộ đệm trình duyệt cứng / làm mới cứng để thấy nó hoạt động trên web.