Como definir o favicon personalizado no Express?

Recentemente, comecei a trabalhar no Node.js e no arquivo app.js existe esta linha:

app.use(express.favicon());

Agora, como configuro meu próprio favicon.ico personalizado?

No Express 4

Instale o middleware favicon e faça:

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

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

Ou melhor, usando o pathmódulo:

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

(observe que esta solução também funcionará em 3 aplicativos expressos)

No Express 3

De acordo com a API, .faviconaceita um parâmetro de localização:

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

Na maioria das vezes, você pode querer isso (como sugerido pelo vsync):

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

Ou melhor ainda, use o pathmódulo (como Druska sugeriu):

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

Por que o favicon é melhor que estático

De acordo com a descrição do pacote :

1. Este módulo armazena em cache o ícone na memória para melhorar o desempenho ignorando o acesso ao disco.
2. Este módulo fornece uma ETagbase no conteúdo do ícone, em vez das propriedades do sistema de arquivos.
3. Este módulo servirá com os mais compatíveis Content-Type.

Nenhum middleware extra é necessário. Apenas use:

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

smiley favicon para evitar erros:

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

para mudar o ícone no código acima

faça um ícone talvez aqui: http://www.favicon.cc/ ou aqui: http://favicon-generator.org

convertê-lo para base64 talvez aqui: http://base64converter.com/

substitua o valor da base 64 do ícone

informações gerais sobre como criar um ícone fav personalizado

os ícones são criados usando o photoshop ou o inkscape, talvez o inkscape e o photoshop para correção de cores e vibrações (no menu imagem-> ajustes).

para obter um ícone rápido, vá para http://www.clker.com/, escolha algumas Clip Art e faça o download como svg. depois leve-o para o inkscape ( https://inkscape.org/ ) e altere cores ou exclua peças, talvez adicione algo de outra imagem de clipart vetorial e, em seguida, para exportar, selecione as peças a serem exportadas e clique em arquivo> exportar, escolha o tamanho 16x16 para favicon ou 32x32. para editar ainda mais 128x128 ou 256x256. O pacote ico pode ter vários tamanhos de ícones dentro. ele pode ter, juntamente com o favicon de 16x16 pixels, ícones de alta qualidade para o link do site.

então talvez melhore a imagem no photoshop. como vibração, efeito chanfrado, máscara redonda, qualquer coisa.

faça o upload desta imagem para um dos sites que geram favicons. também existem programas para janelas para editar ícones como https://sourceforge.net/projects/variicons/ .

para adicionar o favicon ao site. basta colocar o favicon.ico como um arquivo na pasta raiz do domínio. por exemplo, em node.js na pasta pública que contém os arquivos estáticos. não precisa ser nada de especial como o código acima, apenas um arquivo simples.

Não há necessidade de middleware personalizado ?! Em expresso:

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

Em seguida, coloque seu favicon em público e adicione a seguinte linha na cabeça do seu html:

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

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

Eu estava trabalhando localmente sem o __dirname +mas não consegui fazê-lo funcionar no meu servidor implantado.

Se você estiver usando o Express> 4.0, poderá usar o serve-favicon

Se você definiu o caminho estático, use o <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">em suas visualizações. Não há necessidade de mais nada. Verifique se você tem sua pasta de imagens dentro da pasta pública.

Instale o express-faviconmiddleware:

npm install express-favicon --save

Use-o assim:

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

Você deve instalar o middleware para servir o favicon.

Eu tentei isso agora:

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

e recebi esta mensagem de erro de volta:

Erro: a maioria dos middlewares (como o favicon) não é mais fornecida com o Express e deve ser instalada separadamente. Consulte https://github.com/senchalabs/connect#middleware .

Acho que podemos considerar isso definitivo.

O código listado abaixo funciona:

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

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

Apenas atualize seu navegador ou limpe seu cache.

etapa 0: adicione o código abaixo a app.js ou index.js

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

etapa 1: faça o download do ícone aqui https://icons8.com/ ou crie sua própria
etapa 2: vá para https://www.favicongenerator.com/
etapa 3 : faça o upload do arquivo icon.png baixado> defina 16px> crie favicon> faça o download da
etapa 4: vá para a pasta de downloads, você encontrará [arquivo .ico], renomeie-o como favicon.ico
etapa 5: copie o favicon.ico no diretório público você criou a
etapa 6: adicione o código abaixo ao seu arquivo .pug na tag head, abaixo da tag title

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

etapa 7: salvar> reiniciar o servidor> fechar o navegador> reabrir o navegador> o favicon aparece

NOTA: você pode usar um nome que não seja o favicon,
            mas certifique-se de alterar o nome no código e na pasta pública.

No app.js:

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

Supondo que o ícone resida em "/public/images/favicon.ico", adicione o próximo link na cabeça do html:

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

Isso funcionou bem em um projeto gerado automaticamente com o comando:

express my-project

Se você deseja uma solução que não envolva arquivos externos e não use express.static(por exemplo, um servidor e site super leves de um arquivo), é possível usar serve-favicone codificar o favicon.icoarquivo como Base64. Como isso:

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

Substitua IMAGE_AS_BASE64_STRING_GOES_HEREpelo resultado da codificação do seu arquivo favicon como Base64. Existem muitos sites que podem fazer isso online, faça uma pesquisa.

Observe que pode ser necessário reiniciar o servidor e / ou o navegador para vê-lo funcionar localhost, e um cache de atualização / limpeza clara do navegador para vê-lo funcionando na web.