Express'te özel favicon nasıl ayarlanır?


136

Son zamanlarda Node.js'de çalışmaya başladım ve app.js dosyasında şu satır var:

app.use(express.favicon());

Şimdi, kendi özel favicon.ico'yu nasıl ayarlarım?


3
Tarayıcının önbelleğini doğru bir şekilde temizlediğinizden emin olun, aksi halde değiştiğini göremeyebilirsiniz
vsync

app.use(express.favicon())Express 4'te kullanmak şunları sağlar: Çoğu ara katman yazılımı (favicon gibi) artık Express ile birlikte verilmez ve ayrıca yüklenmelidir. Github.com/senchalabs/connect#middleware bakınız . Alternatif olarak, hiçbir favicon sağlayamazsınız: app.get('/favicon.ico', (req, res) => res.status(200)) Express js, GET /favicon.ico'yu önler
kullanıcı

Yanıtlar:


239

Express 4'te

Favicon ara katman yazılımını yükleyin ve şunları yapın:

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

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

Veya daha iyisi, pathmodülü kullanarak :

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

(bu çözümün ekspres 3 uygulamalarda da çalışacağını unutmayın)

Express 3'te

API'ya göre, .faviconbir konum parametresini kabul eder:

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

Çoğu zaman, bunu isteyebilirsiniz (vsync'in önerdiği gibi):

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

Ya da daha iyisi, pathmodülü kullanın (Druska'nın önerdiği gibi):

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

Favicon neden statikten daha iyidir?

Göre paket açıklaması :

  1. Bu modül, disk erişimini atlayarak performansı artırmak için simgeyi bellekte önbelleğe alır.
  2. Bu modül, ETagdosya sistemi özellikleri yerine simgenin içeriğine dayalı bir temel sağlar.
  3. Bu modül en uyumlu ile çalışacaktır Content-Type.

1
Teşekkürler! Oraya bir göz atabilmek için bir sorun açmak ister misiniz ? Umarım sadece yol şeyler ve yani path.join(__dirname, "public")bir ayırıcı olmadan birleştirilmiş dizeleri sonuçlanır? Örnek ne kadar küçük olursa bunu düzeltebiliriz (bu yüzden lütfen sadece birleştirme parçasını kullanabilirsiniz).
Benjamin Gruenbaum

Eduardo tarafından açıklanan daha sempatik bir yol yerine başka bir ara katman (gelecekte gerçekten bakımını yapamayan biri tarafından korunur) kullanmanın faydası nedir ?
LucaM

3
@LucaM her şeyden önce - iyi soru! serve-favicon bizim tarafımızdan (Node.js vakfı) ve Doug (ekspresini sürdüren) tarafından korunur - yani, ekspresin kendisini yazan ve koruyan aynı kişilerdir. Benioku nedenini görebilirsiniz , ancak temel olarak: günlüğe kaydetme, önbellekleme, ETag işleme ve düzeltme Content-Type. Burada ne yaptığını görebilirsiniz . Sizce bu cevabı düzenlemenin bir değeri var mı?
Benjamin Gruenbaum

1
Benjamin, favicon'un sağladığı özellikleri temizlediğiniz için teşekkür ederiz . Kesinlikle gerekli olmasa da kabul edilen cevapta yazardım.
LucaM

36

Ek bir orta yazılım gerekmez. Sadece kullan:

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

1
Evet, bu yeterli olmalı ve doğru cevap çünkü bunun için ek bir katman aşırıya kaçma gibi geliyor.
jlstr

1
@jlstr, 20 satır kod gibi, ne tür bir overkill demek istersiniz)) Ve bir sunucu tarafı, küçük bağımlılıkların sayısı önemli değil. Ve bahsedilen ara katman sağlar : 1) bellek önbellekleme 2) uygun ETag 3 ayarlayın) uygunContent-Type
maxkoryukov

18

smiley favicon hatası önlemek için:

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

yukarıdaki koddaki simgeyi değiştirmek için

burada bir simge yapın: http://www.favicon.cc/ veya burada: http://favicon-generator.org

base64'e dönüştürün belki burada: http://base64converter.com/

ardından simge tabanı 64 değerini değiştirin

kişiselleştirilmiş fav simgesi oluşturma hakkında genel bilgi

simgeler photoshop veya inkscape kullanılarak, belki inkscape sonra canlılık ve renk düzeltmesi için photoshop kullanılarak yapılır (görüntü-> ayarlar menüsünde).

hızlı simge için http://www.clker.com/ adresine gidin ve bazı Vector Clip Arts'ları seçin ve svg olarak indirin. daha sonra onu inkscape'e getirin ( https://inkscape.org/ ) ve renkleri değiştirin veya parçaları silin, belki başka bir vektör küçük resimden bir şeyler ekleyin, ardından dışa aktarmak için parçaları seçin ve dosya> dışa aktar, 16x16 gibi boyut seçin favicon veya 32x32. daha fazla düzenleme için 128x128 veya 256x256. ico paketinin içinde birkaç simge boyutu olabilir. 16x16 piksel favicon ile birlikte web sitesi bağlantısı için yüksek kaliteli bir simge olabilir.

o zaman belki photoshop görüntü geliştirmek. canlılık, eğim efekti, yuvarlak maske, herhangi bir şey gibi.

ardından bu resmi favicons üreten web sitelerinden birine yükleyin. https://sourceforge.net/projects/variicons/ gibi simgeleri düzenlemek için pencereler için programlar da vardır .

web sitesine favicon eklemek için. favicon.ico dosyasını etki alanının kök klasörüne bir dosya olarak koymanız yeterlidir. örneğin, statik dosyaları içeren ortak klasördeki node.js dosyasında. sadece basit bir dosya üzerinde kod gibi özel bir şey olması gerekmez.


1
Bu yaklaşım gibi en iyisi. Ben sadece base64 yerine hizmet için bir dosya kullandım: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);
DaafVader

2
Neden zaten ekspres kullandığınızdan beri sadece express.favicon kullanmıyorsunuz? Statik bir klasör de kullanabiliyorsanız neden tüm rotayı oluşturmalısınız? Bunun yanı sıra, bu sihirli dize (gülen yüz) davanızı daha iyi yapmıyor.
SubliemeSiem

1
Favicon koymak için herhangi bir koda ihtiyacınız yoktur. Sadece statik dosyalar dizinine dosya olarak koyun.
Shimon Doodkin

16

Özel katman yazılımına gerek yok mu ?! Ekspres:

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

Ardından favicon'unuzu herkese açık hale getirin ve html'nizin başına aşağıdaki satırı ekleyin:

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

1
Bu DaafVader. Bu işe yaradı. Benim ayarım şuydu: app.use (express.static ('public')). Favicon'umu ortak klasör içindeki img thats klasörüne kaydettim. Baş bölümündeki html dosyamda, favicon.ico'nun favicon'umun dosya adı olduğu <link rel = "icon" href = "/ img / favicon.ico"> kullandım.
Nhon Ha

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

Yerel olarak olmadan çalıştım __dirname +ama konuşlandırılan sunucum üzerinde çalışamadı.


deneyinapp.use(express.favicon('./public/images/favicon.ico'));
Alexis Diel


4

Statik yol ayarladıysanız, <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">görünümlerinizde kullanın . Başka hiçbir şeye gerek yok. Lütfen resimler klasörünüzün ortak klasör içinde bulunduğundan emin olun.


1
Geliştirirken Google Chrome 127.0.0.1yerine kullandığınızdan emin olun localhost, bazı nedenlerden dolayı benim için düzeltti.
cprcrack

1

Ara express-faviconkatman yazılımı yükleyin :

npm install express-favicon --save

Şöyle kullanın:

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

1

Favicon'a hizmet vermek için ara katman yazılımı yüklemelisiniz.

Bunu şimdi denedim:

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

ve bu hata mesajını geri aldım:

Hata: Çoğu ara katman yazılımı (favicon gibi) artık Express ile birlikte verilmemektedir ve ayrı olarak yüklenmesi gerekir. Lütfen https://github.com/senchalabs/connect#middleware adresine bakın .

Bence bunu kesin olarak kabul edebiliriz.


0

Aşağıda listelenen kod işe yarar:

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

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

Tarayıcınızı yenilediğinizden veya önbelleğinizi temizlediğinizden emin olun.


0

adım 0: app.js veya index.js'ye aşağıdaki kodu ekleyin

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

adım 1: simgeyi buradan indirin https://icons8.com/ veya kendi
adımınızı oluşturun 2: https://www.favicongenerator.com/ adresine gidin
3 : indirilen icon.png dosyasını yükle> 16px ayarla> favicon oluştur> indirme
4. adımı: indirme klasörüne gidin, [.ico dosyası] 'nı bulacaksınız, favicon.ico olarak yeniden adlandırın
5. adım: favicon.ico dosyasını genel dizine kopyalayın
6. adımı oluşturdunuz : .pug dosyanıza başlık etiketi altında, başlık etiketinin altına aşağıdaki kodu ekleyin

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

adım 7: kaydet> sunucuyu yeniden başlat> tarayıcıyı kapat> tarayıcıyı yeniden aç> favicon belirir

NOT: favicon dışında bir ad kullanabilirsiniz,
            ancak koddaki ve ortak klasördeki adı değiştirdiğinizden emin olun.


0

App.js'de:

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

Simgenin "/public/images/favicon.ico" dizininde olduğunu varsayarsak, html'nin başına bir sonraki bağlantı ekleyin:

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

Bu, komutla otomatik olarak oluşturulan bir projede işe yaradı:

express my-project

0

Harici dosyaları içermeyen ve kullanmayan bir çözüm istiyorsanız express.static(örneğin, süper hafif bir dosya web sunucusu ve sitesi) dosyanızı Base64 olarak kullanabilir serve-faviconve kodlayabilirsiniz favicon.ico. Bunun gibi:

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_HEREFavicon dosyanızı Base64 olarak kodlamanın sonucuyla değiştirin . Bunu çevrimiçi olarak yapabilen, arama yapabilen birçok site var.

Çalıştığını görmek için sunucuyu ve / veya tarayıcıyı yeniden başlatmanız localhostve web'de çalıştığını görmek için sert bir yenileme / temizleme tarayıcı önbelleğini yeniden başlatmanız gerekebileceğini unutmayın .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.