Jak ustawić niestandardową ikonę ulubionych w Expressie?

Niedawno zacząłem pracować w Node.js iw pliku app.js jest taka linia:

app.use(express.favicon());

Jak teraz mogę skonfigurować własny, niestandardowy plik favicon.ico?

W Express 4

Zainstaluj oprogramowanie pośredniczące favicon, a następnie wykonaj:

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

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

Lub lepiej, korzystając z pathmodułu:

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

(pamiętaj, że to rozwiązanie będzie działać również w aplikacjach Express 3)

W Express 3

Zgodnie z API .faviconakceptuje parametr lokalizacji:

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

W większości przypadków możesz chcieć tego (zgodnie z sugestią vsync):

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

Albo jeszcze lepiej, skorzystaj z pathmodułu (jak zasugerował Druska):

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

Dlaczego favicon jest lepszy niż statyczny

Zgodnie z opisem pakietu :

1. Ten moduł buforuje ikonę w pamięci, aby poprawić wydajność, pomijając dostęp do dysku.
2. Ten moduł zapewnia ETagoparte na zawartości ikony, a nie właściwości systemu plików.
3. Ten moduł będzie służył najbardziej kompatybilnym Content-Type.

Nie są wymagane żadne dodatkowe oprogramowanie pośredniczące. Po prostu użyj:

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

smiley favicon, aby zapobiec błędom:

 //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);
 });

zmienić ikonę w powyższym kodzie

zrób ikonę, może tutaj: http://www.favicon.cc/ lub tutaj: http://favicon-generator.org

przekonwertuj go na base64, może tutaj: http://base64converter.com/

następnie zamień podstawową wartość ikony 64

ogólne informacje o tworzeniu spersonalizowanej ikony ulubionych

ikony są tworzone za pomocą Photoshopa lub Inkscape, może Inkscape, a następnie Photoshopa w celu korekcji jaskrawości i kolorów (w menu obraz-> dopasowania).

aby uzyskać szybką ikonę przejdź do http://www.clker.com/ i wybierz kilka Vector Clip Arts i pobierz jako svg. następnie przenieś go do inkscape ( https://inkscape.org/ ) i zmień kolory lub usuń części, może dodaj coś z innego wektorowego obrazu clipart, a następnie, aby wyeksportować, wybierz części do wyeksportowania i kliknij plik> eksportuj, wybierz rozmiar jak 16x16 dla favicon lub 32x32. do dalszej edycji 128x128 lub 256x256. Pakiet ico może mieć kilka rozmiarów ikon w środku. może mieć wraz z ulubioną ikoną 16x16 pikseli wysokiej jakości ikony linku do strony internetowej.

następnie może poprawić obraz w Photoshopie. jak jaskrawość, efekt skosu, okrągła maska, cokolwiek.

następnie prześlij ten obraz do jednej z witryn generujących favicony. istnieją również programy dla okien do edycji ikon, takie jak https://sourceforge.net/projects/variicons/ .

aby dodać favicon do strony internetowej. po prostu umieść favicon.ico jako plik w folderze głównym domeny. na przykład w node.js w folderze publicznym, który zawiera pliki statyczne. nie musi to być nic specjalnego, jak powyższy kod, tylko prosty plik.

Nie potrzebujesz niestandardowego oprogramowania pośredniego ?! W ekspresowym:

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

Następnie umieść swoją ulubioną ikonę publicznie i dodaj następujący wiersz w głowie html:

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

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

Miałem to działać lokalnie bez tego, __dirname +ale nie mogłem go uruchomić na moim wdrożonym serwerze.

Jeśli używasz Express> 4.0, możesz skorzystać z favicon serwisu

Jeśli masz ustawioną ścieżkę statyczną, po prostu użyj <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">w swoich widokach. Nie potrzeba nic więcej. Upewnij się, że masz folder ze zdjęciami w folderze publicznym.

Zainstaluj express-faviconoprogramowanie pośredniczące:

npm install express-favicon --save

Użyj tego w ten sposób:

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

Aby udostępniać ikonę ulubionych, musisz zainstalować oprogramowanie pośredniczące.

Próbowałem tego właśnie teraz:

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

i otrzymałem z powrotem ten komunikat o błędzie:

Błąd: większość oprogramowania pośredniego (np. Favicon) nie jest już dołączana do Express i musi zostać zainstalowana osobno. Zobacz https://github.com/senchalabs/connect#middleware .

Myślę, że możemy to uznać za ostateczne.

Poniższy kod działa:

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

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

Po prostu pamiętaj, aby odświeżyć przeglądarkę lub wyczyścić pamięć podręczną.

Krok 0: dodaj poniższy kod do app.js lub index.js

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

Krok 1: ikona pobierania stąd https://icons8.com/ lub utwórz własny
krok 2: przejdź do https://www.favicongenerator.com/
krok 3 : prześlij pobrany plik icon.png> ustaw 16px> utwórz favicon> pobierz
krok 4: przejdź do folderu pobierania, znajdziesz [plik .ico], zmień jego nazwę na favicon.ico
krok 5: skopiuj favicon.ico do katalogu publicznego utworzyłeś
krok 6: dodaj poniższy kod do pliku .pug pod tagiem head, poniżej tagu tytułu

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

krok 7: zapisz> zrestartuj serwer> zamknij przeglądarkę> ponownie otwórz przeglądarkę> pojawia się ikona favicon

UWAGA: możesz użyć nazwy innej niż favicon,
            ale pamiętaj, aby zmienić nazwę w kodzie i folderze publicznym.

W app.js:

app.use(express.static(path.join(__dirname, 'public')));

Zakładając, że ikona znajduje się w „/public/images/favicon.ico” dodaj następny link w nagłówku HTML:

<link rel='icon' href='/images/favicon.ico' class='js-favicon'>

To działało dobrze w projekcie wygenerowanym automatycznie za pomocą polecenia:

express my-project

Jeśli potrzebujesz rozwiązania, które nie obejmuje plików zewnętrznych i nie używa express.static(na przykład superlekkiego serwera internetowego i witryny z jednym plikiem), możesz użyć serve-faviconi zakodować swój favicon.icoplik jako Base64. Lubię to:

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));

Zastąp IMAGE_AS_BASE64_STRING_GOES_HEREwynikiem kodowania pliku favicon jako Base64. Istnieje wiele witryn, które mogą to zrobić w Internecie, muszą przeprowadzić wyszukiwanie.

Pamiętaj, że może być konieczne ponowne uruchomienie serwera i / lub przeglądarki, aby zobaczyć, jak działa localhost, oraz twarde odświeżenie / wyczyszczenie pamięci podręcznej przeglądarki, aby zobaczyć, jak działa w Internecie.