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

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

app.use(express.favicon());

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

В Экспресс 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модуль (как предложил Druska):

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

Почему favicon лучше, чем статичный

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

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

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

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

смайлик 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-> Adjustments).

для быстрой иконки перейдите по ссылке 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 в общей папке, содержащей статические файлы. это не должно быть что-то особенное, например, код выше простого файла.

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

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

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

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

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

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

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

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

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

npm install express-favicon --save

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

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

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

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

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

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

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

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

Код, указанный ниже, работает:

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

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

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

шаг 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 file], переименуйте его в favicon.ico,
шаг 5: скопируйте favicon.ico в публичный каталог Вы создали
шаг 6: добавьте приведенный ниже код в свой файл .pug под заголовком head, под заголовком title

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

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

Примечание»: вы можете использовать имя, отличное от favicon,
            но не забудьте изменить имя в коде и в общей папке.

В 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

Если вам нужно решение, которое не включает внешние файлы и не использует express.static(например, сверхлегкий веб-сервер с одним файлом и сайт), вы можете использовать serve-faviconи кодировать свой favicon.icoфайл как Base64. Как это:

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

Замените IMAGE_AS_BASE64_STRING_GOES_HEREрезультатом кодирования вашего файла favicon как Base64. Есть много сайтов, которые могут сделать это онлайн, есть поиск.

Обратите внимание, что вам может потребоваться перезапустить сервер и / или браузер, чтобы увидеть, как он работает localhost, и жестко обновить / очистить кеш браузера, чтобы он работал в Интернете.