Jak ustawić niestandardową ikonę ulubionych w Expressie?


136

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?


3
Upewnij się, że poprawnie wyczyściłeś pamięć podręczną przeglądarki, w przeciwnym razie możesz nie zauważyć, że się zmienia
vsync

Korzystanie app.use(express.favicon())z Express 4 daje: Większość oprogramowania pośredniego (np. Favicon) nie jest już dołączana do Express i musi być zainstalowana oddzielnie. Odwiedź stronę github.com/senchalabs/connect#middleware . Alternatywnie, nie możesz podać favicon za pomocą: app.get('/favicon.ico', (req, res) => res.status(200)) Express js disable GET /favicon.ico
użytkownik

Odpowiedzi:


239

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.

1
Dzięki! Czy mógłbyś otworzyć numer , abym mógł tam zajrzeć? Miejmy nadzieję, że to tylko ścieżka, a mianowicie to, path.join(__dirname, "public")że łańcuchy są łączone bez separatora? Im mniejsza próbka, tym szybciej możemy to naprawić (więc jeśli możesz tylko połączyć część).
Benjamin Gruenbaum

Jaka jest korzyść z używania kolejnego oprogramowania pośredniego (utrzymywanego przez kogoś, kto może go nie obsługiwać w przyszłości) zamiast bardziej semplikistycznego sposobu wyjaśnionego przez Eduardo ?
LucaM

3
@LucaM przede wszystkim - dobre pytanie! serv-favicon jest utrzymywany przez nas (fundacja Node.js) i Douga (który utrzymuje express) - to znaczy, że są to te same osoby, które piszą i utrzymują, że wyrażają siebie. Możesz zobaczyć plik readme, aby dowiedzieć się, dlaczego, ale zasadniczo: rejestrowanie, buforowanie, obsługa ETag i poprawianie Content-Type. Możesz zobaczyć, co robi tutaj . Czy uważasz, że zmiana tego w odpowiedzi ma sens?
Benjamin Gruenbaum

1
Dziękuję Benjamin za wyczyszczenie funkcji, które zapewnia favicon . Napisałbym to w przyjętej odpowiedzi, chociaż nie jest to ściśle potrzebne.
LucaM

36

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

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

1
Tak, to powinno wystarczyć i jest to prawidłowa odpowiedź, ponieważ dodatkowe oprogramowanie pośredniczące do tego wydaje się przesadą.
jlstr

1
@jlstr to jak 20 linii kodu, jaki rodzaj przesady masz na myśli)) I to jest strona serwera, więc liczba małych zależności nie ma znaczenia. A wspomniane oprogramowanie pośredniczące zapewnia : 1) buforowanie pamięci 2) ustawienie właściwego ETag 3) prawidłowe ustawienieContent-Type
maxkoryukov

18

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.


1
Podoba mi się to podejście najlepiej. Po prostu użyłem pliku do wyświetlenia zamiast base64: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);
DaafVader

2
Dlaczego nie po prostu użyć express.favicon, skoro już używasz express? Po co tworzyć całą trasę, jeśli możesz równie dobrze użyć folderu statycznego? Poza tym ten magiczny sznurek (twoja buźka) nie polepszy twojej sprawy.
SubliemeSiem

1
Nie potrzebujesz żadnego kodu, aby umieścić favicon. Po prostu umieść go jako plik w katalogu plików statycznych.
Shimon Doodkin

16

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

1
To jest DaafVader. To zadziałało. Moje ustawienie to: app.use (express.static („public”)). Zapisałem moją ulubioną ikonę w folderze img, który znajduje się w folderze publicznym. W moim pliku html w sekcji head użyłem <link rel = "icon" href = "/ img / favicon.ico">, gdzie favicon.ico to nazwa mojego pliku favicon.
Nhon Ha

8
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.


spróbujapp.use(express.favicon('./public/images/favicon.ico'));
Alexis Diel


4

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.


1
Po prostu upewnij się, że używasz 127.0.0.1zamiast localhostGoogle Chrome podczas programowania, z jakiegoś powodu to naprawiło to dla mnie.
cprcrack

1

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

1

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.


0

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ą.


0

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.


0

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

0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.