एक्सप्रेस में कस्टम फ़ेविकॉन कैसे सेट करें?

Question

मैंने हाल ही में Node.js और app.js फ़ाइल में काम करना शुरू किया है। यह पंक्ति है:

app.use(express.favicon());

अब, मैं अपना स्वयं का कस्टम favicon.ico कैसे स्थापित करूं?

Comments

ब्राउज़र के कैश को ठीक से साफ करना सुनिश्चित करें, अन्यथा आप इसे बदलते नहीं देख सकते हैं

— vsync

app.use(express.favicon())एक्सप्रेस 4 पर उपयोग करने से यह पता चलता है: अधिकांश मिडलवेयर (जैसे फेविकॉन) अब एक्सप्रेस के साथ बंडल नहीं किया जाता है और इसे अलग से स्थापित किया जाना चाहिए। कृपया github.com/senchalabs/connect#middleware देखें । वैकल्पिक रूप से, आप इसके साथ कोई फ़ेविकॉन नहीं दे सकते हैं: app.get('/favicon.ico', (req, res) => res.status(200)) एक्सप्रेस जीएसटी को रोकें /favicon.ico

— उपयोगकर्ता

Answer 1

एक्सप्रेस 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')));

(ध्यान दें कि यह समाधान एक्सप्रेस 3 ऐप्स में भी काम करेगा)

एक्सप्रेस 3 में

एपीआई के अनुसार, .faviconएक स्थान पैरामीटर स्वीकार करता है:

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

अधिकांश समय, आप यह चाहते हो सकते हैं (जैसा कि vsync सुझाव दिया गया है):

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

या बेहतर अभी तक, pathमॉड्यूल का उपयोग करें (जैसा कि Druska ने सुझाव दिया है):

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

फ़ेविकॉन स्थिर से बेहतर क्यों है

पैकेज विवरण के अनुसार :

1. यह मॉड्यूल डिस्क एक्सेस को स्किप करके प्रदर्शन को बेहतर बनाने के लिए आइकन को कैश करता है।
2. यह मॉड्यूल ETagफ़ाइल सिस्टम गुणों के बजाय आइकन की सामग्री के आधार पर प्रदान करता है ।
3. यह मॉड्यूल सबसे अधिक संगत के साथ काम करेगा Content-Type।

Comments

धन्यवाद! क्या आप किसी मुद्दे को खोलने का मन बना सकते हैं ताकि मैं वहाँ एक नज़र रख सकूँ? उम्मीद है कि सिर्फ पथ सामान और अर्थात् जिसके path.join(__dirname, "public")परिणामस्वरूप स्ट्रिंग्स एक विभाजक के बिना समतल हो जाते हैं? जितना छोटा नमूना हम उतने जल्दी ठीक कर सकते हैं (इसलिए यदि आप कृपया इसमें शामिल होने वाले भाग को खुश कर सकते हैं)।

— बेंजामिन ग्रुएनबाम

एडुआर्डो द्वारा समझाए गए अधिक अर्धचालक तरीके के बजाय अभी तक एक अन्य मिडलवेयर (किसी व्यक्ति द्वारा बनाए रखा गया है जो वास्तव में इसे भविष्य में बनाए नहीं रख सकता है) का उपयोग करने के लिए क्या लाभ है ?

— लुकास

@Luca सबसे पहले - अच्छा सवाल! सेवा-फ़ेविकॉन हमारे द्वारा बनाए रखा जाता है (Node.js नींव) और डौग (जो एक्सप्रेस को बनाए रखता है) - अर्थात, यह वही लोग हैं जो एक्सप्रेस को लिखते और बनाए रखते हैं। आप क्यों, लेकिन मूल रूप से: लॉगिंग, कैशिंग, ETag हैंडलिंग और सही के लिए रीडमी देख सकते हैं Content-Type। आप देख सकते हैं कि यह यहाँ क्या करता है । क्या आपको लगता है कि उत्तर में इसे संपादित करने में योग्यता है?

— बेंजामिन Gruenbaum

फ़ेविकॉन प्रदान करने वाली सुविधाओं को साफ़ करने के लिए बेंजामिन का धन्यवाद । मैं लिखूंगा कि स्वीकृत जवाब में हालांकि इसकी सख्त जरूरत नहीं है।

— लुकाएम

Answer 2

कोई अतिरिक्त बिचौलियों की आवश्यकता नहीं है। महज प्रयोग करें:

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

Comments

हां, यह पर्याप्त होना चाहिए और यह सही उत्तर है क्योंकि इसके लिए एक अतिरिक्त मिडिलवेयर ओवरकिल की तरह लगता है।

— 2

@jlstr यह कोड की 20 लाइनों की तरह है, आप किस तरह के ओवरकिल का मतलब रखते हैं)) और यह एक सर्वर साइड है, छोटी निर्भरता की संख्या के साथ कोई फर्क नहीं पड़ता। और उल्लेख मिडिलवेयर प्रदान करता है : 1) मेमोरी कैशिंग 2) समुचित ETag 3) समुचित सेट करेंContent-Type

— अधिकतम

Answer 3

त्रुटि को रोकने के लिए स्माइली फ़ेविकॉन:

 //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

इसे यहाँ बेस 64 में बदलें: http://base64converter.com/

फिर आइकन बेस 64 मान बदलें

सामान्य जानकारी कैसे एक व्यक्तिगत fav आइकन बनाने के लिए

आइकन फ़ोटोशॉप या इंकस्केप का उपयोग करके बनाए जाते हैं, हो सकता है कि फिर इंकबैप कंपन और रंग सुधार (छवि में-> समायोजन मेनू) के लिए फ़ोटोशॉप।

त्वरित आइकन गोटो http://www.clker.com/ के लिए और कुछ वेक्टर क्लिप आर्ट्स चुनें, और svg के रूप में डाउनलोड करें। फिर इसे इंकस्केप ( https://inkscape.org/ ) में लाएं और रंग बदलें या भागों को हटाएं, हो सकता है कि एक और वेक्टर क्लिपआर्ट छवि से कुछ जोड़ें, फिर निर्यात करने के लिए भागों का चयन करें और फ़ाइल> निर्यात पर क्लिक करें, 16x16 जैसे आकार चुनें फ़ेविकॉन या 32x32। आगे के लिए 128x128 या 256x256 संपादित करें। ico पैकेज में कई आइकन आकार हो सकते हैं। यह वेबसाइट के लिए लिंक के लिए 16x16 पिक्सेल फ़ेविकॉन के साथ एक उच्च गुणवत्ता वाला आइकन हो सकता है।

तब शायद फ़ोटोशॉप में छवि को बढ़ाएं। वाइब्रेंस, बेवल इफेक्ट, राउंड मास्क, कुछ भी।

फिर इस छवि को उन वेबसाइटों में से एक पर अपलोड करें जो फ़ेविकॉन उत्पन्न करते हैं। https://sourceforge.net/projects/variicons/ जैसे आइकन के संपादन के लिए खिड़कियों के लिए भी कार्यक्रम हैं ।

वेबसाइट पर फ़ेविकॉन जोड़ने के लिए। बस डोमेन के रूट फ़ोल्डर में एक फ़ाइल के रूप में favicon.ico डाल दिया। उदाहरण के लिए node.js में सार्वजनिक फ़ोल्डर जिसमें स्थिर फाइलें हैं। यह सिर्फ एक साधारण फ़ाइल के ऊपर कोड की तरह कुछ खास होने की जरूरत नहीं है।

Comments

जैसे यह दृष्टिकोण सबसे अच्छा है। मैंने बस base64 के बजाय सेवा करने के लिए एक फ़ाइल का उपयोग किया: fs.createReadStream ("./ public / favicon.ico")। पाइप (रेस);

— डेफवेडर

सिर्फ पहले से ही एक्सप्रेस का उपयोग करने के बाद से एक्सप्रेस का उपयोग क्यों नहीं करें ?? यदि आप बस एक स्थिर फ़ोल्डर का उपयोग कर सकते हैं तो एक संपूर्ण मार्ग क्यों बनाएं? इसके अलावा, वह जादुई स्ट्रिंग (आपकी स्माइली) आपके मामले को बेहतर नहीं बना रही है।

— सुबलीमेसीमे सेप

फ़ेविकॉन डालने के लिए आपको किसी कोड की आवश्यकता नहीं है। बस इसे स्टैटिक फाइल डायरेक्टरी में फाइल के रूप में रखें।

— शिमोन डूडकिन

Answer 4

कस्टम मिडलवेयर की कोई आवश्यकता नहीं है ?! एक्सप्रेस में:

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

फिर अपने फ़ेविकॉन को सार्वजनिक रूप से रखें और अपने HTML के शीर्षक में निम्न पंक्ति जोड़ें:

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

Comments

वह डाफवाडर है। यह काम किया। मेरी सेटिंग थी: app.use (express.static ('public'))। मैंने सार्वजनिक फ़ोल्डर के अंदर फ़ोल्डर img thats में अपने favicon को बचाया। हेड सेक्शन में मेरी html फ़ाइल में, मैंने <link rel = "icon" href = "/ img / favicon.ico"> का उपयोग किया, जहाँ favicon.ico मेरे फेविकॉन का फ़ाइल नाम था।

— Nhon Ha

Answer 5

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

मैं इसे स्थानीय रूप से काम कर रहा था, __dirname +लेकिन इसे अपने तैनात सर्वर पर काम नहीं कर सका।

Comments

कोशिशapp.use(express.favicon('./public/images/favicon.ico'));

— एलेक्सिस डेल

Answer 6

यदि आप Express> 4.0 का उपयोग कर रहे हैं, तो आप सर्व-फेविकॉन के लिए जा सकते हैं

Comments

हमें सेवा-सत्कार के लिए क्यों जाना चाहिए?

— ब्लैक

Answer 7

यदि आपके पास स्थैतिक पथ सेट है, तो बस <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">अपने विचारों का उपयोग करें । किसी और चीज की जरूरत नहीं। कृपया सुनिश्चित करें कि आपके पास सार्वजनिक फ़ोल्डर के अंदर आपके चित्र फ़ोल्डर हैं।

Comments

बस यह सुनिश्चित करें कि आप विकसित होने के दौरान Google Chrome के 127.0.0.1बजाय उपयोग कर रहे हैं localhost, किसी कारण से जिसने इसे मेरे लिए निर्धारित किया है।

— cccrack

Answer 8

express-faviconमिडलवेयर स्थापित करें :

npm install express-favicon --save

इसे इस तरह उपयोग करें:

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

Answer 9

फ़ेविकॉन की सेवा के लिए आपको मिडलवेयर स्थापित करना होगा।

मैंने अभी यह कोशिश की:

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

और यह त्रुटि संदेश वापस मिल गया:

त्रुटि: अधिकांश मिडलवेयर (जैसे फ़ेविकॉन) अब एक्सप्रेस के साथ बंडल नहीं है और इसे अलग से स्थापित किया जाना चाहिए। कृपया https://github.com/senchalabs/connect#middleware देखें ।

मुझे लगता है कि हम इसे निश्चित रूप से ले सकते हैं।

Answer 10

नीचे सूचीबद्ध कोड काम करता है:

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

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

बस अपने ब्राउज़र को ताज़ा करना या अपना कैश साफ़ करना सुनिश्चित करें।

Answer 11

चरण 0: नीचे दिए गए कोड को 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> सेट फ़ेविकॉन> डाउनलोड
चरण 4: डाउनलोड फ़ोल्डर पर जाएं, आपको [.ico फ़ाइल] मिल जाएगी, इसे नाम बदलकर favicon.ico
चरण 5: सार्वजनिक निर्देशिका में favicon.ico कॉपी करें। आपने
चरण 6 बनाया : शीर्षक टैग के नीचे अपनी .pug फ़ाइल के नीचे कोड जोड़ें, शीर्षक टैग के नीचे

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

चरण 7: सेव> रीस्टार्ट सर्वर> क्लोज ब्राउजर> ब्राउजर ब्राउजर> फेविकॉन दिखाई देता है

नोट: आप फेविकॉन के अलावा किसी अन्य नाम का उपयोग कर सकते हैं,
            लेकिन यह सुनिश्चित करें कि आप कोड और सार्वजनिक फ़ोल्डर में नाम बदल दें।

Answer 12

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

Answer 13

यदि आप ऐसा समाधान चाहते हैं जिसमें बाहरी फ़ाइलें शामिल न हों, और आप उपयोग न करें 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_HEREBase64 के रूप में अपनी फ़ेविकॉन फ़ाइल को एन्कोडिंग के परिणाम के साथ बदलें । बहुत सारी साइटें हैं जो ऑनलाइन कर सकती हैं, एक खोज है।

ध्यान दें कि आपको इसे काम करने के लिए सर्वर और / या ब्राउज़र को पुनरारंभ करने की आवश्यकता हो सकती है localhost, और इसे वेब पर काम करने के लिए एक हार्ड रिफ्रेश / क्लियर ब्राउज़र कैश देख सकते हैं।