Bagaimana cara mengatur favicon khusus di Express?

137

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?

javascript node.js express favicon Ilya Karnaukhov
sumber
3
Pastikan untuk membersihkan cache browser dengan benar, kalau tidak Anda mungkin tidak melihatnya berubah
vsync
Menggunakan 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
pengguna

Jawaban:

243

Di Express 4

Instal middleware favicon lalu lakukan:

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

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

Atau lebih baik, menggunakan pathmodul:

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

(perhatikan bahwa solusi ini akan berfungsi di aplikasi 3 ekspres juga)

Di Express 3

Menurut API, .faviconmenerima 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 pathmodul (seperti yang disarankan Druska):

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

Mengapa favicon lebih baik daripada statis

Menurut deskripsi paket :

  1. Modul ini menyimpan ikon di dalam memori untuk meningkatkan kinerja dengan melewatkan akses disk.
  2. Modul ini memberikan konten ETagberdasarkan konten ikon, bukan properti sistem file.
  3. Modul ini akan berfungsi dengan yang paling kompatibel Content-Type.
Benjamin Gruenbaum
sumber
1
Terima kasih! Maukah Anda membuka terbitan agar saya bisa melihatnya di sana? Mudah-mudahan hanya jalur barang dan yaitu yang path.join(__dirname, "public")menghasilkan string yang digabungkan tanpa pemisah? Semakin kecil sampelnya, semakin cepat kami dapat memperbaikinya (jadi jika Anda dapat bergabung saja).
Benjamin Gruenbaum
Apa manfaat menggunakan middleware lain (dikelola oleh seseorang yang mungkin tidak benar-benar memeliharanya di masa mendatang) daripada cara yang lebih semplicistik yang dijelaskan oleh Eduardo ?
LucaM
3
@LucaM pertama-tama - pertanyaan bagus! serve-favicon dikelola oleh kami (yayasan Node.js) dan Doug (yang mengelola express) - yaitu, oleh orang yang sama yang menulis dan memelihara ekspres itu sendiri. Anda dapat melihat readme mengapa, tetapi pada dasarnya: logging, caching, penanganan ETag dan benar Content-Type. Anda dapat melihat apa yang dilakukannya di sini . Apakah menurut Anda ada gunanya mengedit ini menjadi jawabannya?
Benjamin Gruenbaum
1
Terima kasih Benjamin karena telah menghapus fitur yang disediakan favicon . Saya akan menulis itu dalam jawaban yang diterima meskipun tidak terlalu dibutuhkan.
LucaM
42

Tidak diperlukan perantara tambahan. Gunakan saja:

app.use('/favicon.ico', express.static('images/favicon.ico'));
Eduardo
sumber
2
Ya, ini sudah cukup dan ini adalah jawaban yang benar karena middleware tambahan untuk ini terasa berlebihan.
jlstr
1
@jlstr itu seperti 20 baris kode, jenis berlebihan apa yang Anda maksud)) Dan ini adalah sisi server, jadi jumlah dependensi kecil tidak masalah. Dan middleware yang disebutkan menyediakan : 1) cache memori 2) setel ETag 3 yang tepat) setel yang tepatContent-Type
maxkoryukov
Saya sudah memiliki app.use(express.static("dist"));yang melayani semua file js, img dan css yang direferensikan seperti /img/some_image.pngatau /js/my_file.jsdari distfolder, 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.icokembali Cannot GET /favicon.ico.
pengguna1063287
Jawaban untuk pertanyaan saya komentar, ini tampaknya bekerja untuk saya: app.use('/favicon.ico', express.static('dist/img/favicon.ico'));, di atas ada saya app.use(express.static("dist"));.
pengguna1063287
18

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.

Shimon Doodkin
sumber
1
Seperti pendekatan ini yang terbaik. Saya baru saja menggunakan file untuk melayani alih-alih base64: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);
DaafVader
2
Mengapa tidak menggunakan express.favicon saja karena Anda sudah menggunakan express ?? Mengapa membuat seluruh rute jika Anda juga dapat menggunakan folder statis? Selain itu, tali ajaib itu (senyum Anda) tidak membuat kasus Anda menjadi lebih baik.
SubliemeSiem
1
Anda tidak memerlukan kode apa pun untuk meletakkan favicon. Taruh saja sebagai file di direktori file statis.
Shimon Doodkin
16

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">
DaafVader
sumber
1
Itu DaafVader. Ini berhasil. Pengaturan saya adalah: app.use (express.static ('public')). Saya menyimpan favicon saya di folder img yang ada di dalam folder publik. Di file html saya di bagian head, saya menggunakan <link rel = "icon" href = "/ img / favicon.ico"> di mana favicon.ico adalah nama file dari favicon saya.
Nhon Ha
8 
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.

ThomasReggi
sumber
cobaapp.use(express.favicon('./public/images/favicon.ico'));
Alexis Diel
5

Jika Anda menggunakan Express> 4.0, Anda dapat memilih serve-favicon

Anastasios Andronidis
sumber
9
Mengapa kita harus memilih serve-favicon?
Hitam
4

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.

Mohsin Khan
sumber
1
Pastikan Anda menggunakan 127.0.0.1alih-alih localhostdi Google Chrome saat Anda mengembangkan, untuk beberapa alasan yang memperbaikinya untuk saya.
cprcrack
1

Instal express-faviconmiddleware:

npm install express-favicon --save

Gunakan seperti ini:

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

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.

amunnelly
sumber
1

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-favicondan menyandikan favicon.icofile 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_HEREdengan 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.

jpw
sumber
0

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.

blakeface
sumber
Saya mendapatkan beberapa kesalahan yang mengatakan middleware ekspres tidak lagi disertakan
john ktejik
0

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.

Mehran Ahemad
sumber
0

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
Nikolas H.
sumber
0

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 linktag 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".

pengguna1944491
sumber