Saya baru-baru ini mulai bekerja di Node.js dan di file app.js ada baris ini:
app.use(express.favicon());
Sekarang, bagaimana cara menyiapkan favicon.ico kustom saya sendiri?
Saya baru-baru ini mulai bekerja di Node.js dan di file app.js ada baris ini:
app.use(express.favicon());
Sekarang, bagaimana cara menyiapkan favicon.ico kustom saya sendiri?
app.use(express.favicon())
di Express 4 memberikan: Kebanyakan middleware (seperti favicon) tidak lagi digabungkan dengan Express dan harus diinstal secara terpisah. Silakan lihat github.com/senchalabs/connect#middleware . Atau, Anda tidak dapat menyediakan favicon dengan: app.get('/favicon.ico', (req, res) => res.status(200))
Express js mencegah GET /favicon.ico
Jawaban:
Instal middleware favicon lalu lakukan:
var favicon = require('serve-favicon');
app.use(favicon(__dirname + '/public/images/favicon.ico'));
Atau lebih baik, menggunakan path
modul:
app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));
(perhatikan bahwa solusi ini akan berfungsi di aplikasi 3 ekspres juga)
Menurut API, .favicon
menerima parameter lokasi:
app.use(express.favicon("public/images/favicon.ico"));
Seringkali, Anda mungkin menginginkan ini (seperti yang disarankan vsync):
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));
Atau lebih baik lagi, gunakan path
modul (seperti yang disarankan Druska):
app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico')));
Menurut deskripsi paket :
ETag
berdasarkan konten ikon, bukan properti sistem file.Content-Type
.path.join(__dirname, "public")
menghasilkan string yang digabungkan tanpa pemisah? Semakin kecil sampelnya, semakin cepat kami dapat memperbaikinya (jadi jika Anda dapat bergabung saja).
Content-Type
. Anda dapat melihat apa yang dilakukannya di sini . Apakah menurut Anda ada gunanya mengedit ini menjadi jawabannya?
Tidak diperlukan perantara tambahan. Gunakan saja:
app.use('/favicon.ico', express.static('images/favicon.ico'));
Content-Type
app.use(express.static("dist"));
yang melayani semua file js, img dan css yang direferensikan seperti /img/some_image.png
atau /js/my_file.js
dari dist
folder, dan <link rel="shortcut icon" href="https://stackoverflow.com/img/favicon.ico">
dalam <head>
404 tetapi masih mendapatkan kegagalan dalam aplikasi Node / MongoDB di Azure, permintaan yang gagal adalah GET /favicon.ico
. Apakah ini solusinya: app.use(express.static("dist"));
diikuti oleh app.use('/favicon.ico', express.static('/img/favicon.ico'));
? Sunting: Saya mencoba ini di lingkungan lokal, dan http://localhost:3000/favicon.ico
kembali Cannot GET /favicon.ico
.
app.use('/favicon.ico', express.static('dist/img/favicon.ico'));
, di atas ada saya app.use(express.static("dist"));
.
smiley favicon untuk mencegah kesalahan:
//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);
});
untuk mengubah ikon dalam kode di atas
buat ikon mungkin di sini: http://www.favicon.cc/ atau di sini: http://favicon-generator.org
konversikan ke base64 mungkin di sini: http://base64converter.com/
kemudian ganti nilai icon base 64
informasi umum cara membuat ikon favorit pribadi
Ikon dibuat menggunakan photoshop atau inkscape, mungkin inkscape kemudian photoshop untuk koreksi vibrance dan warna (pada menu image-> Adjustments).
untuk ikon cepat buka http://www.clker.com/ dan pilih beberapa Seni Klip Vektor, dan unduh sebagai svg. kemudian bawa ke inkscape ( https://inkscape.org/ ) dan ubah warna atau hapus bagian, mungkin tambahkan sesuatu dari gambar clipart vektor lain, lalu untuk mengekspor pilih bagian yang akan diekspor dan klik file> ekspor, pilih ukuran seperti 16x16 untuk favicon atau 32x32. untuk pengeditan lebih lanjut 128x128 atau 256x256. Paket ico dapat memiliki beberapa ukuran ikon di dalamnya. itu dapat memiliki favicon 16x16 piksel ikon berkualitas tinggi untuk tautan untuk situs web.
kemudian mungkin meningkatkan gambar di photoshop. seperti getaran, efek kemiringan, topeng bulat, apa saja.
kemudian unggah gambar ini ke salah satu situs web yang menghasilkan favicon. ada juga program untuk windows untuk mengedit ikon seperti https://sourceforge.net/projects/variicons/ .
untuk menambahkan favicon ke situs web. cukup letakkan favicon.ico sebagai file di folder root domain. misalnya di node.js di folder publik yang berisi file statis. tidak harus sesuatu yang istimewa seperti kode di atas, cukup file sederhana.
Tidak perlu middleware khusus ?! Secara ekspres:
//you probably have something like this already
app.use("/public", express.static('public'));
Kemudian letakkan favicon Anda di depan umum dan tambahkan baris berikut di kepala html Anda:
<link rel="icon" href="/public/favicon.ico">
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));
Saya telah membuatnya bekerja secara lokal tanpa itu __dirname +
tetapi tidak bisa membuatnya bekerja di server saya yang diterapkan.
app.use(express.favicon('./public/images/favicon.ico'));
Jika Anda menggunakan Express> 4.0, Anda dapat memilih serve-favicon
Jika Anda telah menyetel jalur statis, gunakan saja <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">
dalam tampilan Anda. Tidak perlu yang lainnya. Harap pastikan bahwa Anda memiliki folder gambar di dalam folder publik.
127.0.0.1
alih-alih localhost
di Google Chrome saat Anda mengembangkan, untuk beberapa alasan yang memperbaikinya untuk saya.
Anda harus menginstal middleware untuk menyajikan favicon.
Saya mencoba ini sekarang:
app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico')));
dan mendapatkan pesan kesalahan ini kembali:
Kesalahan: Kebanyakan middleware (seperti favicon) tidak lagi disertakan dengan Express dan harus diinstal secara terpisah. Silakan lihat https://github.com/senchalabs/connect#middleware .
Saya pikir kita bisa menganggapnya pasti.
Jika Anda menginginkan solusi yang tidak melibatkan file eksternal, dan tidak menggunakan express.static
(misalnya, server web dan situs file super-ringan) Anda dapat menggunakan serve-favicon
dan menyandikan favicon.ico
file Anda sebagai Base64. Seperti ini:
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));
Ganti IMAGE_AS_BASE64_STRING_GOES_HERE
dengan hasil encoding file favicon Anda sebagai Base64. Ada banyak situs yang dapat melakukan itu secara online, lakukan pencarian.
Perhatikan bahwa Anda mungkin perlu memulai ulang server dan / atau browser untuk melihatnya berfungsi localhost
, dan menyegarkan / menghapus cache browser untuk melihatnya berfungsi di web.
Kode yang tercantum di bawah berfungsi:
var favicon = require('serve-favicon');
app.use(favicon(__dirname + '/public/images/favicon.ico'));
Pastikan untuk menyegarkan browser Anda atau menghapus cache Anda.
langkah 0: tambahkan kode di bawah ini ke app.js atau index.js
app.use("/favicon.ico", express.static('public/favicon.ico'));
langkah 1: unduh ikon dari sini https://icons8.com/ atau buat
langkah Anda sendiri 2: buka https://www.favicongenerator.com/
langkah 3 : unggah file icon.png yang diunduh> setel 16px> buat favicon> unduh
langkah 4: buka folder unduhan, Anda akan menemukan [file .ico], ubah namanya menjadi favicon.ico
langkah 5: salin favicon.ico di direktori publik Anda membuat
langkah 6: tambahkan kode di bawah ini ke file .pug Anda di bawah tag head, di bawah tag judul
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
langkah 7: simpan> restart server> tutup browser> buka kembali browser> muncul favicon
CATATAN: Anda dapat menggunakan nama selain favicon,
tetapi pastikan Anda mengubah nama di kode dan di folder publik.
Di app.js:
app.use(express.static(path.join(__dirname, 'public')));
Dengan asumsi ikon berada di "/public/images/favicon.ico" tambahkan tautan berikutnya di kepala html:
<link rel='icon' href='/images/favicon.ico' class='js-favicon'>
Ini berfungsi dengan baik dalam proyek yang dibuat secara otomatis dengan perintah:
express my-project
Jika Anda menggunakan Express.static untuk melayani sebuah folder, cukup letakkan file favicon.ico di root folder itu dan itu akan disajikan ketika browser memintanya. Tidak perlu menambahkan link
tag ke html Anda atau rute middleware khusus dalam kode aplikasi.
Jika Anda berada di belakang reverse proxy, Anda mungkin perlu menentukan jenis media / mime untuk file tersebut ( begini caranya di IIS ) tetapi jika Anda menavigasi langsung ke aplikasi Anda, itu "berfungsi".