Express에서 사용자 지정 즐겨찾기 아이콘을 설정하는 방법은 무엇입니까?

Express에서 사용자 지정 즐겨찾기 아이콘을 설정하는 방법은 무엇입니까?

최근에 Node.js에서 작업을 시작했는데 app.js 파일에 다음 줄이 있습니다.

app.use(express.favicon());

이제 사용자 지정 favicon.ico를 설정하려면 어떻게 해야 합니까?

익스프레스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 app에서도 사용 가능합니다.)

급행 3에서

API에 따라 로케이션 파라미터를 받아들입니다.

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

맞춤형 미들웨어가 필요 없습니까?!급행으로:

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

그런 다음 당신이 좋아하는 아이콘을 공개적으로 공개하고 html의 머리에 다음 행을(를 추가합니다.

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

오류를 방지하기 위해 스마일 파비콘:

 //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 값을 바꿉니다.

일반 정보개인화된 즐겨찾기 아이콘을 만드는 방법

아이콘은 포토샵이나 잉크스케이프를 사용하여 만들어집니다. 아마도 잉크스케이프를 사용하고 진동과 색 보정을 위해 포토샵을 합니다(이미지->조정 메뉴에서).

빠른 아이콘을 보려면 http://www.clker.com/ 로 이동하여 일부 벡터 클립 아트를 선택한 후 svg로 다운로드합니다. 그런 다음 잉크스케이프(https://inkscape.org/) 로 가져와 색상을 변경하거나 부품을 삭제하거나 다른 벡터 클립 아트 이미지에서 무언가를 추가한 다음 내보낼 부품을 선택하고 파일>내보내기를 클릭하고 파비콘의 16x16 또는 32x32 크기를 선택합니다.추가 편집을 위해 128x128 또는 256x256.ico 패키지는 내부에 여러 아이콘 크기를 가질 수 있습니다.그것은 웹사이트를 위한 고품질 아이콘에 16x16픽셀의 favicon을 함께 가질 수 있습니다.

포토샵에서 이미지를 강화할 수도 있습니다.바이브런스, 베벨 효과, 둥근 마스크 같은 것들 말입니다.

그런 다음 이 이미지를 파비콘을 생성하는 웹 사이트 중 하나에 업로드합니다.https://sourceforge.net/projects/variicons/ 같은 아이콘을 편집하기 위한 윈도우용 프로그램도 있습니다.

웹사이트에 즐겨찾기 아이콘을 추가합니다.favicon.ico를 파일로 도메인의 루트 폴더에 넣으면 됩니다.예를 들어 정적 파일을 포함하는 public folder의 node.js에 있습니다.단순한 파일 위의 코드와 같은 특별한 것일 필요는 없습니다.

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

에서 없이 현지에서 했습니다.__dirname +배치된 서버에서 작동할 수 없었습니다.

Express > 4.0을 사용하는 경우 serve-favicon을 선택할 수 있습니다.

설정되어 를 한 에는 에는 한 를 <link rel="icon" href="/images/favicon.ico" type="image/x-icon">◦ ◦ 건필요 .다른 것은 필요 없습니다.공용 폴더 안에 이미지 폴더가 있는지 확인하십시오.

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(원 웹 및 를할 수 (예:량일웹버및트다수할예다수(할)트(re예) )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 리프레시를 통해 하는 것을 할 수

의 두 안 된다면이 ! 이!
favicon.ico 파일이 공개/아이콘에 있는지 확인하거나 그에 따라 변경합니다.
경로를 가져오지 않으면,

const path = require('path') ; 

그리고나서,

app.get("/favicon.ico", (req, res) => {
  return res.sendFile(path.join(__dirname + "/public/icons/favicon.ico"));
});

설치 express-favicon미들웨어:

npm install express-favicon --save

다음과 같이 사용합니다.

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

즐겨찾기 아이콘을 제공하려면 미들웨어를 설치해야 합니다.

방금 이걸 해봤어요.

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

그리고 다음 오류 메시지를 받았습니다.

오류: 파비콘과 같은 대부분의 미들웨어는 Express에 더 이상 번들로 제공되지 않으므로 별도로 설치해야 합니다.https://github.com/senchalabs/connect#middleware 를 참조해 주세요.

저는 우리가 그것을 확정적으로 받아들일 수 있다고 생각합니다.

아래에 나열된 코드는 다음과 같이 작동합니다.

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

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

브라우저를 새로 고치거나 캐시를 지우십시오.

index.js0에 아래 코드를 합니다: app.js index.js

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

1단계: 여기 https://icons8.com/ 에서 아이콘을 다운로드하거나 자신만의 아이콘을 만듭니다.
2단계: https://www.favicongenerator.com/ 로 이동합니다.
: file > set 16png > favicon > download 3png : set 16png file > set 16png favicon >
4단계: downloads 폴더로 이동하면 [.ico file](.ico 파일)을 찾을 수 있고 favicon.ico로 이름을 바꿉니다.
5단계: 생성한 public directory에 favicon.ico를 복사합니다.
6단계: 아래 코드를 헤드 태그 아래에 있는 .pug 파일에 추가합니다.

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

7단계 : 저장 > 서버 재시작 > 브라우저 닫기 > 브라우저 다시 열기 > favicon이 나타납니다.

참고: favicon 이외의 이름을 사용할 수 있습니다.
코드와 공용 폴더에서 이름을 변경해야 합니다.

폴더를 제공하기 위해 Express.static을 사용하는 경우 해당 폴더의 루트에 favicon.ico 파일을 넣으면 브라우저가 요청할 때 제공됩니다.추가할 필요는 없습니다.link응용 프로그램 코드에서 html 또는 특별한 미들웨어 경로에 태그를 지정합니다.

역방향 프록시를 사용하는 경우 파일의 미디어/마임 유형을 지정해야 할 수도 있지만(IIS의 경우 이 방법) 앱으로 직접 이동하면 "그냥 작동"합니다.

언급URL : https://stackoverflow.com/questions/15463199/how-to-set-custom-favicon-in-express