web-gelistirme-sc.com

Express.js ile Favicon değiştirilemiyor

Bu gerçekten temel bir sorudur, ancak node.js/Express uygulamamın favicon'unu değiştirmeye çalışıyorum

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

ve hala varsayılan favicon alıyorum. Bu benim app.configure işlevimde ve evet, doğruladım: favicon.ico 'de olduğunu a /public/images/favicon.ico olduğunu doğruladım. Konsolda bir favicon.ico hakkında hiçbir şey yok, bu da bu kod satırına inanmamı sağlıyor. göz ardı ediliyor. İşlevdeki diğer her şey (bağlantı noktası ayarlama, görünüm dizini ayarlama, şablon motoru ayarlama vb.) İyi çalışıyor gibi görünüyor, öyleyse neden bu kod satırı yürütülmüyor?

Ne denedim

  • Tarayıcı önbelleğini boşaltma
  • Terminali yeniden başlatmak ve tekrar node app.js çalıştırmak
  • here açıklandığı şekilde { maxAge: 2592000000 } ekleme

Şimdiden teşekkürler.

Güncelle: Çalışmasını sağladım. Daha fazla bilgi için aşağıdaki cevaba bakınız.

49
gtmtg

Siteyi ilk kez Safari’de ziyaret etmeyi denedim (normalde Chrome kullanıyorum) ve doğru favicon'u gösterdiğini fark ettim. Önbelleğimi Chrome'da tekrar temizlemeye çalıştım (iki kez) boşuna, ancak daha fazla arama yaptıktan sonra, görünüşte favicons'un önbellekte saklanmadığını öğrendim . here 'da açıklanan yöntemi kullanarak "favicon'umu yeniledim" ve işe yaradı!

Bağlantının kesilmesi durumunda (yukarıdaki bağlantıdan değiştirilmiş) yöntemi burada:

  1. Chrome'u/sorunlu tarayıcıyı açın
  2. Doğrudan favicon.ico dosyasına gidin, örn. http: // localhost: 3000/favicon.ico
  3. F5'e veya uygun tarayıcıya Yenile (Yeniden Yükle) düğmesine basarak favicon.ico URL'sini yenileyin
  4. Tarayıcıyı kapatın ve web sitenizi açın - işte, favicon'unuz güncellendi!
70
gtmtg

Sonunda benim için ne çalıştı:

Şuna bak. 

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

, uygulama yapılandırma işlevinin başındadır. Sonunda daha önce yaptım. Express doktorunun dediği gibi: 'Middleware'in app.use() kullanarak "tanımlandığı" sırası çok önemlidir, sırayla çağrılırlar, dolayısıyla middleware önceliğini tanımlar.

Herhangi bir maksimum ayarlamaya ihtiyacım yoktu.

Test etmek için:

  • Sunucuyu node app.js ile yeniden başlatın
  • Tarayıcı önbelleğini temizle
  • "Localhost: 3000/your_path_to_the favicon/favicon.ico" dosyasını kullanarak yeniden erişerek ve yeniden yükleyerek Favicon'u yenileyin 
34
user976647

Yukarıdaki cevap artık geçerli değil

Eğer kullanırsan

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

Bu hatayı alırsınız:

Error: Most middleware (like favicon) is no longer bundled with Express and must be installed separately

Yapmanız gereken şey: serve-favicon .

koşmak

npm install serve-favicon --save

sonra bunu uygulamanıza ekleyin

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

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

Benim için çalıştı ne izler. Örneğin, statik kaynaklarınızı her zamanki gibi sunacak şekilde ifade et

app.use(express.static('public'));

Favicon'u genel klasörünüze yerleştirin; Ardından, size simge URL'sine bir sorgu dizesi ekleyin, örneğin

<link rel="icon" type="image/x-icon" href="favicon.ico?v="+ Math.trunc(Math.random()*999)>

Bu durumda, Chrome, yaramazlık yapan Tarayıcıdır; IE. Firefox. Safari (tümü Windows'ta), yukarıdaki numara olmadan, iyi çalıştı.

2
joedotnot

hatayı önlemek için gülen favicon:

 var favicon = new Buffer('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

belki burada bir simge yapmak: http://www.favicon.cc/ veya burada: http://favicon-generator.org

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

daha sonra ikon tabanı 64 değerini değiştirin

genel bilgi kişisel bir fav ikonu nasıl oluşturulur

simgeler photoshop veya inkscape, belki inkscape ardından vibrasyon ve renk düzeltmesi için photoshop kullanılarak yapılır (resim-> ayarlar menüsünde).

hızlı icon goto için http://www.clker.com/ ve bazı Vector Clip Arts'ları seçin ve svg ..__ olarak indirin, sonra bunları inkscape'e getirin ve renkleri değiştirin veya parçaları silin, belki başka bir şey ekleyin vector clipart image, sonra dışa aktarmak için dışa aktarılacak parçaları seçin ve dosya> dışa aktar, favicon için 16x16 veya 32x32 gibi bir boyut seçin, 128x128 veya 256x256 daha fazla düzenleme için seçin. ico paketi içinde birçok ikon boyutuna sahip olabilir. 16x16 piksel fav simgesi ile birlikte web sitesi için bağlantı için yüksek kaliteli simgeler olabilir.

daha sonra belki photoshoptaki görüntüyü geliştirin. titreşim bivel yuvarlak maskesi gibi, herhangi bir şey.

daha sonra bu resmi favicons üreten web sitelerinden birine yükleyin Simgeleri düzenlemek için pencereler için programlar da vardır ("windows icon editor opensource" gibi arama yapın, tek bir simgenin içinde farklı boyutlarda iki resim nasıl oluşturulduğumuza karar verin) .

favicon'u web sitesine eklemek için. favicon.ico dosyasını kök etki alanı dosyaları klasörünüze koymanız yeterlidir. örneğin, statik dosyalarda bulunan ortak klasördeki düğümlerde. sadece basit bir dosya üzerinde kod gibi özel bir şey olması gerekmez.

1
Shimon Doodkin

Buraya kadar bulabildiğim en basit yöntem (tabii ki sadece yerel dev için geçerlidir)

PORT=3001 npm run start

1
Bhavin

Tarayıcınızın önbelleğini temizlemeyi denediniz mi? Belki eski favicon hala önbellektedir.

0
zemirco

Ekspres olmadan bu nasıl yapılır:

if (req.method == "GET") {
     if (/favicon\.ico/.test(req.url)) {
        fs.readFile("home/usr/path/favicon.ico", function(err, data) {
            if (err) {
                console.log(err);
            } else {
                res.setHeader("Content-Type","image/x-icon");
                res.end(data);
            }
     });
}
0
med116