Як встановити спеціальний фавікон в Експресі?

Нещодавно я почав працювати в 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')));

(зауважте, що це рішення буде працювати і в експрес-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.

Не потрібні додаткові середні продукти. Просто використовуйте:

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 для яскравості та корекції кольорів (у меню зображення-> налаштування).

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

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

потім завантажте це зображення на один із веб-сайтів, які генерують фаворити. Є також програми для Windows для редагування подібних значків 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 файл], перейменуйте його як favicon.ico
крок 5: скопіюйте favicon.ico у загальнодоступному каталозі ви створили
крок 6: додайте нижче код у свій файл .pug під заголовком тегу, під тегом заголовка

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

крок 7: зберегти> перезапустити сервер> закрити браузер> повторно відкрити браузер> з'явиться favicon

ПРИМІТКА. Ви можете використовувати інше, ніж 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, і жорсткий оновити / очистити кеш браузера, щоб побачити його роботу в Інтернеті.