Vue.js वेबपैक प्रोजेक्ट पर ठीक से favicon.ico कैसे सेट करें?

Question 1

मैंने एक vue webpackप्रोजेक्ट बनाया है vue-cli।

vue init webpack myproject

और फिर devमोड के तहत प्रोजेक्ट चलाया :

npm run dev

मुझे यह त्रुटि मिली:

संसाधन लोड करने में विफल: सर्वर ने 404 की स्थिति के साथ उत्तर दिया (नहीं मिला) http: // localhost: 8080 / ficonicon.ico

तो वेबपैक के अंदर, favicon.icoसही तरीके से आयात कैसे करें ?

Question 2

वेबपैक टेम्पलेट की परियोजना संरचना की जाँच करें: https://vuejs-templates.github.io/webpack/structure.html

ध्यान दें कि एक स्थिर फ़ोल्डर है, साथ node_modulesमें src, आदि।

यदि आप staticफ़ोल्डर में कुछ छवि रखते हैं , जैसे favicon.png, इसे http: // localhost: 8080 / static / favicon.png पर उपलब्ध कराया जाएगा।

यहाँ स्थैतिक संपत्ति के लिए प्रलेखन है: https://vuejs-templates.github.io/webpack/static.html

आपके फ़ेविकॉन इश्यू के लिए, आप फ़ोल्डर में favicon.icoया अपने इंडेक्स.इन का संदर्भ इस प्रकार दे सकते हैं:favicon.pngstatic<head>

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

यदि आप favicon.icoअपने में परिभाषित नहीं करते हैं index.html, तो ब्राउज़र वेबसाइट रूट (डिफ़ॉल्ट व्यवहार) से फ़ेविकॉन के लिए अनुरोध करेगा। यदि आप उपरोक्त के रूप में एक फ़ेविकॉन निर्दिष्ट करते हैं, तो आप अब 404 नहीं देखेंगे। फ़ेविकॉन आपके ब्राउज़र टैब में भी दिखाई देने लगेगा।

एक साइड नोट के रूप में, यहाँ यही कारण है कि मैं ICO फाइल के बजाय PNG पसंद करता हूँ:

favicon.png बनाम favicon.ico - मुझे ICO के बजाय PNG का उपयोग क्यों करना चाहिए?

Question 3

Laravel 5.x के लिए थोड़ा अद्यतन, अपने favicon.icoया फ़ोल्डर favicon.pngमें /publicरखें और इसे index.htmlइस तरह से देखें :

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

आशा करता हूँ की ये काम करेगा !

Question 4

किसी कारण के लिए, उपरोक्त समाधान डिफ़ॉल्ट favicon.icoफ़ाइल को परिवर्तित करने favicon.pngऔर favicon-xyz.pngउदाहरण के लिए इसका नाम बदलने से पहले मेरे लिए काम नहीं किया (मैंने इस फ़ाइल को /publicफ़ोल्डर में रखा है ) और index.htmlफ़ाइल को निम्नानुसार संपादित किया है:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

किसी के लिए उपयोगी हो सकता है।