Web clip icon 180×180 что это

Создание favicon для сайта 2020

Что такое favicon и для чего он нужен?

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?

Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.

Сам файл манифеста формата json и объявляется следующей строкой:

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.

Windows

С Windows нужно немного запариться, чтобы сделать хорошо.

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

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

Данной строкой мы указываем цвет фона плитки:

Можно указать имя вашего веб-сайта:

Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

Сам файл будет выглядеть следующим образом:

В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.

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

Источник

Web clip icon 180×180 что это

Переключатель тем (1) — активирует на страницах сайта виджет, доступный администраторам. С его помощью можно изменять цветовые схемы и внешний сайта и некоторых его элементов, чтобы оценить, как они выглядят в разном оформлении и подобрать оптимальные для вас. Виджет спрятан за левым краем экрана и отображается при нажатии на пиктограмму в виде шестеренки.

Этот виджет работает в демонстрационном режиме – выставленные с его помощью настройки не сохраняются. С помощью виджета вы можете подобрать подходящее оформление, а затем в настройках решения выставить уже определенные параметры. Подробнее о его работе

Цветовая схема (2) — базовый цвет для общего оформления сайта: меню, кнопки, заголовки, ссылки, графические украшения и т.д. Если базовые цвета вам не подходят, выберите пункт «пользовательский».

Пользовательский цвет (3) — поле для вашего цвета, если в наборе базовых не нашлось подходящего. Вы можете задать цвет с помощью hex-кода цвета (без #) или выбрать его из палитры. Выбранный цвет будет применен, если в предыдущем списке выставлен пункт «пользовательский».

Цвет фона (4) — задает оттенок для фона сайта. Можно выбрать светлый, темный и пользовательский

Закрашивать боковые части футера в цвет фона (5) — задает оттенок боковым частям футера сайта.

Пользовательский цвет (6) — поле для вашего цвета фона. Нужно размещать hex-код цвета без #. Цвет будет применен, если в предыдущем списке выставлен пункт «пользовательский».

Цвет меню (7) — задает оттенок для главного и выпадающих меню. Можно выбрать светлое, темное и цветное. Если выбрано цветное, то цвет будет соответствовать настройкам цветовой схемы.

Favicon (9) — иконка сайта, которая отображается рядом с заголовком вкладки браузера. Эта иконка обязательно должна быть 16 х 16 px. Загружается тем же образом, что и логотип.

Web Clip Icon 180 x 180 (10) — иконка веб-приложения для Apple-устройств. Размеры изображения – 180 х 180 px. Загружается тем же образом, что и логотип. Начиная с версии 1.6.3, добавили возможность загружать фавиконку в формате SVG, опираясь на требования поисковых систем.

Корзина (11) — определяет положение блока с корзиной, отложенными товарами, списком сравнения и личным кабинетом. Можно выбрать летающую или в шапке.

В первом случае блок прячется за правым краем экрана и выплывает при нажатии на иконки:

Во втором случае иконки располагаются в шапке (при этом из блока пропадает иконка личного кабинета):

Отображать экономию у товаров в летающей корзине (12) — размер экономии в летающей корзине напомнит клиентам о выгоде и о том, что нужно поскорее перейти к оформлению покупки. Подробнее в статье.

Тип SKU (13) — варианты отображения торговых предложений: на карточке с товаром в виде превью или таблицы с характеристиками.

Режим показа детальной картинки (14) — задает тип отображения полноразмерной картинки в карточке товара при нажатии/наведении на обычную. Можно выбрать обычный, всплывающее окно и лупа.

Умный фильтр (15) — задает положение умного фильтра в каталоге. Можно выбрать горизонтальный или вертикальный.

Показывать общую сумму товара в списке и на детальной странице (16) — вы можете выбрать, при каких условиях будет отображаться общая сумма: при смене количества товаров, всегда или вообще не показываться. Подробнее об отображении общей суммы товара читайте в документации.

Использовать быстрый просмотр товаров (17) — его применяют для удобства коммуникации пользователя с торговым каталогом. Больше о возможностях и настройке быстрого просмотра товаров вы найдете в статье.

Шаблон детальной страницы каталога (18) — можно выводить детальную страницу с табами, без табов и использовать elements_custom. Elements_custom выбирается для модификации кода элементов.

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

Подставлять заголовок торгового предложения в название товара в списке и на детальной странице (19) — доступно отображение названия товара с подстановкой названия торгового предложения и без него. О настройке заголовков читайте в документации.

Отображать левое меню каталога (20) — в зависимости от потребностей можно выводить каталог в левом меню или деактивировать его.

без каталога в левом меню

С каталогом в левом меню

Положение выпадающего меню каталога (21) — задает положение выпадающего меню для пункта «Каталог». Можно выбрать прижато к верху или на уровне активной ссылки. В первом случае выпадающее меню прижимается верхним краем к горизонтальному меню и занимает всю высоту подменю каталога:

Во втором случае высота выпадающего меню зависит от количества пунктов в нем, а верхний край находится на уровне активной ссылки:

Вид отображения выпадающего меню каталога (22) — можно выбрать место отображения подразделов каталога: справа или снизу.

Режим показа просмотренных товаров (23) — задает быстрый или стандартный режимы.

Выводить магазины из (24) — определяет, из какого ресурса будет браться информация о розничных магазинах. Доступные варианты – из инфоблока или складов.

Не заливать логотип в цвет сайта (25) — отметьте, если не хотите, чтобы цвет логотипа зависел от цветовой схемы сайта и заливался соответствующим цветом.

Пользовательский шрифт из Google Fonts (26) — позволяет задать шрифт под специфику проекта. О том, как настроить шрифт из Google Fonts, читайте в статье.

Маска ввода телефона (27) — задает параметры ввода телефонных номеров пользователями в формах обратной связи. По умолчанию маска ввода телефона выглядит так: +7 (999) 999-99-99.

Валидация ввода телефона (28) — определяет формат отображения телефонных номеров. По умолчанию настроена для вывода российских номеров: ^[+][7] [(]9<3>[)] 8<3>[-]7<2>[-]8<2>$. Как изменить формат ввода телефонных номеров, читайте здесь.

Обработка персональных данных (29) — блок настроек для согласия об обработке персональных данных в формах обратной связи. О настройке параметров обработки персональных данных читайте в документации.

Отображать выпадающее меню с подразделами каталога в навигационной цепочке (30) — активирует в «хлебных крошках» выпадающее при наведении меню для разделов каталога. Если опция неактивна, навигационная цепочка остается статичной: пользователь может переместиться с ее помощью только на обозначенные в ней разделы.

Строить навигационную цепочку в каталоге (31) — ее можно создать из названия раздела/элемента или заголовка раздела/элемента (h1).

навигационная цепочка из названия раздела/элемента

навигационная цепочка из заголовка раздела/элемента (h1)

Печать заказа (32) — добавляет кнопку «Распечатать заказ» в корзину на этапе оформлении заказа.

Расположение описания раздела в списке товаров (33) — настраивает отображение текстового описания раздела каталога. Можно выбрать перед списком товаров или после.

Уровень вложенности меню (34) — определяет, сколько уровней вложенных меню может отображаться на сайте. К примеру, если существует раздел «Услуги», а в нем подраздел «Доставка» с подразделом «Города» (в котором есть страницы для каждого города), то при выборе типа уровня вложенности «2» в выпадающем меню будет отображаться только подраздел «Доставка». При уровне вложенности «3» у подраздела «Доставка» будет отображаться меню с подразделом «Города». При уровне вложенности «4» у подраздела «Города» будет отображаться меню со страницами городов.

ID каталога товаров (35) — уникальный код, который нужен для идентификации товаров в базе данных интернет-магазина.

Старая цена для товаров (36) — отображает цену без скидки (зачеркнутую) в карточке товара. О настройке отображения скидочной цены читайте в статье.

Не добавлять название сайта в заголовок браузера (37) — отменяет добавление в заголовок вкладки браузера название сайта, прописанное в настройках. Актуально, если вы хотите выводить там другой текст.

Логин равен email адресу (38) — позволяет пользователю не придумывать логин при регистрации, а использовать для этого свою электронную почту.

Источник

Для чего используется Apple Touch Icon в 2019 году?

Apple-touch-icon.png – это миниатюрное изображение, представляющее ваш сайт на устройствах с операционной системой (iOS).

В коде страницы имеет следующий вид:

Это изображение в основном используется на iOS, не распространяется для macOS. Для macOS используется изображение в формате svg, а атрибут rel будет иметь значение mask-icon. Важно это понимать и не путать в будущем.

Также Apple Touch Icon могут использовать другие платформы и приложения. Ведь, как правило, это изображение хорошего качества, имеющее высокое разрешение. Так, например, браузер Chrome на Android может использовать apple-touch-icon.png для сохранения ссылки с сайта на рабочий стол.

Создать его можно с помощью функции Web Clips. Web Clips – это разработка значка веб-страницы на рабочем столе яблочного девайса.

Если вы читаете эту статью на устройстве с установленной iOS и не знаете, как создавать Web Clips, можно сделать это прямо сейчас.

Для браузера Safari

Нажать кнопку «Поделиться»

В появившейся панели нажать кнопку «На экран Домой»

Если вас не устраивает название страницы, можно написать свое, например, 1PS. Затем нажать «Добавить».

Все готово – вот так выглядит Web Clips на рабочем столе устройства.

Однако не все сайты используют Apple Touch Icon. Давайте рассмотрим ситуацию, когда его нет.

Делаем все тоже самое, но на пункте 3 предыдущей инструкции видим такую картину:

Изображение создалось автоматически, но по факту это скриншот верхней части сайта. Вот как Web Clips будет выглядеть на рабочем столе нашего устройства:

Согласитесь, в первом случае он выглядел лучше.

Apple Touch Icon можно отнести к разряду вещей, формирующих узнаваемость вашего бренда. Этой иконкой может быть логотип вашей компании, и он должен привлекать к себе внимание и быть узнаваемым. Если посетитель на рабочем столе будет видеть просто скриншот страницы, это вряд ли положительно скажется на узнаваемости.

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

Чтобы этого избежать, давайте рассмотрим технические особенности создания Apple-touch-icon.png.

Техническая сторона

При создании Web Clips от устройства на сервер будут отправляться запросы в следующем порядке:

Apple-touch-icon-precomposed.png и к apple-touch-icon.png, в чем различия?

Apple-touch-icon.png позволяет создать изображения, не запариваясь с фирменным оформлением Apple (закругленные рамки, блики). Ваше устройство все сделает самостоятельно.

С помощью apple-touch-icon-precomposed.png вы можете проявить некую творческую жилу и сделать все вручную, однако к этому формату есть свои требования – будьте внимательны.

Размеры для apple-touch-icon

В 2007 году было достаточно размера 57×57, так как было только одно устройство, на котором можно было сделать Web Clips.

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

Если устройство не найдет иконку нужного размера, то оно будет использовать самую близкую по большему размеру иконку.

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

Однако не стоит забывать о том, что не только устройства Apple используют Apple Touch Icon, поэтому можно объявить и другие размеры. Указывать размеры нужно с помощью атрибута – sizes.

Таблица размеров

На сегодняшний день Apple рекомендует дает следующие рекомендации по размерам иконок

Можно сделать вывод что устройства первого поколения, и ipad mini уже неактуальны, поэтому для них необязательно прописывать Apple-touch-icon соответствующего размера.

Как прописать в коде apple-touch-icon?

Для сравнения напоминание, как прописывается фавикон:

Как прописывается apple-touch-icon:

Использование в поисковой выдаче

22 мая 2019 года Google в своем блоге объявили о редизайне мобильной выдачи.Теперь в результатах мобильной поисковой выдачи будет показываться иконка сайта.

И для этой иконки может быть использован как Apple Touch Icon, так и другие форматы к примеру:

Подробнее о требованиях к иконке тут.

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

Как это сделать, написано тут.

Заключение

Прошло уже много лет с тех пор, как появился первый iPhone и соответственно Apple-touch-icon. Теперь он может быть использован не только для оформления красивого Web Clips, но и для улучшения внешнего вида сниппета сайта в поисковой выдаче Google. А Apple Touch Icon со временем популяризировался и теперь используется другими платформами и приложениями.

Мы рассмотрели только часть возможностей для кастомизации сайта, но у Apple есть еще несколько интересных дополнений, например, Startup Image, Apple Mobile Web App Title и другие вещи, о которых расскажем в следующих статьях.

Если у вас на сайте еще нет Apple Touch Icon, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.

Источник