Google меняет значок Chrome. Есть три отличия
Значок браузера Google Chrome изменится впервые за 8 лет. Правда, чтобы увидеть отличия от версии 2014-го года, придется как следует присмотреться.
В новейшем предварительном релизе браузера Google Chrome (канал обновлений Canary) сменился значок приложения. В прошлый раз его обновили в 2014-м году.
О том, как именно и для чего было решено перерисовать символ самого популярного в мире веб-браузера, рассказал в своем твиттере дизайнер Google Элвин Ху.
Поверхностным взглядом отличия так сразу и не заметишь. Но их, как минимум, три. Во-первых, отказались от теней на границах между зеленым, красным и желтым элементами, придававших иконке объем. Теперь значок совершенно плоский.
Во-вторых, было решено увеличить синий кружок в центре значка: это улучшило пропорции элементов, сделав иконку более сбалансированной. В-третьих, цвета сделали более яркими. По словам Ху, всё это соответствует «более современному выражению бренда Google».
Есть еще одно изменение, которое трудно заметить, не измеряя точные цифровые значения цветов. Дизайнеры обнаружили, что более яркие оттенки зеленого и красного, будучи размещены рядом, создают эффект «неприятных цветовых вибраций». Из-за этого насыщенность зеленого и красного в разных участках одного цвета немного меняется (вариант справа):
Google изменит логотип браузера Google Chrome
Google изменит логотип браузера Google Chrome. Как рассказал на своей странице в Twitter дизайнер компании Элвин Ху, значок упростили: удалены тени, немного изменились пропорции, а цвета стали ярче. Все это — для того, чтобы он больше соответствовал современному выражению бренда Google.
«Интересный факт: мы обнаружили, что расположение определенных оттенков зеленого и красного рядом друг с другом создает неприятную цветовую вибрацию. Поэтому мы добавили очень тонкий градиент, чтобы смягчить переход», — уточнил Элвин Ху.
Для разных операционных систем значок браузера будет выглядеть по-своему. В Windows иконка Chrome будет градуированной (она будет доступна в Windows 10 и 11). В ChromeOS цвета будут более яркими, без градиентов, чтобы соответствовать внешнему виду остальных системных значков.
В macOS Chrome будет с небольшим 3D-эффектом. Для Beta и Dev мы прикрепили к ним разноцветные ленточки. В iOS бета-версия приложения будет похожа на чертеж — это дань уважения Apple, которая ориентирована на разработчиков. В обычной версии иконка браузера будет иметь новые пропорции.
Обновленный значок Google Chrome появится на устройствах в ближайшие несколько месяцев.
Значок браузера UC, символ синей области, браузер UC, синий, логотип, мобильный браузер png
- 512x512px 54.8KB
- 1000x1000px 348.81KB
1024x1024px 187.43KB- 900x900px 179.45KB
512x512px 4.72KB
768x768px 217.6KB
750x750px 416.29KB
512x512px 33.08KB- 600x600px 19.8KB
- 512x512px 26.48KB
- 3217x3128px 209.97KB
- 512x512px 32.16KB
- 512x512px 9.23KB
500x710px 171.41KB
512x512px 23.3KB- 800x806px 211.54KB
669x669px 139.77KB- 512x512px 7.52KB
- 1124x1124px 17.27KB
512x512px 12.55KB
980x980px 60.75KB- 512x512px 3.18KB
- 512x512px 35.34KB
1400x770px 958.77KB
884x1552px 49.7KB- 512x512px 66.82KB
- 1000x1000px 355.5KB
658x636px 368.5KB
1000x1000px 16.98KB- 512x512px 8.99KB
- 775x300px 42.14KB
- 770x910px 26.35KB
3810x3839px 1.61MB- 562x544px 33.28KB
980x980px 67.11KB- 512x512px 38.11KB
- 634x528px 34.44KB
1600x1600px 40.73KB- 994x1000px 363KB
- 6924x2408px 444.93KB
800x1020px 126.04KB- 1600x1600px 32.88KB
- 1078x1078px 42.91KB
- 2707x2516px 126.99KB
- 512x512px 42.92KB
- 1200x937px 161.9KB
- 512x512px 220.5KB
643x696px 133.74KB
800x660px 315.63KB- 1019x1019px 137.25KB
Загрузи больше
- Terms Of Use
- Privacy Policy
- Загрузить PNG
- Contact Us
Красивая иконка на табло Яндекс Браузера
Переведя статью об иконках сайта, я, конечно же, решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулся с парочкой проблем.
Первая из них — это то, что старые версии сафари почему-то не воспринимали нормально иконку — она то появлялась, то пропадала. И методом известного еврейского учёного Тыка я пришёл к выводу, что лучше поставить иконку apple touch выше всех остальных — другие браузеры заменять на неё не будут, но зато в сафари съест её первой и всё отобразится нормально. То есть порядок я теперь использую такой:
Но перейдём ко второй, основной проблеме. Имя этой проблемы — Яндекс.Браузер (Браузер Яндекс? Я.Браузер?). Кто-нибудь, расскажите ребятам, что вечно называть свои приложения и сайты по-разному — это плохой маркетинговый ход (Я.Диск, потом Яндекс.Диск или Яндекс Диск, после — просто Диск и так со всеми приложениями по кругу).
Так вот, Яндекс Браузер наотрез отказывался нормально показывать иконку сайта на своём табло. Табло — это не грубое название лица, а страница, которая появляется при открытии новой вкладки. Если быть точным, он вовсе не показывал никакую иконку — просто писал текстом «mihailgok».
Как хороший мальчик, первое, о чём я подумал — надо прочитать API, наверняка добрые люди из Яндекса всё в нём описали. Каково же было моё удивление, когда на странице API Яндекс Браузера я увидел это:
НИ-ЧЕ-ГО. Ладно, подумал я, тогда мы гуглим (простите, яндексим) проблему. И действительно выясняем, что, у Яндекса некогда было API, описывающее работу с виджетом на табло, но когда мир нуждался в нём больше всего, оно исчезло.
- Я наткнулся на одну хорошую подробную статью (в ней есть некоторые неточности, а что-то уже не работает).
- Также в веб-архиве откопал-таки старое API.
Таким образом мы подошли к созданию иконки для Табло Яндекс Браузера.
Вот, что нужно сделать (коротко).
- Создать файл манифеста.
- Создать изображение (можно использовать квадратное, но лучше 100 на 300).
- Подключить файл манифеста.
Файл манифеста
Начнём с самого сложного — манифеста.
< // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ "version": "", "api_version": , "layout": , // ОПЦИОНАЛЬНАЯ ЧАСТЬ "feed": >где:
version — версия вашего манифеста;
api_version — версия апи, используемого манифестом;
layout — информация вашего «виджета».
layout выглядит так:
"layout": < "logo": "https://mihailgok.ru/tableau.png", "color": "#0035FF", "show_title": none >,logo — путь к картинке, которая будет отображаться на виджете. У неё должен быть прозрачный фон и разрешение 100 в высоту и 300 в ширину.
В API рекомендуют высоту до 50, но разрешения экранов с 2014 года поднялись. Я увеличил параметры в 2 раза и всё работает.
color — цвет фона;
show_title — информация о том, как отображается title страницы.
Уточнения
Поля logo и color могут иметь как статические значения, так и зависящие от языка интерфейса браузера. В этом случае нужно указать варианты для разных языков и обязательно тот, который будет отображаться по умолчанию (т.е. когда у пользователя локаль браузера отлична от перечисленных в списке).
"layout": < "logo": < "en": "", "ru": "", "default": "" >, "color": < "en": "", "ru": "", "default": "" > >Начиная со второй версии API Табло поле show_title может принимать одно из трех значений:
- all — заголовок отображается независимо от того, для какой страницы сайта он был создан;
- internal — заголовок отображается только в том случае, если виджет был создан для внутренней страницы сайта (по умолчанию);
- none — заголовок не отображается.
Ранее была возможность отображать нотификаторы, однако не уверен, что это работает сейчас.
Чтобы добавить нотификатор на виджет, в манифесте необходимо описать:
- адрес сервера, с которого запрашиваются данные о нотификаторах,
- формат ответа сервера (json или xml),
- название и значок нотификатора.
Нотификаторы обновляются при каждом открытии Табло. Браузер отправляет запросы на адрес в поле url, ожидая от сервера ответа со значениями. Если сервер три раза подряд вернул некорректный ответ, то значения нотификатора обнуляются.
Ограничение. На виджете могут быть отображены только три нотификатора.
"feed": < // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ "url": "", "format": "", // ОПИСАНИЕ НОТИФИКАТОРА "notifiers": [ < "name": "<уникальное название нотификатора>", //Значок нотификатора загружается с сервера сайта: "icon": "<URL значка нотификатора>", //либо используется ОДИН ИЗ предустановленных значков: "icon": "%BELL%", "icon": "%EARTH%", "icon": "%FRIEND%", "icon": "%MESSAGE%", "icon": "%PHOTO%", "icon": "%CHAT%", // ОПЦИОНАЛЬНАЯ ЧАСТЬ "<span xmlns="http://www.w3.org/1999/xhtml" >path<div ><iframe src="about:blank" ></iframe><div ><i ></i><div ><div ><span >[no-highlight[</span><p xmlns="" ><a ></a>Ответ сервера может содержать элемент со значением нотификатора на верхнем уровне. В этом случае описание нотификатора в манифесте должно содержать только поле <span >name</span> с соответствующим названием. Если же значение расположено глубже в иерархии ответа, необходимо использовать поле <span >path</span>. Это поле должно указывать на свойство (для JSON-ответа) или элемент (для XML-ответа), из которого нужно извлекать значение. Использование полей <span >name</span> и <span >path</span> и соответствующие ответы сервера показаны в <a href="/web/20140929153100/http://api.yandex.ru/tableau/doc/index.xml#widget-ex">примерах для JSON- и XML-ответов</a>.</p><span >]no-highlight]</span></div></div></div></div></span>": "<путь к значению нотификатора>", >] >Ответ сервера может содержать элемент со значением нотификатора на верхнем уровне. В этом случае описание нотификатора в манифесте должно содержать только поле name с соответствующим названием. Если же значение расположено глубже в иерархии ответа, необходимо использовать поле path. Это поле должно указывать на свойство (для JSON-ответа) или элемент (для XML-ответа), из которого нужно извлекать значение. Использование полей name и path и соответствующие ответы сервера показаны в примерах для JSON- и XML-ответов.
Уточнение
Начиная с третьей версии API Табло для нотификатора можно указать параметр type — тип значения в нотификаторе:
- int (по умолчанию),
- float (если в десятичной части более двух цифр, то будут отображены только первые две).
Итоговый манифест для сайта выглядит вот так:
Создание файла логотипа и подключение манифеста.
- Создаём файл 300px в ширину и 100px в высоту.
- Убираем белый фон (делаем прозрачным).
- Помещаем логотип (тоже без фона) и растягиваем его на всю высоту.
- Сохраняем как файл как png.
Генератор делает примерно тоже самое.
В итоге подключаем наш манифест на страницу:
И всё! Наконец-то наш сайт выглядит замечательно на Табло Яндекс Браузера.
Я сделал белые иконки и основной цвет фоном, так показалось красиво.
Одна проблема — чтобы это отобразилось, нужно удалить сайт с табло, почистить историю браузера. Затем зайти на сайт и только после того, как вы зашли и весь контент прогрузился, — можно добавлять сайт обратно на табло Яндекс Браузера и он отобразится нормально.
Если добавите сайт в табло до того, как зайдёте или не удалите с табло перед очисткой кэша, — всё отобразится по-старому.