Express에서 사용자 정의 파비콘을 설정하는 방법은 무엇입니까?


136

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

app.use(express.favicon());

이제 나만의 favicon.ico를 어떻게 설정합니까?


3
브라우저 캐시를 올바르게 지우십시오. 그렇지 않으면 브라우저가 변경되지 않을 수 있습니다.
vsync

app.use(express.favicon())Express 4에서 사용 하면 다음 과 같은 이점이 있습니다. favicon과 같은 대부분의 미들웨어는 더 이상 Express와 번들로 제공되지 않으며 별도로 설치해야합니다. github.com/senchalabs/connect#middleware를 참조하십시오 . 또는 다음과 함께 app.get('/favicon.ico', (req, res) => res.status(200)) 즐겨 찾기 아이콘을
사용자

답변:


239

Express 4에서

파비콘 미들웨어를 설치 한 후 다음을 수행하십시오.

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

또는 pathDruska가 제안한대로 모듈을 사용하십시오 .

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

파비콘정적 인 것보다 좋은 이유

패키지 설명 에 따르면 :

  1. 이 모듈은 디스크 액세스를 건너 뛰어 성능을 향상시키기 위해 아이콘을 메모리에 캐시합니다.
  2. 이 모듈은 ETag파일 시스템 특성이 아니라 아이콘의 내용을 기반으로합니다.
  3. 이 모듈은 가장 호환되는 기능을 Content-Type합니다.

1
감사! 내가 볼 수 있도록 문제를 열어 주시겠습니까 ? 잘하면 경로 만, 즉 path.join(__dirname, "public")문자열이 구분 기호없이 연결되어 있습니까? 샘플이 작을수록이 문제를 더 빨리 해결할 수 있습니다 (따라서 조인 부분 만 있으면됩니다).
Benjamin Gruenbaum

Eduardo가 설명 하는 좀 더 상징적 인 방법 대신 또 다른 미들웨어 (미래에 실제로 유지 보수하지 않을 수도있는 사람이 유지 보수 함)를 사용하면 어떤 이점이 있습니까?
LucaM

3
@LucaM 우선-좋은 질문! serve-favicon은 우리 (Node.js 재단)와 Doug (익스프레스를 유지하는 사람)가 관리합니다. 즉, Express 자체를 작성하고 유지 관리하는 사람이 동일합니다. 이유에 대한 추가 정보 를 볼 수 있지만 기본적으로 로깅, 캐싱, ETag 처리 및 정정 Content-Type입니다. 여기서 무엇을하는지 볼 수 있습니다 . 이 답변을 편집하는 데 장점이 있다고 생각하십니까?
Benjamin Gruenbaum

1
favicon이 제공 하는 기능을 삭제 한 Benjamin에게 감사합니다 . 꼭 필요한 것은 아니지만 허용 된 답변에 쓰겠습니다.
LucaM

36

추가 미들웨어가 필요하지 않습니다. 그냥 사용하십시오 :

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

1
그렇습니다. 이것으로 충분할 것이며, 이에 대한 추가 미들웨어가 과도한 것으로 느껴지기 때문에 정답입니다.
jlstr

1
@jlstr 그것은 20 줄의 코드와 같으며 어떤 종류의 과잉 행위를 의미합니까?)) 서버 측이므로 작은 종속성의 수는 중요하지 않습니다. 그리고 상술 미들웨어 제공한다 : 1) 메모리 캐싱 2) 적절한 설정의 ETag 3) 적절한 세트Content-Type
maxkoryukov

18

오류를 방지하기 위해 웃는 favicon :

 //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/으로 이동 하여 Vector Clip Arts를 선택하고 svg로 다운로드하십시오. 그런 다음 inkscape ( https://inkscape.org/ ) 로 가져 와서 색상을 변경하거나 부품을 삭제하고 다른 벡터 클립 아트 이미지에서 무언가를 추가 한 다음 내보낼 부품을 선택하고 내보낼 파일> 내보내기를 클릭하십시오. 파비콘 또는 32x32. 128x128 또는 256x256을 추가로 편집 할 수 있습니다. ico 패키지는 여러 개의 아이콘 크기를 가질 수 있습니다. 16x16 픽셀 파비콘과 함께 웹 사이트 링크를위한 고품질 아이콘을 가질 수 있습니다.

포토샵에서 이미지를 향상시킬 수 있습니다. 생동감, 경사 효과, 둥근 마스크 등.

그런 다음 즐겨 찾기 아이콘을 생성하는 웹 사이트 중 하나에이 이미지를 업로드하십시오. https://sourceforge.net/projects/variicons/ 와 같은 아이콘 편집을위한 창 프로그램도 있습니다 .

파비콘을 웹 사이트에 추가합니다. favicon.ico를 도메인의 루트 폴더에 파일로 저장하십시오. 예를 들어 정적 파일이 들어있는 공용 폴더의 node.js에 있습니다. 단순한 파일 위의 코드와 같이 특별한 것이 될 필요는 없습니다.


1
이 접근 방식이 가장 좋습니다. 방금 base64 대신 제공 할 파일을 사용했습니다. fs.createReadStream ( "./ public / favicon.ico"). pipe (res);
DaafVader

2
이미 express를 사용하고 있으므로 express.favicon을 사용하는 것이 어떻습니까? 정적 폴더를 사용할 수 있다면 전체 경로를 만드는 이유는 무엇입니까? 그 외에도, 그 마술 줄 (당신의 웃는)은 당신의 사건을 더 잘하지 않습니다.
SubliemeSiem

1
파비콘을 넣는 데 코드가 필요하지 않습니다. 정적 파일 디렉토리에 파일로 넣으십시오.
Shimon Doodkin

16

사용자 정의 미들웨어가 필요하지 않습니까?! 명시 적으로 :

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

그런 다음 즐겨 찾기 아이콘을 공개로 설정하고 HTML 헤드에 다음 줄을 추가하십시오.

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

1
DaafVader입니다. 이것은 효과가 있었다. 내 설정은 app.use (express.static ( 'public'))입니다. 내 즐겨 찾기 아이콘을 공용 폴더의 폴더 img에 저장했습니다. head 섹션의 html 파일에서 <link rel = "icon"href = "/ img / favicon.ico">를 사용했습니다. 여기서 favicon.ico는 내 즐겨 찾기 아이콘의 파일 이름입니다.
Nhon Ha

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

없이 로컬에서 작동 __dirname +했지만 배포 된 서버에서 작동하지 못했습니다.


시도app.use(express.favicon('./public/images/favicon.ico'));
Alexis Diel


4

고정 경로를 설정 <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">했다면 뷰에서를 사용하십시오 . 다른 것은 필요 없습니다. 공용 폴더 안에 이미지 폴더가 있는지 확인하십시오.


1
개발하는 동안 Chrome 127.0.0.1대신 사용하고 있는지 확인하십시오 localhost.
cprcrack

1

express-favicon미들웨어 설치 :

npm install express-favicon --save

다음과 같이 사용하십시오.

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

1

파비콘을 제공하려면 미들웨어를 설치해야합니다.

나는 지금 이것을 시도했다.

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

이 오류 메시지가 다시 나타납니다.

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

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


0

아래에 나열된 코드가 작동합니다.

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

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

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


0

1 단계 : 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 설정> favicon 생성> 다운로드
단계 4 : 다운로드 폴더로 이동하여 [.ico 파일]로 이름을 바꾸고 favicon.ico로 이름을 바꾸십시오
. 5 단계 : 공용 디렉토리에 favicon.ico 복사
6 단계 를 만들었습니다 . 제목 태그 아래 head 태그 아래 .pug 파일에 아래 코드를 추가하십시오.

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

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

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


0

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

0

외부 파일을 포함하지 않고 사용하지 않는 솔루션 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즐겨 찾기 아이콘 파일을 Base64로 인코딩 한 결과로 바꿉니다 . 온라인으로 검색 할 수있는 사이트가 많이 있습니다.

서버 및 / 또는 브라우저를 다시 시작하여 작동하는지 확인 localhost하고 하드 캐시 새로 고침 / 삭제 브라우저를 사용하여 웹에서 작동하는지 확인해야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.