Como definir o favicon personalizado no Express?

136

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?

Ilya Karnaukhov
fonte
3
Certifique-se de limpar corretamente o cache do navegador, então você pode não vê-lo mudando
vsync
O uso app.use(express.favicon())do Express 4 fornece: A maioria dos middlewares (como o favicon) não é mais fornecida com o Express e deve ser instalada separadamente. Por favor, consulte github.com/senchalabs/connect#middleware . Como alternativa, você não pode fornecer nenhum favicon com: app.get('/favicon.ico', (req, res) => res.status(200)) Express js impedir GET /favicon.ico
user

Respostas:

239

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.
Benjamin Gruenbaum
fonte
1
Obrigado! Importa-se de abrir um problema para que eu possa dar uma olhada lá? Esperemos que apenas o material do caminho e que path.join(__dirname, "public")resulta nas seqüências concatenadas sem um separador? Quanto menor a amostra, mais rapidamente podemos corrigir isso (por isso, se você puder agradar apenas a parte de junção).
Benjamin Gruenbaum
Qual é o benefício de usar outro middleware (mantido por alguém que pode não o manter no futuro) em vez da maneira mais semplicista explicada por Eduardo ?
LucaM 28/09
3
@LucaM em primeiro lugar - boa pergunta! O serve-favicon é mantido por nós (a fundação Node.js.) e por Doug (que mantém express) - ou seja, são pelas mesmas pessoas que escrevem e mantêm se expressam. Você pode ver o leia - me o motivo, mas basicamente: log, cache, manipulação de ETag e correção Content-Type. Você pode ver o que faz aqui . Você acha que há mérito em editar isso na resposta?
Benjamin Gruenbaum 28/09
1
Obrigado Benjamin por limpar os recursos que o favicon fornece. Eu escreveria isso na resposta aceita, embora não seja estritamente necessário.
Lucam
36

Nenhum middleware extra é necessário. Apenas use:

app.use('/favicon.ico', express.static('images/favicon.ico'));
Eduardo
fonte
1
Sim, isso deve ser suficiente e é a resposta correta, porque um middleware adicional para isso parece exagero.
Jlstr 27/01/19
1
@ jlstr são 20 linhas de código, que tipo de exagero você quer dizer)) E é do lado do servidor, por isso o número de pequenas dependências não importa. E o mencionado middleware fornece : 1) de memória cache 2) definir ETag adequada 3) definir adequadaContent-Type
maxkoryukov
18

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.

Shimon Doodkin
fonte
1
Como esta abordagem, a melhor. Acabei de usar um arquivo para servir, em vez de base64: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);
DaafVader 15/03
2
Por que não usar express.favicon, já que você já está usando express ?? Por que criar uma rota inteira se você também pode usar uma pasta estática? Além disso, essa sequência mágica (seu smiley) não está melhorando o seu caso.
precisa saber é o seguinte
1
Você não precisa de nenhum código para colocar favicon. Basta colocá-lo como arquivo no diretório de arquivos estáticos.
Shimon Doodkin
16

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">
DaafVader
fonte
1
Isso é DaafVader. Isso funcionou. Minha configuração foi: app.use (express.static ('public')). Salvei meu favicon na pasta img thats dentro da pasta pública. No meu arquivo html na seção head, usei <link rel = "icon" href = "/ img / favicon.ico"> onde favicon.ico era meu nome de arquivo do meu favicon.
Nhon Ha
8
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.

ThomasReggi
fonte
tenteapp.use(express.favicon('./public/images/favicon.ico'));
Alexis Diel
5

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

Anastasios Andronidis
fonte
8
Por que devemos procurar o serve-favicon?
preto
4

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.

Mohsin Khan
fonte
1
Apenas verifique se você está usando o Google Chrome em 127.0.0.1vez de localhosto desenvolver durante o desenvolvimento, por algum motivo que o corrigiu para mim.
cprcrack
1

Instale o express-faviconmiddleware:

npm install express-favicon --save

Use-o assim:

const favicon = require('express-favicon');
app.use(favicon(__dirname + 'favicon.ico'));
elegível
fonte
1

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.

amunnelly
fonte
0

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.

blakeface
fonte
0

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.

Mehran Ahemad
fonte
0

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
Nikolas H
fonte
0

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.

jpw
fonte