এক্সপ্রেসে কীভাবে কাস্টম ফেভিকন সেট করবেন?


136

আমি সম্প্রতি নোড.জেজে এবং অ্যাপ.জেএস ফাইলে কাজ করতে শুরু করেছি এই লাইনটি:

app.use(express.favicon());

এখন, আমি কীভাবে আমার নিজস্ব কাস্টম ফেভিকন.ইকো সেট আপ করব?


3
ব্রাউজারের ক্যাশে সঠিকভাবে সাফ করার জন্য নিশ্চিত করুন, অন্যথায় আপনি এটি পরিবর্তন করতে নাও পারেন
vsync

app.use(express.favicon())এক্সপ্রেস 4 এ ব্যবহার করে: বেশিরভাগ মিডলওয়্যার (ফ্যাভিকনের মতো) আর এক্সপ্রেসের সাথে বান্ডিল হয় না এবং পৃথকভাবে ইনস্টল করা আবশ্যক। দয়া করে github.com/senchalabs/ সংযুক্ত করুন # মিতলওয়্যারটি দেখুন । বিকল্পভাবে, আপনি এখানে কোনও ফেভিকন সরবরাহ করতে পারবেন না: app.get('/favicon.ico', (req, res) => res.status(200)) এক্সপ্রেস জেএসটি জিইটি / ফ্যাভিকন.ইকো প্রতিরোধ করে
ব্যবহারকারী 21

উত্তর:


239

এক্সপ্রেসে 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")); 

বেশিরভাগ সময়, আপনি এটি চাইতে পারেন (যেমন ভিআইএনসিএন প্রস্তাবিত):

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

বা আরও ভাল, pathমডিউলটি ব্যবহার করুন (ড্রুস্কার পরামর্শ অনুসারে):

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

ফেভিকন কেন স্থির চেয়ে ভাল

প্যাকেজের বিবরণ অনুসারে :

  1. এই মডিউলটি ডিস্ক অ্যাক্সেস বাদ দিয়ে কর্মক্ষমতা উন্নত করতে স্মৃতিতে আইকনটিকে ক্যাশে করে।
  2. এই মডিউলটি ETagফাইল সিস্টেমের বৈশিষ্ট্যগুলির চেয়ে আইকনের সামগ্রীর উপর ভিত্তি করে সরবরাহ করে।
  3. এই মডিউল সবচেয়ে সামঞ্জস্যপূর্ণ সঙ্গে পরিবেশন করা হবে Content-Type

1
ধন্যবাদ! আপনি কি কোনও সমস্যা খোলার আপত্তি করবেন যাতে আমি সেখানে একবার নজর দিতে পারি? আশা করি কেবল পথের স্টাফ এবং অর্থাত্ পৃথক path.join(__dirname, "public")ছাড়াই স্ট্রিংগুলিতে ফলাফল? যত দ্রুত নমুনা তত দ্রুত আমরা এটি ঠিক করতে পারি (তাই আপনি যদি দয়া করে কেবল যোগদানের অংশটি দয়া করে পারেন)।
বেনজামিন গ্রুইনবাউম

এডুয়ার্ডো দ্বারা বর্ণিত আরও বিবিধ উপায়ের পরিবর্তে আরেকটি মিডলওয়্যার (ভবিষ্যতে এটি বজায় রাখতে পারে এমন কেউ দ্বারা রক্ষণাবেক্ষণ করা) ব্যবহার করার কী সুবিধা ?
লুকাম

3
@ লুকাম সবার আগে - ভাল প্রশ্ন! পরিবেশন-ফেভিকনটি আমাদের দ্বারা পরিচালিত হয় (নোড.জেএস ফাউন্ডেশন) এবং ডগ (যিনি এক্সপ্রেস বজায় রাখেন) - অর্থাৎ এটি একই ব্যক্তিরা লিখেছেন এবং নিজেরাই প্রকাশ করে থাকেন। আপনি কেন রিডমি দেখতে পারেন তবে মূলত: লগিং, ক্যাশিং, ইটাগ হ্যান্ডলিং এবং সঠিক Content-Type। আপনি এটি দেখতে পারেন এখানে । আপনার কি মনে হয় উত্তরে এডিট করার যোগ্যতা আছে?
বেনিয়ামিন গ্রুইনবাউম

1
ফ্যাভিকন সরবরাহ করে এমন বৈশিষ্ট্যগুলি সাফ করার জন্য বেনজামিনকে ধন্যবাদ জানাই । কঠোরভাবে প্রয়োজন না হলেও আমি এটি গ্রহণযোগ্য উত্তরে লিখব।
লুকাম

36

কোনও অতিরিক্ত মিডলওয়্যারের প্রয়োজন নেই। শুধু ব্যবহার করুন:

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

1
হ্যাঁ, এটি পর্যাপ্ত হওয়া উচিত এবং এটি সঠিক উত্তর কারণ এটির জন্য একটি অতিরিক্ত মিডলওয়্যার ওভারকিলের মতো অনুভূত হয়।
jlstr

1
@jlstr এটি কোডের 20 লাইনের মতো, কী ধরণের ওভারকিল বলতে বোঝায়)) এবং এটি একটি সার্ভার সাইড, ছোট ছোট নির্ভরতার সংখ্যায় কিছু যায় আসে না। এবং উল্লিখিত মিডলওয়্যারগুলি সরবরাহ করে : 1) মেমরি ক্যাচিং 2) সেট করুন যথাযথ ইটাগ 3) যথাযথ সেট করুনContent-Type
ম্যাক্সকুরিউকভ

18

স্মাইলি ফেভিকন ত্রুটি রোধ করতে:

 //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 মানটি প্রতিস্থাপন করুন

সাধারণ তথ্য কীভাবে ব্যক্তিগতকৃত ফ্যাভ আইকন তৈরি করবেন

আইকনগুলি ফটোশপ বা ইনস্কেপ ব্যবহার করে তৈরি করা যেতে পারে, সম্ভবত কম্পন এবং রঙ সংশোধনের জন্য ফটোশপ (চিত্র-> সমন্বয় মেনুতে)।

দ্রুত আইকনটির জন্য http://www.clker.com/ এবং কিছু ভেক্টর ক্লিপ আর্টস চয়ন করুন এবং এসভিজি হিসাবে ডাউনলোড করুন। তারপরে এটিকে ইনস্কেপে আনুন ( https://inkscape.org/ ) এবং রঙ পরিবর্তন করুন বা অংশগুলি মুছুন, অন্য কোনও ভেক্টর ক্লিপপার্ট চিত্র থেকে কিছু যুক্ত করুন, রফতানির জন্য অংশগুলি নির্বাচন করুন এবং ফাইল> রফতানি ক্লিক করুন, এর জন্য 16x16 এর মতো আকার বেছে নিন ফেভিকন বা 32x32। আরও 128x128 বা 256x256 সম্পাদনার জন্য। আইকো প্যাকেজটির ভিতরে বেশ কয়েকটি আইকন আকার থাকতে পারে। এতে ওয়েবসাইটের লিঙ্কের জন্য 16x16 পিক্সেল ফ্যাভিকন সহ একটি উচ্চ মানের আইকন থাকতে পারে।

তাহলে হয়ত ফটোশপে ছবিটি বাড়িয়ে তুলুন। যেমন কম্পন, বেভেল এফেক্ট, রাউন্ড মাস্ক, যেকোন কিছু।

তারপরে এই চিত্রটি ফেভিকন উত্পন্ন ওয়েবসাইটগুলির মধ্যে একটিতে আপলোড করুন। https://sourceforge.net/projects/variicons/ এর মতো আইকনগুলি সম্পাদনা করার জন্য উইন্ডোজের জন্যও প্রোগ্রাম রয়েছে ।

ওয়েবসাইটে ফেভিকন যুক্ত করতে। কেবলমাত্র ডোমেনের রুট ফোল্ডারে একটি ফাইল হিসাবে ফেভিকন.ইকো রাখুন। উদাহরণস্বরূপ, সর্বজনীন ফোল্ডারে নোড.জেজে স্ট্যাটিক ফাইল রয়েছে। এটি কোনও সাধারণ ফাইলের উপরে কোডের মতো বিশেষ কিছু হতে হবে না।


1
এই পদ্ধতির সেরা পছন্দ করুন। আমি কেবল বেস 64 এর পরিবর্তে পরিবেশন করতে একটি ফাইল ব্যবহার করেছি: fs.createReadStream ("./ જાહેર / ফেভিকন.ইকো")। পাইপ (পুনরায়);
দাফভেদার

2
আপনি ইতিমধ্যে এক্সপ্রেস.ফ্যাভিকন ব্যবহার করছেন না কেন আপনি ইতিমধ্যে এক্সপ্রেস ব্যবহার করছেন ?? আপনি যদি স্ট্যাটিক ফোল্ডারটি ব্যবহার করতে পারেন তবে কেন পুরো রুট তৈরি করবেন? তা ছাড়া, সেই যাদু স্ট্রিং (আপনার স্মাইলি) আপনার কেসটিকে আরও ভাল করে তুলছে না।
SubliemeSiem

1
ফেভিকন লাগাতে আপনার কোনও কোডের দরকার নেই। স্ট্যাটিক ফাইল ডিরেক্টরিতে এটি কেবল ফাইল হিসাবে রেখে দিন।
শিমন ডুডকিন

16

কাস্টম মিডলওয়্যারের দরকার নেই ?! প্রকাশে:

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

তারপরে আপনার ফেভিকনটিকে সর্বজনীনভাবে রাখুন এবং আপনার এইচটিএমএলের মাথায় নিম্নলিখিত লাইনটি যুক্ত করুন:

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

1
এটাই দাফভেদার। এটি কাজ করে। আমার সেটিংটি ছিল: অ্যাপ.ইউজ (এক্সপ্রেস.স্ট্যাটিক ('পাবলিক'))। আমি আমার ফ্যাভিকনটিকে সর্বজনীন ফোল্ডারের ভিতরে img thats ফোল্ডারে সংরক্ষণ করেছি। প্রধান বিভাগে আমার এইচটিএমএল ফাইলটিতে, আমি <লিঙ্ক rel = "আইকন" href = "/ img / favicon.ico"> ব্যবহার করেছি যেখানে ফেভিকন.ইকো আমার ফ্যাভিকনের ফাইল নাম ছিল।
Nhon হা

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

আমি এটি স্থানীয়ভাবে কাজ করেছিলাম __dirname +তবে এটি আমার মোতায়েন করা সার্ভারে কাজ করতে পারিনি।


চেষ্টা করুনapp.use(express.favicon('./public/images/favicon.ico'));
অ্যালেক্সিস ডিল


4

আপনার যদি স্থির পাথ সেট থাকে তবে কেবলমাত্র <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">নিজের দর্শনগুলিতে এটি ব্যবহার করুন । আর কিছুর দরকার নেই। দয়া করে নিশ্চিত হন যে আপনার সর্বজনীন ফোল্ডারের ভিতরে আপনার চিত্রগুলির ফোল্ডার রয়েছে।


1
আপনার বিকাশের সময় আপনি গুগল ক্রোমের 127.0.0.1পরিবর্তে ব্যবহার করছেন তা নিশ্চিত করুন localhost, এমন কোনও কারণে যা এটি আমার জন্য স্থির করেছে।
cprcrack

1

express-faviconমিডলওয়্যার ইনস্টল করুন :

npm install express-favicon --save

এটি এর মতো ব্যবহার করুন:

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

1

ফেভিকন পরিবেশন করতে আপনাকে অবশ্যই মিডলওয়্যার ইনস্টল করতে হবে।

আমি এখনই এটি চেষ্টা করেছি:

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

এবং এই ত্রুটি বার্তাটি ফিরে পেয়েছে:

ত্রুটি: বেশিরভাগ মিডলওয়্যার (ফ্যাভিকনের মতো) আর এক্সপ্রেসের সাথে বান্ডিল হয় না এবং পৃথকভাবে ইনস্টল করা উচিত। দয়া করে https://github.com/senchalabs/ সংযোগ করুন # মিতলওয়্যারটি দেখুন

আমি মনে করি আমরা এটিকে চূড়ান্ত হিসাবে গ্রহণ করতে পারি।


0

নীচে তালিকাভুক্ত কোডটি কাজ করে:

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

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

আপনার ব্রাউজারটি রিফ্রেশ করার বিষয়টি নিশ্চিত করুন বা আপনার ক্যাশে সাফ করুন।


0

পদক্ষেপ 0: app.js বা index.js এর নীচে কোড যুক্ত করুন

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

পদক্ষেপ 1: এখান থেকে আইকনটি https://icons8.com/ ডাউনলোড করুন বা নিজের
পদক্ষেপ 2 তৈরি করুন : https://www.favicongenerator.com/
পদক্ষেপ 3 এ যান : ডাউনলোড করা আইকন.পিএনজি ফাইল আপলোড করুন> সেট 16px> ফ্যাভিকন তৈরি করুন> ডাউনলোড
পদক্ষেপ 4: ডাউনলোড ফোল্ডারে যান, আপনি [.ico ফাইল] খুঁজে পাবেন, নামটি ফেভিকন.ইকো হিসাবে নামকরণ করুন
পদক্ষেপ 5: পাবলিক ডিরেক্টরিতে ফেভিকন.ইকো অনুলিপি করুন আপনি
পদক্ষেপ 6 তৈরি করেছেন : শিরোনাম ট্যাগের নীচে, হেড ট্যাগের আওতায় আপনার .pug ফাইলটিতে কোড নীচে যুক্ত করুন

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

পদক্ষেপ 7: সংরক্ষণ করুন> সার্ভার পুনরায় চালু করুন> বন্ধ ব্রাউজার> ব্রাউজার পুনরায় খুলুন> ফ্যাভিকন উপস্থিত রয়েছে

দ্রষ্টব্য: আপনি ফেভিকন ব্যতীত অন্য নামটি ব্যবহার করতে পারেন
            তবে নিশ্চিত করুন যে আপনি কোডে এবং সর্বজনীন ফোল্ডারে নাম পরিবর্তন করেছেন।


0

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

0

আপনি যদি এমন কোনও সমাধান চান যা বাহ্যিক ফাইলগুলিকে অন্তর্ভুক্ত না করে এবং ব্যবহার না করে express.static(উদাহরণস্বরূপ, একটি সুপার-লাইট ওয়ান ফাইল ওয়েবসার্ভার এবং সাইট) আপনি বেস 64 হিসাবে serve-faviconআপনার favicon.icoফাইলটি এনকোড করতে পারেন । এটার মত:

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_HEREআপনার ফেভিকন ফাইলকে বেস 64 হিসাবে এনকোড করার ফলাফলের সাথে প্রতিস্থাপন করুন । অনলাইনে এমন অনেকগুলি সাইট রয়েছে যা অনুসন্ধান করতে পারে।

নোট করুন সার্ভার এবং / অথবা ব্রাউজারটি এটি চালু রয়েছে তা দেখতে পুনরায় আরম্ভ করার প্রয়োজন হতে পারে localhostএবং ওয়েবে এটি কাজ করার জন্য একটি হার্ড রিফ্রেশ / সাফ ব্রাউজার ক্যাশে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.