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

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

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

1. Главная
2. Все про HTML

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

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

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

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

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

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

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

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

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" href="touch-icon-ipad-retina.png">

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

А что Android!?:

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

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

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

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

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

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

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

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72. png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile. png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Как сделать иконку сайта для iPhone

Apple

/

время чтения:
2 минуты

Количество устройств работающий на операционной системе iOS с каждым годом растет. Это статья для web-мастеров, которые оптимизируют свои сайты для просмотров с iPhone и iPad. Для того, чтобы при добавлении в закладки браузера Safari или при добавлении на рабочий стол iPhone показывалась нужная иконка сайта, необходимо специально создать изображений. Иконка favicon в данном случае не работает.

Для сайтов, где нет такой иконки, в закладках Safari показывается серая заглушка, а на рабочем столе создается иконка на основе скриншота первой страницы. Это не очень красиво. Но достаточно потратить всего несколько минут, чтобы сделать свою иконку сайта для iPhone…

Как создать иконку сайта для iPhone

1. Нужно создать изображение в формате PNG размером 152x152px в любом графическом редакторе. Если вы работаете в Photoshop, то это формат PNG 24. Можно даже задать прозрачность.
2. Сохранить файл под названием «apple-touch-icon.png«.
3. Загрузить получившийся файл по FTP на сервер, в корневую папку сайта. Например /assets/pictures/9842/content_apple-touch-icon.png.

Теперь при добавлении закладки на ваш сайт, в Safari появится созданная вами иконка. А если вы выберите «Добавить в Домой», то и на рабочем столе.

Сразу отвечу на возможные вопросы

Нужно ли что-то прописывать в самом HTML документе?

Нет, ничего специально прописывать в mete не нужно. Браузеры мобильный устройств сами ищут этот файл на вашем сайте. Более того, если такого файла там нет, то сервер выдает в ответ 404 ошибку. Посмотрите в логи на сервере, там много таких запросов. Кроме того — эти файлы «ищутся» не только в момент добавления сайта на домашний экран, а при каждом посещении!

И, вы наверно удивитесь, но Android устройства тоже используют значки apple-touch-icon.png при добавлении закладки сайта на рабочий стол :).

А как же Retina, нужно делать несколько изображений под разное разрешение?

Раньше нужно было делать несколько картинок, сейчас достаточно одной большой (152x152px). В принципе, в Apple регулярно меняют разрешения экранов и стандарты для разработчиков. Вполне вероятно, что когда вы будете читать эту статью, что-то уже поменяется. Но, самый актуальный размер всегда можно узнать по ссылке /assets/pictures/9844/content_apple-touch-icon.png. Это самый правильный формат иконки :).

Теги:
#iPhone иконки

#Иконки iPhone

Экономьте время: все самое интересное каждый день
по почте

Невалидный е-mail

End of content

No more pages to load

Как добавить значки Apple на свой сайт

by Gray MacKenzie

Популярность мобильного просмотра стремительно растет. Согласно новому отчету Pew Internet Project, 25% американцев используют смартфоны вместо компьютеров для большей части просмотра веб-страниц.

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

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

Что такое значки Apple и зачем их использовать?

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

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

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

Что насчет вашего фавиконки?

Фавиконы — маленькие изображения, которые отображаются рядом с заголовком страницы на вкладке в верхней части браузера, не отображаются на устройствах Apple — iPad, iPhone, iTouch и т. д.

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

Как добавить значки Apple на свой веб-сайт

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

Создание и внедрение ваших пользовательских значков Apple

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

1. Создайте квадратное изображение размером 144 x 144 пикселей в формате .png, используя собственный дизайн.
2. Назовите изображение, например, « apple-touch-icon.png » и сохраните его.
3. Теперь загрузите изображение на свой веб-сайт (в этом примере используется загрузка в каталог изображений вашего сайта).
4. Добавьте этот HTML-код в заголовок перед закрывающим тегом:

Поздравляем! У вас получилось! Изображение размером 144 x 144 будет использоваться как есть на iPad Retina, на всех других устройствах значок будет масштабироваться по размеру.

Дополнительные примечания по значкам Apple

Стандартные значки Apple по сравнению с готовыми значками: По умолчанию iOS придает вашему значку Apple закругленные углы и глянцевый эффект. Чтобы удалить глянцевый эффект, просто используйте этот HTML-код в заголовке:

Различные значки Apple для каждого устройства: Если вы хотите, чтобы на вашем iPhone отображался значок Apple, отличный от вашего iPad, используйте нестандартные размеры и следующий пример кода, чтобы определить, какое изображение должно отображаться на каждом устройстве:

Совет пользователям WordPress: Проверьте этот замечательный плагин, чтобы легко добавить значки Apple на свой сайт!

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

Рубрики: Входящий маркетинг, Дизайн веб-сайтов

Иконки — Основы — Руководство по человеческому интерфейсу — Дизайн

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

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

Вы можете создавать значки интерфейса, также называемые глифами или шаблонными изображениями — или вы можете выбрать символы из приложения SF Symbols, используя их как есть или настроив их в соответствии со своими потребностями. И значки, и символы интерфейса используют черный и прозрачный цвета для определения их формы; система может применять другие цвета к черным областям на каждом изображении. Руководство см. в разделе Символы SF.

Передовой опыт

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

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

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

. ..и используйте одинаковую толщину штриха для каждой иконки.

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

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

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

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

Перемещение значка на несколько пикселей выше оптически центрирует его; включение пикселей в отступы упрощает центрирование.

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

До оптического центрирования (слева) и после оптического центрирования (справа).

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

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

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

Включайте текст в дизайн только тогда, когда это необходимо для передачи смысла. Например, использование символа в значке интерфейса, представляющего форматирование текста, может быть самым прямым способом передать концепцию. Если вам нужно отображать отдельные символы в иконке, обязательно локализуйте их. Если вам нужно предложить отрывок текста, спроектируйте его абстрактное представление и включите перевернутую версию значка, чтобы использовать его, когда контекст направлен справа налево. Для получения рекомендаций см. Справа налево.

Если вы создаете собственный значок интерфейса, используйте векторный формат, такой как PDF или SVG. Система автоматически масштабирует значок векторного интерфейса для дисплеев с высоким разрешением, поэтому вам не нужно предоставлять его версии с высоким разрешением. Напротив, PNG — используемый для значков приложений и других изображений, которые включают такие эффекты, как затенение, текстуры и выделение, — не поддерживает масштабирование, поэтому вам нужно предоставить несколько версий для каждого значка интерфейса на основе PNG. Кроме того, вы можете создать пользовательский символ SF и указать масштаб, который гарантирует, что выделение символа соответствует соседнему тексту. Руководство см. в разделе Символы SF.

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

Избегайте использования копий оборудования Apple. Конструкции аппаратных средств имеют тенденцию часто меняться, из-за чего значки интерфейса и другое содержимое могут выглядеть устаревшими. Если вам необходимо отобразить оборудование Apple, используйте только изображения, доступные в ресурсах Apple Design Resources, или символы SF, представляющие различные продукты Apple.

Особенности платформы

Никаких дополнительных соображений для iOS, iPadOS, tvOS или watchOS.

macOS

Значки документов

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

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

В некоторых случаях может иметь смысл создать набор значков документов для представления диапазона типов файлов, которые обрабатывает ваше приложение. Например, Xcode использует пользовательские значки документов, чтобы помочь людям различать проекты, объекты AR и файлы кода Swift.

Чтобы создать собственный значок документа, вы можете указать любую комбинацию фоновой заливки, центрального изображения и текста. Начиная с macOS 11, система накладывает, размещает и маскирует эти элементы по мере необходимости и объединяет их в знакомую форму значка со сложенным углом.

macOS 11 объединяет элементы, которые вы предоставляете, для создания собственного значка документа.

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

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

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

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

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

• 512×512 пикселей при 1x, 1024×1024 пикселей при 2x
• 256×256 пикселей при 1x, 512×512 пикселей при 2x
• 128×128 пикселей при 1x, 256×256 пикселей при 2x
• 32×32 пикселей при 1x, 64×64 пикселей при 2x
• 16×16 пикселей при 1x, 32×32 пикселей при 2x

Если знакомый объект может передать тип документа или его связь с вашим приложением, рассмотрите возможность создания центрального изображения, которое изображает его. Создайте простое, недвусмысленное изображение, четкое и узнаваемое в любом размере. Размер центрального изображения составляет половину размера всего холста значка документа. Например, чтобы создать центральное изображение для значка документа размером 32 x 32 пикселей, используйте холст изображения размером 16 x 16 пикселей. Вы можете предоставить центральные изображения следующих размеров:

• 256×256 пикселей при 1x, 512×512 пикселей при 2x
• 128×128 пикселей при 1x, 256×256 пикселей при 2x
• 32×32 пикселей при 1x, 64×64 пикселей при 2x
• 16×16 пикселей при 1x, 32×32 пикселей при 2x

Определите поле, которое составляет около 10% холста изображения и держит большую часть изображения внутри него. Хотя части изображения могут выходить за это поле для оптического выравнивания, лучше всего, когда изображение занимает около 80% холста изображения. Например, большая часть центрального изображения на холсте размером 256 x 256 пикселей поместится в области размером 205 x 205 пикселей.

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