Как настроить пользовательский значок в Express?

Недавно я начал работать в Node.js, а в файле app.js есть эта строка:

app.use(express.favicon());

Теперь, как мне настроить свой собственный favicon.ico?

ОТВЕТЫ

Ответ 1

В Экспресс 4

Установите промежуточное ПО favicon, а затем выполните:

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

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

Или лучше, используя модуль path:

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

(обратите внимание, что это решение будет работать и в приложениях Express 3)

В экспрессе 3

Согласно API, .favicon принимает параметр местоположения:

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

В большинстве случаев вы можете захотеть это (как предложил vsync):

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

Или еще лучше, используйте модуль path (как предложил Друска):

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

Почему значок лучше, чем статический

Согласно описанию пакета:

  1. Этот модуль кэширует значок в памяти для повышения производительности, пропуская доступ к диску.
  2. Этот модуль предоставляет ETag на основе содержимого значка, а не свойств файловой системы.
  3. Этот модуль будет работать с наиболее совместимым Content-Type.

Ответ 2

Никаких дополнительных посредников не требуется. Просто используйте:

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

Ответ 3

смайлик favicon для предотвращения ошибки:

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

изменить значок в коде выше

сделать иконку можно здесь: http://www.favicon.cc/ или здесь: http://favicon-generator.org

преобразовать его в base64 может быть здесь: http://base64converter.com/

затем замените значение значка базы 64

общая информация о том, как создать персонализированный значок избранного

иконки создаются с использованием photoshop или inkscape, возможно, inkscape, а затем photoshop для вибрации и цветовой коррекции (в image-> меню настроек).

для быстрой иконки перейдите по ссылке http://www.clker.com/ и выберите несколько графических изображений, и загрузите как svg. затем перенесите его в inkscape (https://inkscape.org/) и измените цвета или удалите детали, возможно, добавьте что-нибудь из другого векторного изображения, затем для экспорта выберите детали для экспорта и нажмите "Файл"> "Экспорт", выберите размер, например, 16x16 для favicon или 32x32. для дальнейшего редактирования 128x128 или 256x256. Пакет ico может иметь несколько размеров иконок внутри. он может иметь наряду с 16x16 пикселем favicon высококачественные иконки для ссылки на сайт.

тогда возможно улучшить изображение в фотошопе. как вибрация, эффект скоса, круглая маска, что угодно.

затем загрузите это изображение на один из сайтов, которые генерируют иконки. Существуют также программы для окон для редактирования иконок, такие как https://sourceforge.net/projects/variicons/.

добавить значок сайта. просто поместите favicon.ico как файл в корневую папку домена. например, в файле node.js в общей папке, содержащей статические файлы. это не должно быть что-то особенное, например, код выше простого файла.

Ответ 4

Не нужно ли настраивать промежуточное программное обеспечение?! В экспресс:

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

Затем разместите свой значок публично и добавьте следующую строку в свой html-заголовок:

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

Ответ 5

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

Я работал локально без __dirname +, но не мог заставить его работать на моем развернутом сервере.

Ответ 6

Если вы используете Express > 4.0, вы можете пойти serve-favicon

Ответ 7

Если у вас установлен статический путь, просто используйте <link rel="icon" href="/images/favicon.ico" type="image/x-icon"> в своих представлениях. Больше ничего не нужно. Пожалуйста, убедитесь, что у вас есть папка с изображениями в общей папке.

Ответ 8

Ниже приведен код, указанный ниже:

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

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

Просто убедитесь, что обновили браузер или очистили кеш.

Ответ 9

В app.js:

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

Предполагая, что значок находится в "/public/images/favicon.ico", добавьте следующую ссылку в заголовок HTML:

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

Это хорошо работало в проекте, автоматически сгенерированном с помощью команды:

express my-project

Ответ 10

Установите промежуточное программное обеспечение express-favicon:

npm install express-favicon --save

Используйте это так:

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

Ответ 11

Вы должны установить промежуточное программное обеспечение для обслуживания значка.

Я попробовал это только сейчас:

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

и получил это сообщение об ошибке обратно:

Ошибка: большинство промежуточного программного обеспечения (например, favicon) больше не связано с Express и должно быть установлено отдельно. Пожалуйста, смотрите https://github.com/senchalabs/connect#middleware.

Я думаю, что мы можем принять это как окончательное.

Ответ 12

Установите модули serve-favicon и path из npm, соответственно обновите index.js.

//import packages
var favicon = require('serve-favicon'), path = require("path");
//use favicon icon path to access in application.
app.use(favicon(path.join(__dirname+'/favicon.ico')));

Ответ 13

шаг 0: добавьте приведенный ниже код в app.js или index.js

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

Шаг 1: загрузите значок отсюда https://icons8.com/ или создайте свой собственный
Шаг 2: перейдите на https://www.favicongenerator.com/
Шаг 3: загрузить загруженный файл icon.png> установить 16px> создать favicon> скачать
Шаг 4: перейдите в папку загрузок, вы найдете [.ico файл], переименуйте его в favicon.ico
Шаг 5: скопируйте favicon.ico в публичный каталог, который вы создали
Шаг 6: добавьте приведенный ниже код в ваш файл .pug под заголовком заголовка, под заголовком заголовка 

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

шаг 7: сохранить> перезагрузить сервер> закрыть браузер> снова открыть браузер> появится значок

ПРИМЕЧАНИЕ: вы можете использовать имя, отличное от favicon,
но убедитесь, что вы изменили имя в коде и в общей папке.