Как установить пользовательские иконки в экспресс?



Я недавно начал работать в узел.JS и в приложении.js файл есть такая строка:



app.use(express.favicon());


теперь, как я могу настроить свой собственный фавикон.ico?

797   9  

9 ответов:

В Express 4

установить favicon middleware а потом делать:

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

В Экспресс-3

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

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

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

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('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/

затем замените значок base 64 value

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

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

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

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

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

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

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

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

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

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

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

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

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

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

приведенный ниже код работает:

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

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

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

Шаг 0: добавьте ниже код в приложение.js или индекс.js

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

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

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

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

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

Comments

    Ничего не найдено.