Главная
Web-дизайн
Меняем цвет вкладки для сайта в браузере

Меняем цвет вкладки для сайта в браузере

Меняем цвет вкладки для сайта в браузере

Доброго времени суток. 🙂

В этой короткой статье хочу рассказать как сменить цвет вкладки, статус бара в браузере для сайта. Скажу сразу, что пока это работает не везде. В основном на мобильных устройствах. Данная штуковина не несет особой полезной функциональности, но как говорится - "Понты дороже денег" 🙂 Конечно же, это шутка но доля правды в ней есть.

Благодаря такому внедрению, вкладка с вашим сайтом будет всегда выделятся. Человек просматривающий страницы в своем мобильном браузере, с легкостью найдет ваш сайт среди прочих открытых. Ну и как ни как, вы придаете сайту определенный стиль, который выдерживается даже в таких мелочах. Время от времени я добавляю такие мелочи на сайты заказчиков. если они пожелают. Чтобы показать вам разницу я сделал это и со своим сайтом. Если обычно, открытая страница на телефоне имеет такой вид:

Обычный статус бар

То с добавлением цвета, статус бар, верхняя часть с адресом и элементами браузера становится таким как вы захотите. В моем случаи зеленым:

Цветной статус бар

Делается все это очень просто. Вам всего лишь нужно добавить пару строк в шапку вашего сайта, а точнее туда где у вас задаются META - теги. Это между тегами <head></head>. Добавляете вот такие мета теги:

<meta name="msapplication-TileColor" content="#6AB12F">
<meta name="theme-color" content="#6AB12F">

Естественно задаете свой цвет, меняя #6AB12F на код своего, нужного цвета. Если вы еще не совсем знаете про HEX цвета и где их брать, можете найти нужный в статье - Таблица безопасных цветов.

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

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 8, в среднем: 5 из 5

Опубликовано 4 комментария

  • Назарий
    Комментариев: 1

    А что мне делать, если у меня на сайте есть функция изменения цветовой палитры сайта?

  • Alex
    Комментариев: 1

    Он влияет на изменение цвета вкладки, но крайне нестабильно. После очистки кэша и перезагрузки страницы вкладка становится нужного цвета, но при открытии новых, ранее не открытых страниц в браузере заголовок по-прежнему формируется по иконке.

    • Виталий
      Комментариев: 459

      Вы сами ответили на свой вопрос - КЭШ. Если страница читается впервые и она не кэшированная то браузер мобильного устройства подчинится мета тегу и отобразит ее в цвете. Если же страница в кэше браузера, или даже кэшируется на стороне сайта, то естественно она отобразится по старому, потому как она кэшировалась, когда тега еще не было.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко