Что такое apple иконки

Добавляем иконки сайта для iPhone, iPad и Android

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

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!

Многие добавляю его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:

Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства.

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

для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:

• 60х60 — IPhone
• 76×76 -iPad
• 120×120 — iphone-retina
• 152×152 — ipad-retina

Третье, вставить в код указав пути к картинкам:

Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся — нужно к именам файлам добавить —precomposed.png

А что Android.

Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова «apple» 🙂

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол».

В заключении — если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием «apple-touch-icon.png». Это самый простейший способ.

Для быстрого автоматического создания иконок для сайта

Мы советуем использовать сервис ICONOGEN

Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом.

Сервис так же генерирует html код для вставки в шаблон сайта:

Источник

Для чего используется 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 от устройства на сервер будут отправляться запросы в следующем порядке:

1. В первую очередь к apple-touch-icon-precomposed.png.
2. Если он не найден (от сервера получен ответ 404), то устройство сделает новый запрос к к apple-touch-icon.png.
3. Если и этот способ не увенчается успехом, то устройство сделает скриншот верхней части вашего сайта, и он будет использоваться в качестве 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-touch-icon
IPhone – first generation, iPhone 2G, iPhone 3G, iPhone 3GS	57×57
iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone se, iPhone 6, iPhone 6s, iPhone 7, iPhone8	120×120
iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus	180×180
iPad mini	76×76
iPad, iPad mini 2	152×152
iPad Pro	167×167

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

Модель устройства	Размер apple-touch-icon
iPhone	120×120 или 180×180
iPad Pro	167×167
iPad, iPad mini	152×152

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

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

Прописывается в вашего сайта. С помощью тега
, по аналогии с favicon.

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

Как прописывается 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, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.

Источник

Секрет иконок iOS — как Apple нашла совершенство формы

Ниже перед вами два ряда иконок — посмотрите на них внимательно. Они известны всем пользователям операционной системы iOS и не только. Не спешите, приглядитесь, постарайтесь найти отличия.

В одном из рядов иконки оригинальные, взятые из iOS, а в другом ряду — подделка. Смогли найти отличия?

Ладно, не буду томить — вот разгадка.

Наверняка многие заметили, что нижний ряд (подделка) чем-то отличается от верхних иконок — так и есть, но в чем разница? Ведь если не присматриваться, беглым взглядом найти отличия не так-то просто. Сейчас вы узнаете тайну иконок iOS и то, как Apple стремится к совершенству.

В чем секрет иконок от Apple?

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

Это не квадрат и не круг, а квадратный круг, он же Squircle , являющийся математической формулой.

Посмотрите, как суперэллипс (нарисован красным цветом) отличается от того же квадрата со скругленными углами (нарисован черным цветом) . Разница минимальна, всего несколько пикселей, но в этом и состоит магия Apple.

Вся продукция Apple — это результат математических формул

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

Иконки в iOS — это суперэллипс или кривая Ламе, названая в честь великого математика Габриеля Ламе, который разработал общую теорию криволинейных координат.

Суперэллипсы начали популяризировать в 60-х годах прошлого века. Есть и 3D-модель суперэллипса — называется она суперэллипсоид или же суперяйцо. Где можно увидеть эту форму? Правильно — HomePod от Apple .

Почему Apple выбрала Squircle, а не квадрат с круглыми углами?

Чем яблочникам не угодил квадрат? Если вы посмотрели картинку выше, где сравнивается суперэллипс с квадратом со скругленными углами, то наверняка заметили одну деталь. У суперэллипса скругления нарастают постепенно, плавно перетекая в ровную линию, а у квадрата этот переход более грубый.

Именно эта грубость и создает впечатление неестественности, чего-то искусственного и некрасивого. Squircle лишен этих недостатков и воспринимается лучше ввиду создания непрерывности кривизны. Форма воспринимается человеком намного легче, так как переходы мягче, выглядят органичнее и напоминают о красоте природы (вместо фабрик, цехов по производству и т.д.)

Все продукты Apple — это суперэллипсы:

• Mac mini;
• Apple TV;
• Apple Watch (начиная с Series 4);
• iPhone;
• iPad;
• MacBook;
• HomePod (суперэллипсоид).

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

Источник

История логотипа «Apple»

П ростой дизайн логотипа « Эппл » имеет занимательную историю.

Н азвание компании «Эппл» пересеклось с названием студии записи, принадлежащей группе « Битлз ». Схожесть название и логотипа вынудили Битлов начать против «Эппл» судебный процесс, длившийся 28 лет. Спор был урегулирован мирно, компания «Эппл» заплатила 500 миллионов и закрепила за собой право использовать название и айдентику.

И сторию с «Яблоком» связывают с первородным грехом из библии или смертью Алана Тьюринга , съевшего яблоко с цианидом. Существует множество иных версий от реалистичных до лишенных логики. Однако у Роба Янова, возглавлявшего команду дизайнеров первого логотипа 1976 года своя версия.

С о слов Роба — процесс укуса был специально визуализирован, чтобы отличить яблоко от схожих по форме фруктов.

Мы сделали силуэт яблока, но, чтобы фрукт считывался как надо, а не как иной фрукт, мы решили откусить часть.

В 1976 году было два логотипа — оригинальный и надкусанный.

Оригинальный логотип 1976 года

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

Н а нем изображена легенда об открытии Иcааком Ньютоном закона всемирного тяготения. Ученый сидел под деревом и ему на голову падает плод. Его создал Рональд Уэйн в знак своего почтения за вклад в развитие науки. Лого стал полноценной айдентикой компании, но из-за своей сложности — провалился.

С тиву Джобсу идея Рональда понравилась, но реализация нет. По мнению Стива — логотип загадочный для масс и лишен четкости. По итогу он нанял команду дизайнеров для разработки чего-то более явного и простого.

Надкусанный логотип 1977 — 1998 года

Д жобс хотел видеть нечто артистичное, нанял Роба Янова и его команду на разработку нового. Результат Джобса полностью удовлетворил.

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

Цвета в логотипе ассоциируют с развитием компьютера «Макинтош» и переходом на вторую модель, в котором поддерживалось использование цветов. Логотип просуществовал 22 года.

Монохромный логотип Эппл 1998 — 2000 года

З а 22 года много произошло в жизни Стива Джобса, в том числе — его выгнали из компании, которую он сам создал. Вернулся он в нее после запуска успешной анимационной студии « Пиксар », через 12 лет.

У спех компании «Эппл» это личная заслуга Стива Джобса и его роли маркетолога в ней. После возвращения он сменил айдентику и позицию бренда.

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

Стеклянный логотип 2001 — 2007 года

Д изайнеры компании хирургически внесли изменения в 2001 году, сделав его более стилизованным. Новый логотип имел стеклянный градиент, добавляющий изысканности.

« Э ппл» продолжала использовать две версии: монохромную для софта, стеклянную на продукции.

Современный логотип

К омпания «Эппл» чуть ли не единственная в мире, сохранившая целостность формы, при этом не просто соответствуя, но задавая тренд по сей день.

З а свой долгий путь бренд зарекомендовал себя надежным производителем оборудования, отвечающий за каждую единицу отпускаемого ими товара. Отношение к людям через впечатления от покупки нового устройства. Процесс вскрытия упаковки, до многолетнего использования — все это сопровождается удовольствием взаимодействия с брендом. За все это мы и любим «Эппл», доверяем ему и следим за новинками компании.

Источник