Размер иконки в пикселях

Содержание

Полное (я надеюсь) руководство по созданию набора плоских иконок

Размер иконки в пикселях

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

Устанавливайте начальные и конечные точки диагоналей в соответствии с сеткой. Диагонали с углами 45°, 30° и 60° выглядят четче, чем диагонали в нестандартными углами (к примеру, 13.7° или 81°).

3. Придерживайтесь определенной детализации

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

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

4. Следите за размерами промежутков

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

Для контурных иконок, минимальный размер промежутка должен равняться толщине линии. Линии нужно либо явно отделить, либо аккуратно соединить — почти соединенных линий быть не должно.

5. Уберите повторяющиеся детали

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

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

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

6. Выберите единый стиль и придерживайтесь его

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

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

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

7. Используйте размеры, кратные двум

В большинстве интерфейсов используется 8-пиксельная сетка и 12-колоночный лейаут, поскольку они более гибкие, чем те, что построены на десятичных размерах. 12 можно разделить на 2,3,4 и 6. Поэтому 24-х и 48-пиксельные размеры иконок уже стали стандартом. Такие иконки при необходимости легко можно масштабировать.

8. Следите за точностью и чистотой силуэтов

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

Та же история с бесящими размерами: “8.999 px” или “100.001 px”. Если расставить опорные точки правильно, края иконки будут четкими. Если впоследствии вам придется объединять фигуры, у вас не будет лишних опорных точек и пробелов.

9. Очищайте SVG-файлы от мусора

Многие редакторы (например, Sketch) сохраняют SVG-файлы с артефактами — ненужными группами, цветовыми слоями и масками. Давайте посмотрим. В Sketch все выглядит хорошо:

Открываем SVG в другом редакторе (например, в Adobe Illustrator) и видим пустые слои, ненужные группы и даже маски. Из-за этих лишних штук может быть куча проблем — например, при создании шрифтовых иконок или при добавлении SVG на веб-страницу.

Весь этот мусор нужно удалить.

Вы увидите, что у SVG из Sketch (picture.svg) и SVG, отредактированной в иллюстраторе (picture_new.svg), будут разные превьюшки в файловом менеджере.

Если у вас есть идеи, о чем еще можно рассказать в этом руководстве, напишите мне. Давайте сделаем этот материал полнее. Если какое-то правило сломало у вас в дизайне что-то важное, его можно пропустить.

Пишите мне где угодно: Dribbble, Behance, SlideShare, Instagram.

“,”author”:”Nancy Pong”,”date_published”:”2020-05-03T20:31:23.935Z”,”lead_image_url”:”https://miro.medium.com/max/1000/0*Q4-VFvd9oZVu0aD1.”,”dek”:null,”next_page_url”:null,”url”:”https://medium.com/%D0%B8%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8/%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%8F-%D0%BD%D0%B0%D0%B4%D0%B5%D1%8E%D1%81%D1%8C-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%BF%D0%BE-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8E-%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B0-%D0%BF%D0%BB%D0%BE%D1%81%D0%BA%D0%B8%D1%85-%D0%B8%D0%BA%D0%BE%D0%BD%D0%BE%D0%BA-7042c0cbd1e9″,”domain”:”medium.com”,”excerpt”:”Для ботанов, которые прочли мою статью по визуальному весу и оптическому выравниванию. Минимум слов, максимум картинок.”,”word_count”:594,”direction”:”ltr”,”total_pages”:1,”rendered_pages”:1}

Источник: https://medium.com/%D0%B8%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8/%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%8F-%D0%BD%D0%B0%D0%B4%D0%B5%D1%8E%D1%81%D1%8C-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%BF%D0%BE-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8E-%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B0-%D0%BF%D0%BB%D0%BE%D1%81%D0%BA%D0%B8%D1%85-%D0%B8%D0%BA%D0%BE%D0%BD%D0%BE%D0%BA-7042c0cbd1e9

Выбираем правильный размер иконок

Размер иконки в пикселях

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

Windows16×16, 24×24, 32×32, 48×48, 256×256
Mac OS X16×16, 32×32, 64×64, 128×128, 256×256, 512×512, 1024×1024
Linux16×16, 24×24, 48×48, and 96×96
iOS 629×29, 50×50, 57×57, 58×58, 72×72, 100×100, 114×114, 144×144, 1024×1024
iOS 729×29, 40×40, 58×58, 60×60, 76×76, 80×80, 120×120, 152×152, 1024×1024
Android36×36, 48×48, 72×72, 96×96, 512×512
Windows Phone62×62, 99×99, 173×173, 200×200

Иконки должны быть в формате .ico.
Полный набор должен включать следующие размеры:

  • 16×16
  • 32×32
  • 48×48
  • 256×256

Иконки для Windows 8 (Metro Design)

  • Иконка приложения 30х30, 50×50, 150×150
  • Иконки панели инструментов 26х26

Необходимые размеры: 16×16, 24×24, 32×32.
Помните, иконки должны быть плоскими даже в максимальном размере 32×32.

Необходимые размеры: 32×32 и 48×48

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

  • 1024×1024
  • 512×512
  • 256×256
  • 128×128
  • 64×64
  • 32×32
  • 16×16

оздавайте иконки в стандартном и высоком разрешении (для мониторов с «Ретина» дисплеем). Необходимо подготовить два размера иконок:

Сохраняйте иконки в формате PNG.

Создавайте иконки в трех размерах:

  • 16×16
  • 18×18
  • 32×32 пиксела (если используете PDF)

Если вы сохраните иконки для бокового меню в формате PDF, что рекомендуется компаниемй Apple, OS X автоматически изменит размер вашей иконки для мониторов высокого разрешения. Если же вы сохраняете иконки в формате PNG, необходимо подготовить следующие размеры:

  • 16×16
  • 16×16@2x
  • 18×18
  • 18×18@2x
  • 32×32
  • 32×32@2x

В Linux используются трехмерные иконки.

Жирным выделен основной размер для каждого типа иконок.

Объект и документ24×24,48×48, and 96×96
Иконка приложения24×24,48×48
Панель инструментов24×24,48×48
Меню16×16
ОписаниеСтандартное разрешениеВысокое разрешение (Ретина дисплей)
Иконка приложения57×57114×114
Настройки29×2958×58
Поиск29×2958×58
Иконка приложения для интернет магазина Apple512×5121024×1024

iPad

ОписаниеСтандартное разрешениеВысокое разрешение (Ретина дисплей)
Иконка приложения72×72144×144
Настройки29×2958×58
Поиск100×10050×50
Иконка приложения для интернет магазина Apple512×5121024×1024
ОписаниеРазмер иконки
Иконка приложения120×120
Настройки58×58
Поиск80×80
Иконка приложения для интернет магазина Apple1024×1024

Панель действий

Самое высокое разрешение (xhdpi)96×96
Очень высокое разрешение (xhdpi)64×64
Высокое разрешение (hdpi)48×48
Среднее разрешение (mdpi)36×36

  Минуточку внимания: советуем брать плоские иконки в нашем новом проекте Icons8. Их 35000 и ежедневно появляются новые.

Необходимые икнки в пакете XAPРазмер иконки
Иконка приложения62×62
Плитка под иконкой приложения173×173

Иконки для интернет магазина Windows

IconSize
Иконка приложения для мобильного интернет магазина Windows (маленькая)99×99
Иконка приложения для мобильного интернет магазина Windows (маленькая)173×173
Иконка приложения для настольного интернет магазина Windows200×200

Источник: https://www.visualpharm.ru/articles/icon_sizes.html

Подробное руководство по фавикону для сайта

Размер иконки в пикселях

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

Что такое фавикон

Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

Значок отображается:

  • браузером на открытой вкладке и в закладках рядом с URL сайта;
  • в качестве ярлыка на смартфоне, если пользователь вынесет сайт на рабочий стол;
  • в поисковой выдаче Яндекса около заголовка на сниппете сайта.

Сайты с фавиконами в выдаче Яндекса

В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.

Фавиконки в выдаче Google (тест)

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Зачем нужен фавикон

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

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

Сайт без фавикона в выдаче среди прочих

  • С фавиконом сайт запоминается лучше

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

Логотип компании в фавиконе

  • Упрощает поиск нужного сайта

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

Закладки в Google Chrome

  • Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at http://localhost:8383/favicon.ico

Какую картинку выбрать для фавикона

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

Фавикон с чашкой для сайта о кофе выглядит гармоничнее

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

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

Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.

Как создать favicon для сайта

Есть три самых распространенных способа:

  1. Специальный плагин для Photoshop
    Позволяет работать этому популярному редактору изображений с форматом ico.
  2. Специальные программы для изготовления фавиконов
    Они специально «заточены» для изготовления иконок для сайта.
  3. Онлайн генератор favicon
    Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

Панель бесплатного генератора фавикона

Как установить фавикон на сайт

  1. Создайте картинку для фавикона с именем favicon.ico.
  2. Готовый файл нужно сохранить в корневом каталоге сайта. 
  3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению  https://sitename.ru/favicon.ico.

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

  4. Добавьте ссылку на размещенный файл в HTML-код главной:

… …

Атрибут “rel” указывает на тип ресурса.

Большинство браузеров распознают “icon”, для Internet Explorer нужен “shortcut icon”.

… …

От формата файла зависит тип передаваемых данных. Для ICO это “image/x-icon” или “image/vnd.microsoft.icon”, для PNG — “image/png” и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=”apple-touch-icon”. 

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Как установить разные favicon для отдельных страниц

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

Фавиконы на разных разделах одного сайта

Как установить разные фавиконки разделам сайта:

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

Размеры фавиконов для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

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

Фавиконы сайтов на экране смартфона

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

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

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

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Пример кода:

{ “name”: “%title%”, “icons”: [ { “src”: “\/android-chrome-36×36.png”, “sizes”: “36×36”, “type”: “image\/png”, “density”: “0.75” }, { “src”: “\/android-chrome-48×48.png”, “sizes”: “48×48”, “type”: “image\/png”, “density”: “1.0” }, { “src”: “\/android-chrome-72×72.png”, “sizes”: “72×72”, “type”: “image\/png”, “density”: “1.5” }, { “src”: “\/android-chrome-96×96.png”, “sizes”: “96×96”, “type”: “image\/png”, “density”: “2.0” }, { “src”: “\/android-chrome-144×144.png”, “sizes”: “144×144”, “type”: “image\/png”, “density”: “3.0” }, { “src”: “\/android-chrome-192×192.png”, “sizes”: “192×192”, “type”: “image\/png”, “density”: “4.0” } ] }

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=”mask-icon”.

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

#da532c

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

Теги поста или какие разделы почитать еще:

  • Инструменты
  • Работа сайта
  • Яндекс

Источник: https://pr-cy.ru/news/p/7346-rukovodstvo-po-favikonu-dlya-sayta

Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?

Размер иконки в пикселях

От переводчика. Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить.

Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

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

Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.

С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?

Устроим викторину!

Каков основной файл фавикона?

Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.

Вопрос: Какого размера должен быть favicon.ico?

A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64×64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
D: Ни один из перечисленных.

Ответ: D.

Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.

Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:
16х16 на вкладке Chrome. Пока всё хорошо. Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.
16х16 в панели задач.
16х16 на рабочем столе. Не хорошо. Когда иконка содержит несколько изображений, результат гораздо лучше.
16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.
16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.

Вопрос: Каково назначение favicon.png?

На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом. Что это на самом деле?

A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?

B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.

Ответ: D.

Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:
Так что мы должны объявлять? Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.

favicon.ico — для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.

Вопрос: Какой формат необходим для поддержки мобильных платформ?

Согласно SmartInsights, больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?

A: favicon.ico. Это работало 15 лет назад, работает и сегодня.

B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.

Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.

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

Вопрос: Какого размера должны быть PNG иконки?

A: 96х96 для Google TV B: 196х196 для Android Chrome C: 228х228 для Opera Coast

D: Все перечисленные

Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.

Вопрос: Каков размер Apple Touch icon?

Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.

Ответ: Вплоть до 180х180.

После появления первого iPhone, было 3 важных релиза:

  • iPad. С экраном гораздо большего размера.
  • Retina-экраны. С удвоеной плотностью пикселов.
  • iOS7. Плоский дизайн отличается на iPhone/iPad.

Всего есть 9 комбинаций.

Устройство Экран Версия iOS Размер иконки
iPhoneClassic6 и ниже57×57
760×60
Retina6 и ниже114×114
7120×120
6 Plus8 и выше180×180
iPadClassic6 и ниже72×72
776×76
Retina6 и ниже144×144
7152×152

Старая 57х57 Apple Touch icon на блестящем Retina iPad. Мутно.
Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.

Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно.

Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.

Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?

A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации, так что любое iOS устройство всё равно их надет.
D: Нет, но…

Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.

Вопрос: Как объявить плитку для планшетов на Windows 8?

A: Планшет на Windows 8? Что это такое?
B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage.
D: browserconfig.xml.

Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.

Объявление для Windows 8.0 выглядит как-то так: Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например: #2b5797 Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
Плитки сайтов в Windows 8.

A: 150х150. Вы не умеете читать?
B: Иной.

Ответ: B, 270х270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.

Поздравляем, вы закончили викторину! Как вы это сделали?

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

Но старые привычки сохраняются и могут привести к абсурдным ситуациям.

Мы тратим дни на аккуратный отзывчивый дизайн и добавляем только 57х57 Apple Touch icon, подходящий только для старых устройств, которыми сегодня уже почти никто не пользуется.

  • favicon
  • favicon.ico
  • apple touch icon
  • tile icon
  • web-разработка
  • фавиконы

Хабы:

  • Разработка веб-сайтов
  • Разработка мобильных приложений
  • HTML
  • 14 ноября 2014 в 16:46
  • 20 декабря 2013 в 19:43
  • 2 июля 2012 в 23:58

Источник: https://habr.com/ru/post/260777/

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

Размер иконки в пикселях

О чем статья:

  • Что такое фавикон и каких форматов он бывает
  • Какие требования предъявляют разные платформы
  • С помощью каких инструментов можно создать иконку
  • Можно ли не создавать фавикон и как это повлияет на выдачу

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

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

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

Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках. 

Формат и стили фавиконов

Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png – в остальных операционных системах и платформах. .

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

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

https://www.youtube.com/watch?v=ZWbwwfOrd4Q

С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются.. 

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

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

Фавиконки отображаются на пустой стартовой странице Google

Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.

Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.

Так выглядят фавиконы в мобильной версии браузера Google Chrome

Andriod, Chrome и Opera

Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png. 

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

Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге таким образом: В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.

ico,

Декстоп (png)

Apple

Safari

Андроид

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

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

  1. Формат.ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.
  2. Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.
  3. Создавайте сразу две версии фавиконов – с прозрачным и непрозрачным фоном. Сегодня иконки отображаются на разных устройствах, разных платформах и в разных контекстах. Вы не всегда сможете спрогнозировать, как именно значок вашего сайта будет виден у пользователя.

  4. Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon.cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.

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

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

  7. Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

  8. Наличие favicon может повлиять на рейтинг сайта. Яндекс.Вебмастер фиксирует отсутствие иконки, как ошибку на сайте, а технические ошибки влияют на место в выдаче. 

Материал подготовила Светлана Сирвида-Льорентэ.

Источник: https://www.ashmanov.com/education/articles/favikon-dlya-sajta/

Какие размеры значков должны включать значок приложения Windows?

Размер иконки в пикселях

У меня есть приложение Windows, которое будет работать в Windows XP и новее (т. е. Vista/7). Согласно Vista UI Guidelines, стандартные размеры 16×16, 32×32, 48×48, 256×256 (стандартные размеры XP не включают значок 256×256). В дополнение к этим размерам у меня также есть 96×96 и 128×128 (и может создать больше).

какой из этих размеров значков Я должен включить? Будет ли оболочка фактически использовать “нестандартные” размеры, или я просто раздую заявление?

Мне потребовалось некоторое время, чтобы проверить его в деталях. Я создал икону, изображения имеют размеры 16, 24, 32, 40, 48, 64, 96, 128 и 256. Затем я проверил, какое изображение показано. Все это было сделано с нормальным 96dpi. При использовании большего DPI могут использоваться большие размеры (только немного проверено в Windows 7). Результаты:

Windows XP:

  • вид проводника :
    • Детали / Список: 16
    • иконки: 32
    • плитка / Миниатюры: 48
  • щелкните правой кнопкой мыши – > Свойства / выбор нового значка: 32
  • область быстрого запуска: 16
  • рабочий стол: 32

Windows 7:

  • вид проводника :
    • детали / список / маленькие символы: 16
    • все остальные параметры: 256 (при необходимости изменить размер)
  • щелкните правой кнопкой мыши – > Свойства / выбор нового значка: 32
  • приперся панель задач: 32
    • правой кнопкой мыши-меню: 16
  • рабочий стол:
    • маленькие символы: 32
    • средние символы: 48
    • большие символы: 256 (при необходимости изменить размер)
    • масштабирование с помощью Ctrl+колесо мыши: 16, 32, 48, 256

Среда Выполнения Windows: (отсюда)

  • основной плитки: 150х150, значение “310×150” (широкий версия)
  • небольшой логотип: 30х30
  • значок (для экрана блокировки): 24×24, монохроматический
  • Splashscreen: 620×300
  • магазин: 50×50

Итак, результат: Windows XP использует значки 16, 32, 48-размера, в то время как Windows 7 (и, предположительно, Vista) также использует значки 256-размера. все другие промежуточные размеры значков игнорируются (они мая использоваться в некоторой области, которую я не проверял).

Я также проверил в Windows 7, что произойдет, если размеры значков отсутствуют:

генерируются недостающие размеры (очевидно). При размерах 16, 32 и 48, если один отсутствует, предпочтительнее масштабирование. Поэтому, если у нас есть значки размером 16 и 48, значок 32 создается из значка 48. значок 256 используется только для них, если нет других размеров! Итак, если значки имеют размер 16 и 256, другие размеры масштабируются от значка 16!

кроме того, если значок 256 отсутствует, (возможно, сгенерированный) Значок 48 используется, но больше не изменяется. Таким образом, у нас есть (возможно, большая) пустая область со значком 48 в середине.

обратите внимание, что размер значка рабочего стола по умолчанию в XP был 32×32, а в Windows 7-48×48.как следствие, для Windows 7 относительно важно иметь значок 48. в противном случае он масштабируется от меньшего значка, который может выглядеть довольно уродливо.

просто примечание о совместимости Windows XP: если вы повторно используете значок в качестве значка окна, затем обратите внимание, что это может привести к сбою приложения, если вы используете значок сжатого 256. Решение состоит в том, чтобы либо не сжимать значок, либо создать вторую версию без (сжатого) значка 256. См.здесь для получения дополнительной информации.

после некоторого тестирования со значком с 8, 16, 20, 24, 32, 40, 48, 64, 96, 128 и 256 пикселей (256 в PNG) в Windows 7:

  • при 100% разрешении: Explorer использует 16, 40, 48 и 256. Windows Photo Viewer использует 96. Краски использует 256.
  • при разрешении 125%: Explorer использует 20, 40 и 256. Windows Photo Viewer использует 96. Краски использует 256.
  • при разрешении 150%: Explorer использует 24, 48 и 256. Windows Photo Viewer использует 96. Краски использует 256.
  • при разрешении 200%: Explorer использует 40, 64, 96 и 256. Windows Photo Viewer использует 128. Краски использует 256.

таким образом, 8, 32 никогда не использовались (мне странно для 32) и 128 только Windows Photo Viewer с очень высоким экраном dpi, т. е. почти никогда не использовались.

Это означает, что ваш значок должен по крайней мере 16, 48 и 256 для Windows 7. Для поддержки новых экранов с высоким разрешением необходимо предоставить 16, 20, 24, 40, 48, 64, 96, и 256. Для Windows 7, Все изображения можно обжать используя PNG но для обратной совместимости с Windows XP, 16 до 48 не должны быть обжаты.

на Microsoft UX значок руководство говорит:

“значки приложений и элементы панели управления: полный набор включает 16×16, 32×32, 48×48 и 256×256 (кодовые шкалы между 32 и 256).”

для меня это означает (но, к сожалению, явно не указано), что вы должны предоставить эти 4 размера.

дополнительные сведения о цветовых форматах, которые вы также можете найти полезными:

  • “файлы значков также требуют 8-разрядных и 4-разрядных версий палитры, чтобы поддерживать настройку по умолчанию на удаленном рабочем столе.”

  • ” должна быть включена только 32-разрядная копия пиксельного изображения 256×256, и только пиксельное изображение 256×256 должно быть сжато [как PNG], чтобы уменьшить размер файла.”

Не 96×96, вместо этого используйте 64×64. Я обычно использую:

  • 16-кнопка статус / заголовок
  • 32 – значок рабочего стола
  • 48-вид папки
  • 64/128 – дополнительные размеры

256 работает как на XP, Однако старые компиляторы ресурсов иногда жаловались на “ошибки памяти”.

в случае Windows 10 это не совсем точно, на самом деле ни один из ответов на stackoverflow не был, я обнаружил это, когда я пытался использовать пиксельную графику в качестве значка, и он был масштабирован, когда он не должен был(было легко увидеть в этом случае причину интерполяции и сглаживания окон), даже ты я использовал размеры из этого поста.

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

Если вы хотите только резолюции:
16, 20, 24, 28, 30, 31, 32, 40, 42, 47, 48, 56, 60, 63, 84, 256
и вы должны использовать все значки PNG, и все, что вы кладете рядом с ними, не будет отображаться. Смотрите мой в должности почему.

с рекомендации Microsoft MSDN:

значки приложений и элементы панели управления: полный набор включает 16×16, 32×32, 48×48, и 256×256 (маштабы кода между 32 и 256). Этот.требуется формат файла ico. Для классического режима полный набор-16×16, 24×24, 32×32, 48×48 и 64×64.

таким образом, у нас уже есть стандартные рекомендуемые размеры:

  • 16 x 16,
  • 24 x 24,
  • 32 x 32,
  • 48 x 48,
  • 64 x 64,
  • 256 x 256.

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

  • 20 x 20,
  • 30 x 30,
  • 36 x 36,
  • 40 x 40,
  • 60 x 60,
  • 72 x 72,
  • 80 x 80,
  • 96 x 96,
  • 128 x 128,
  • 320 x 320,
  • 384 x 384,
  • 512 x 512.

Источник: https://askdev.ru/q/kakie-razmery-znachkov-dolzhny-vklyuchat-znachok-prilozheniya-windows-7563/

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.