Главная
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

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

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

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

Добавить комментарий для Виталий Отменить ответ

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

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

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

Это не спам *

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

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

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