На панели закладок я создал папку Сбербанк и туда поместил закладки на страницы Сбербанк-онлайн и закладки на страницы с описанием партнёров по программе «Спасибо от Сбербанка». При этом значок общей папки был дефолтовым, т.е. не информативным:

Можно для таких папок задать свои значки/иконки):
1. В папке chrome профиля Firefox создаём папку icons:
C:\Users\<USER>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\icons
2. Копируем туда файл со значком (иконкой) сайта.

3. Поскольку у всех сайтов название этого файла одно и то же, то нужно файл переименовать (если таких папок будет несколько):
favicon.ico -> sb-favicon.ico
4. В файл userChrome.css добавляем такой код:

/* Bookmark folder icon replacement */
.bookmark-item[label="Сбербанк"] {
  list-style-image: url("./icons/sb-favicon.ico") !important;
}

5. Перезапускаем Firefox
6. Теперь у папки свой значок:

Чтобы визуально отличать папку от значка сайта, можно название взять в квадратные скобки, например так:
[ Сбербанк ]
Тогда код будет таким:

/* Bookmark folder icon replacement */
.bookmark-item[label="[ Сбербанк ]"] {
  background-image: url("./icons/sb-favicon.ico") !important;
}

Для папки Сбера я создал свой значок (изображение формата PNG):

Лучше конечно значок в формате SVG, но я не умею работать с редактором векторной графики.

Если лень скачивать значки, а потом указывать для них путь, можно задавать URL напрямую (правда в случае отсутствия инета, значок не будет отображаться, если его не окажется в кэше). Здесь я приведу пример для группы сайтов Google:

.bookmark-item[label="[ G ]"] {
  background-image: url("https://www.google.com/favicon.ico") !important;
}

• Об авторе
• Недавние публикации

DenTNT

Задать вопрос в Telegram:
@dentnt.trmw.ru
Помочь проекту: Яндекс.Деньги

DenTNT недавно публиковал (посмотреть все)

• C#: Отобразить Unicode символ - 25.04.2024
• UWP: Visual Studio requires a newer version of Windows to display this content - 10.04.2024
• Воспроизводить треки подряд из всех папок в HiBy Music - 10.04.2024