При работе над приложением, часто в браузере открыты сразу несколько вкладок с вашим сервисом: в одной локальный билд, в другой – production версия, в третьей – тестовый деплой. Еще бывает на одной вкладке авторизовался на тестовом аккаунте, на другой зашел что-то посмотреть под клиентом. В дополнении к этому может быть открыто еще с десяток каких-то других вкладок и все они перемешиваются, и начинаешь путаться.

Чтобы больше не тратить время на поиск нужной вкладки и не совершать ошибок, мы взяли иконку нашего сервиса (favicon) и сделали несколько ее копий в разных цветах. Каждый цвет под отдельный кейс. Затем написали простую функцию смены иконки и завернули это в React хук, который определяет в каком окружении сейчас находится приложение и при необходимости меняет иконку.

Получилось простое и быстрое решение, которое делает разработку более удобной. На клиентах это никак не отразилось, т.к. они всегда видят оригинальный favicon.

Еще больше постов – https://t.me/nikolaevfrontend