Как установить custom favicon в Express?
недавно я начал работать в Node.JS и в приложении.JS файл есть такая строка:
app.use(express.favicon());
теперь, как мне настроить свой собственный favicon.ico?
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)
В Express 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')));
без дополнительной middlewares требуется. Просто используйте:
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).
для быстрого значка goto http://www.clker.com/ и выберите некоторые векторные клипарты и загрузите как svg. затем принесите его в inkscape (https://inkscape.org/) и изменить цвета или удалить детали, возможно, добавить что-то из другого векторного изображения клипарта, а затем экспортировать выберите детали для экспорта и нажмите Файл>Экспорт, выберите размер, как 16x16 для favicon или 32x32. для дальнейшего редактирования 128х128 или разрешением 256x256. пакет ico может иметь несколько размеров значков внутри. он может иметь вместе с 16x16 pixel favicon высококачественные значки для ссылки на веб-сайт.
затем, возможно, улучшить изображение в photoshop. как вибрация, эффект скоса, круглая Маска, что угодно.
затем загрузите это изображение на один из веб-сайтов, которые генерируют фавиконы. есть также программы для windows Для редактирования значков, таких как https://sourceforge.net/projects/variicons/ .
чтобы добавить favicon на сайт. просто поставь фавикон.ico как файл в корневой папке домена. например в узел.js в общей папке, содержащей статические файлы. это не должно быть что-то особенное, как код выше простого файла.
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));
у меня он работал локально без __dirname +
но не смог заставить его работать на моем развернутом сервере.
нет необходимости в пользовательском промежуточном по?! В express:
//you probably have something like this already
app.use("/public", express.static('public'));
затем поместите свой favicon публично и добавьте следующую строку в голову вашего html:
<link rel="icon" href="/public/favicon.ico">
Если вы используете Express > 4.0, вы можете пойти на служить-favicon
Если у вас установлен статический путь, просто используйте <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 или индекс.jsapp.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, ниже тега заголовка
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Шаг 7: сохранить > перезапустить сервер > закрыть браузер > открыть браузер > появится favicon
Примечание: Вы можете использовать имя, отличное от favicon,
но убедитесь, что вы изменили имя в коде и
в общей папке.