Как покрасить вкладку Chrome

  • Tutorial
image

Если вы заходили с мобильного хрома в фейсбук, то наверняка видели, что интерфейс браузера красится в фирменный синий цвет соцсети. Но зачем и как?


Мобильные сайты все больше походят на приложения, нежели на просто сайт с информацией, и Google поддерживает эту тенденцию. Посмотрите хотя бы на то, что в последних версиях мобильного хрома по умолчанию вкладки браузера смешиваются со списком недавно запущенных приложений. Но что не хватает сайту, чтобы стать еще чуточку больше приложением? Конечно же кастомизации оболочки (интрефейса). Начиная с 39 версии хрома для Android Lollipop была внедрена возможность менять цвет интерфейса браузера веб-разработчиками.

Сделать это просто, нужно в <head> добавить новый мета-тег:

<meta name="theme-color" content="#9CC2CE">


Как видно из кода, в content мы записываем цвет, в который окрасится браузер.

Google также рекомендует использовать иконку высокого качества, чтобы это выглядело еще лучше:

<link rel="icon" sizes="192x192" href="nice-highres.png">


Через инспектор устройств хрома, я сделал пример, как это могло бы выглядеть на мобильной версии хабра:

image


Замечание: Если у пользователя не включено смешивание вкладок с приложениями, то он увидит выбранный вами цвет вкладки на вашем сайте, но в списке вкладок, она по прежнему будет серой.

image


P.S. Мне хотелось бы, чтобы этот цвет можно было задавать через css, так как это более логичный вариант, да и можно было бы воспользоваться переменной…
Поддержать автора
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 20

    –15
    Выглядит Забавно, Но удивляет другое, почему Хабр еще до сих пор не покрасил в фирменный стиль свою вкладку. Видимо работы много, некогда красить заборы и вкладки (Том Сойер).
      +15
      Ты уж прости нас, подвели тебя, подкачали.
        0
        Не шмогла)
      +11
      Это же гуглится за две секунды, а делается вставкой одного тега, в чем нагрузочный смысл таких статей?
        +13
        Наверное в популяризации технологии? Я вот, например, не знал о существовании данной фичи. Хотя конечно, судя по дате публикации по приведенной ссылке, тема уже далеко не нова, да.
          0
          Я недавно заметил такое на avito. В общем так и думал, что добавляется с помощью мета тега.
            +1
            Тема очень не новая, более того подобная статья была полтора года назад https://habrahabr.ru/post/245007/

            Наверно, если почаще повторять, то лучше усвоится.
              0
              К сожалению, в поиске я не нашел статьи на эту тему, поэтому написал эту. Мне кажется, что с моим заголовком найти ее станет гораздо проще.
                0
                Я думаю, если искать в гугле, то и без этой статьи таких было очень много.
              0
              Популяризации какой технологии?
                0
                Я тоже первый раз такое узнал. Но если такое и было уже то я ведь не могу читать все ресурсы посвященные теме, я читаю на постоянно основе Хабр, и зачастую это для меня единственный сайт где я узнаю новинки.
                0
                Чтобы узнать, что это можно вообще сделать, например.
                Хотя да, смысла на один пост не очень много. Но он есть.
                  –1
                  Смысл в том, что 151 человек добавил этот пост в избранное, видимо не все знали об этом…
                    0
                    184 человека из 24000 прочитавших, меньше процента. Да вы несомненный молодец, больше статей хороших и красивых!
                  –1
                  Можно сделать кучу постов по топовым «волнующим» вопросам со stackoverflow!
                  Насобирать кучу «плюсиков» и фапать на карму.
                    0
                    Обратите внимание, что это первая моя статья на разделенном хабре, я не стремлюсь "фапать на карму", это неблагодарное занятие. Я написал заметку, чтобы рассказать людям об этом функционале.
                    0
                    Вспомнил как была когда-то мода раскрашивать скроллбар в IE6.
                    Позже все-таки это стало моветоном, лезть в «личное пространство» пользователей стало плохой практикой и от этого отказались.
                      0
                      Всё новое — хорошо забытое старое. Со временем всем надоест пестрящие цвета и фичу отключат(пользователи)
                        0
                        Сейчас не только расскрашивают, но еще и добиваются скроллбаров в ие7, чтобы выглядели как на osX… История движется по спирали.
                        +2
                        Пожалуй оставлю вот такую ссылку: http://realfavicongenerator.net/
                        Генератор мета тэгов фавикона на все случаи жизни (apple иконки, windows плитки, цвет вкладки из данной статьи и т.д.)

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

                        Самое читаемое