#Иконки

Браузерное расширение требует набор иконок для панели инструментов, страницы управления расширениями и Web Store.

#Размеры иконок

Рекомендуемые размеры для Chrome расширений:

Firefox дополнительно поддерживает:

#Структура директорий

Разместите иконки в public/icons/:

#Конфигурация в Manifest

{
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    }
  }
}

#Динамическая установка иконки

В коде можно динамически изменять иконку:

// Установка иконки панели инструментов
chrome.action.setIcon({
  path: {
    16: "icons/icon-active16.png",
    32: "icons/icon-active32.png",
  },
});

// Установка заголовка
chrome.action.setTitle({ title: "Active Mode" });

// Установка бейджа
chrome.action.setBadgeText({ text: "3" });
chrome.action.setBadgeBackgroundColor({ color: "#FF0000" });

#Адаптация к тёмному режиму

Предоставление разных иконок для разных тем:

// Определение системной темы и установка соответствующей иконки
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  chrome.action.setIcon({
    path: {
      16: "icons/icon-dark16.png",
      32: "icons/icon-dark32.png",
    },
  });
}

#Рекомендации по дизайну иконок

1. Простота и четкость — различимость при малых размерах
2. Согласованность бренда — связь с функцией расширения или брендом
3. Высокий контраст — четкость на разных фонах
4. Избегайте текста — текст плохо различим при малых размерах
5. Используйте PNG — поддержка прозрачного фона

#SVG иконки

Chrome также поддерживает SVG иконки:

{
  "icons": {
    "16": "icons/icon16.svg",
    "32": "icons/icon32.svg"
  }
}

Но в некоторых сценариях (например, Web Store) по-прежнему требуется PNG, рекомендуется предоставлять оба формата.

#Инструменты для генерации иконок

• Figma — Дизайн иконок и экспорт в разные размеры
• Icon Kitchen — Онлайн генератор иконок расширений
• RealFaviconGenerator — Генератор иконок в разных размерах

#Полный пример

// addfox.config.ts
export default defineConfig({
  manifest: {
    name: "Моё расширение",
    icons: {
      16: "icons/icon16.png",
      32: "icons/icon32.png",
      48: "icons/icon48.png",
      128: "icons/icon128.png",
    },
    action: {
      default_icon: {
        16: "icons/icon16.png",
        32: "icons/icon32.png",
      },
    },
  },
});

#Связанные ссылки

• Спецификация иконок Chrome
• Требования к иконкам Chrome Web Store