Чтобы установить плагин с иконками «Material design icons» перейдите по ссылке, и нажмите на кнопку «Install» сверху, справа, как показано на скриншоте выше.

Чтобы активировать плагин, перейдите в ваш проект. Нажмите на меню слева и выберите пункт «Plagins» далее «Material design icons».

Чтобы вставить иконку в фигму с помощью плагина «Material design icons», просто выберите подходящую иконку и нажмите на неё левой клавишей мыши.

Из выпадающего списка слева вы можете выбирать один из нескольких стилей иконок:

• Classic — классические иконки для фигмы.
• Filled — иконки с заливкой.
• Outlines — иконки в виде линий.
• Rounded — иконки со скруглением.
• Sharp — иконки с острыми углами.
• Two tone — двухцветные иконки.

Справа вы можете выбирать размеры иконок. Просто выберите из списка подходящий размер. Также вы можете масштабировать иконки с помощью инструмента «Scale». Его можно выбрать сверху, слева, либо зажать клавишу «K».

Далее в плагине можно выбрать формат: SVG или PNG. В чем отличие этих двух форматов?

1. У PNG формата при увеличении появляются пиксели. У SVG пикселей нет. Их можно масштабировать до бесконечности, без потери качества. Поэтому рекомендую использовать именно SVG формат для ваших проектов.
2. SVG иконки вы можете перекрасить стандартным образом, а PNG нет.

Чтобы перекрасить SVG иконки выберите иконку и в панели справа (внизу надписи Fill) поменяйте её цвет. Для того, чтобы перекрасить иконку в формате PNG можно воспользоваться плагином «Color overlay».

Итак, в этом обзоре вы разобрались где брать классные иконки в фигме. Узнали о плагине, которые позволяет вставлять иконки буквально за пару кликов мыши.

P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

Автор статьи: Владимир Чернышов

Как создать favicon (фавикон) для сайта

О чем статья:

• Что такое фавикон и каких форматов он бывает

• Какие требования предъявляют разные платформы

• С помощью каких инструментов можно создать иконку

• Можно ли не создавать фавикон и как это повлияет на выдачу

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

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

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

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

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

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

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

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

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

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

Особенности фавиконов для разных платформ

Десктоп

Так выглядят фавиконы в мобильной версии браузера 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-странице в теге <head> таким образом:
<link rel=”manifest” href=”/site.webmanifest”>

В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.
Если вы подключили манифест, то можно сохранить сайт на экране устройства, как приложение. 

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

Mac OS и iOS Safari Web Clip

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

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.

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

Другие варианты 

Как создать?

Для создания фавикона используйте графические редакторы или специальные сервисы. 

Adobe Photoshop или Figma

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

Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки. 

Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.

Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.png и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.

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

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

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

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

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.

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

Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>

Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>

Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>

Safari — <link rel=”mask-icon” href=”icon.svg”>

Андроид — <link rel=»shortcut icon» href=»favicon.png»>

Иконки в устройствах 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. Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице.

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

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

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

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

Как сделать собственные иконки на компьютере с Виндовс

Здравствуйте. Скачать готовую картинку и сделать из неё иконку очень просто. Многие хотят сделать свою иконку из скриншота или фотографии.

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

А если ничего этого нет? Давайте попробуем..

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

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

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

Конечно вы знаете, но я всё же напомню, что скриншот можно сделать простым нажатием на клавишу Print Screen.

Предположим у меня на Рабочем столе есть папки Фото и Музыка. Я хочу сделать для них специальные иконки.

Я сам нарисовал пару иконок.

Самопальные иконки от Юртаева:

Иконки сделаны по этой инструкции. И вот по этой. Благодарю авторов.

Я сделаю обычный скриншот, нажал Print Screen. Компьютер сохранил в буфер обмена изображение экрана. Теперь нужно вставить это изображение в программу для редактирования изображений.

Такая программа есть на любом компьютере с Windows, это Paint. Открыть Paint можно по-разному. Можно просто нажать на клавишу Windows и начать печатать название приложения английскими буквами.

Программа нашлась, открываю её.

Чтобы вставить скриншот из буфера обмена, можно просто нажать на кнопку Вставить. Или нажать на стандартную комбинацию ставки Ctrl + V.

Скриншот вставлен. Разверну окно программы во весь экран.

Сначала используем способ, который рекомендуют в десятках роликов на Youtube.

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

Сохраняю нужный фрагмент нажимаю Файл навожу на Сохранить как сохранять промежуточные результаты будем формате .png выбираю вот этот пункт сохраним на Рабочий стол выбираю его здесь назвать заготовку можно по желанию например Иконки нажимаю Сохранить на Рабочем столе появилась заготовка для двух иконок Разворачиваю снова Paint выделяю первую иконку для этого нажимаю стрелку под кнопкой Выделить и выбираю Прямоугольную область выделяю с небольшим запасом на выделенном фрагменте правая клавиша Копировать теперь нужно создать новый файл нажимаю Файл Создать фон нужно сделать квадратным для этого нажимаю Файл Свойства в окне свойств изображения вожу вот так 256 на 256 нажимаю ОК правая клавиша Вставить располагаем иконку примерно посредине фона сохраняем аналогично в .png формате на Рабочем столе назову его Музыка сворачиваю Paint если присвоить такую картинку в качестве иконки папке то папка так и будет выглядеть с белым фоном мне кажется нужно избавиться от него это можно сделать сегодня на множестве сайтов в описании этого видео есть линк № 5 нажимаю на него здесь нажимаю кнопку Загрузить изображение выбираю мою подготовленную картинку на Рабочем столе нажимаю Открыть фон удаляется здесь автоматически мы уже видим результат шашечками в графических приложениях принято обозначать прозрачный фон мы можем сравнить результат с оригиналом в моем случае границы между картинкой и фоном довольно четкие поэтому фон удален хорошо если у вас получилось не очень то можно попробовать что-то изменить для этого нажимаю Редактировать а здесь есть вкладки Стереть и Восстановить если остались какие-то остатки фона можно попробовать их удалить для этого можно изменить размер кисти здесь его видно и при активной клавише Стереть кликать в тех местах где нужно удалить дополнительные фрагменты я восстановлю удаленное нажатием на эту закругленную стрелочку на этой вкладке можно наоборот восстановить то что автоматически удалил сайт например можно вернуть белый фон вот на это место можно увеличить картинку после редактирования можно скачать картинку прямо отсюда и здесь нажимаю Скачать изображение картинка скачалась теперь она без фона лежит в Загрузках Теперь нужно преобразовать нашу картинку в формат иконки в некоторых видео вам предложат сохранить в формате .bmp и поменять расширение на .ico я бы не советовал если ваша картинка имеет белый непрозрачный фон а со скриншотами это всегда так бывает то вы получите черную некрасивую обводку вокруг и иконки преобразовать любую картинку в формат иконки можно сейчас опять же на огромном количестве сайтов за несколько секунд один такой сайте есть в описании перехожу обратно на описание видео линк № 7 нажимаю здесь все довольно просто нажимаю на кнопку Выбор файла здесь нужно выбрать ту картинку которая без фона она лежит в Загрузках выбираю Загрузки вот моя картинка выделяю ее нажимаю Открыть рядом с кнопкой появилось название файла разрешений можно пометить несколько файл будет один он будет содержать в себе эти несколько разрешений я дополнительно отмечу 256 пикселей больше ничего настраивать не нужно просто нажимаю кнопку Convert готовая иконка скачалась в папку Загрузки сворачиваю браузер можно присвоить иконку папке для этого правый клик по нужной папке выбираю пункт Свойства здесь перехожу на вкладку Настройка и нажимаю на кнопку Сменить значок в открывшемся окне можно выбрать любой из стандартных системных значков чтобы выбрать нашу самодельную иконку нажимаю Обзор иконку мы скачали в папку Загрузки вот она выбираю её вот иконка со стандартным иконочным расширением выделяю и нажимаю Открыть в этом окне нажимаю ОК и в этом еще раз ОК теперь папка имеет вот такой индивидуальный вид в общем не плохо но возни довольно много не правда ли можно же сделать как-то быстрее давайте попробуем Сегодня в сети есть множество сервисов позволяющих легко работать с изображениями один из таких сайтов photopea.com в описании этого видео есть линк № 1 нажимаю это окошко с описанием можно закрыть крестиком или через некоторое время оно закрывается само по интерфейсу и возможностям это онлайн предложение похоже на Photoshop оно позволяет работать не только с обычными картинками но с файлами формата Photoshop обычный пользователь найдет в приложении все что необходимо при этом приложение бесплатно только реклама с правой стороны используя это онлайн-приложение мы можем полноценно работать со скриншотом наших иконок давайте развернём окно браузера на всю ширину я загружу сюда картинку с обеими и иконками для этого нажимаю Файл Открыть в проводнике открываю Рабочий стол компьютера и выбираю картинку с двумя иконками нажимаю Открыть картинка с иконками загружена чтобы вырезать из картинки фрагмент используется вот эта кнопка приложение Photopea позволяет работать с разными выделениями делаю правый клик по кнопке здесь есть обычное прямоугольное выделение выделение форме эллипса или окружности а также несколько видов лассо я выберу сейчас прямоугольное выделение действую так же как и в Paint левый клик и выделяю нужный кусок с небольшими отступами перетаскиваю мышь удерживая нажатой левую клавишу так эту иконку мы уже сделали давайте сделаем вторую просто выделяю другой фрагмент перетащил отпускаю появился контур выделения если навести курсор внутрь контура то на курсоре появляются стрелочки мы можем кликать внутри и перетаскивать контур куда нужно если нужно чуть-чуть передвинуть попиксельно то просто нажимаем соответствующие клавиши управления курсором удалить контур можно кликом снаружи или нажатием на комбинацию Ctrl + D это стандартная Photoshop комбинация также можно просто отменить последнее действие нажав Ctrl + Z эта комбинация работает практически везде итак вернемся к будущими иконкам я выделил вторую иконку теперь нужно скопировать то что выделено просто в меню нажимаю Редактирование и выбираю Копировать можно также использовать стандартную комбинацию Ctrl + C картинка скопирована теперь ее нужно куда-то вставить приложение Photopea позволяет работать с несколькими файлами одновременно для того чтобы начать работу с еще одним файлом нажимаю Файл Новый открывается окно под названием Новый проект обратите внимание вот на этот размер он соответствует размеру картинки которую я скопировал в буфер обмена здесь лучше задать стандартный размер который мы уже использовали укажу ширину 256 и высоту тоже можно также задать цвет фона я выберу прозрачный нажимаю Создать то что открылось перед нами в графических приложениях принято называть холст шашечки как я уже сказал говорят о том что это прозрачный фон вставляю скопированную картинку можно опять через Меню Редактирование или просто нажать Ctrl + V здесь придется разрешить сайту Photopea читать наш буфер обмена нажимаю Разрешить картинка вставлена ровно по центру с правой стороны мы видим боковую панель здесь есть вкладка Слои мы видим наш слой и напротив значок замка слой заблокирован чтобы работать со слоем можно просто кликнуть по замку теперь можно например передвинуть слой для этого выбираю инструмент Перемещения и передвигаю слой вот эти направляющие показывают центр холста когда появляется перекрестие значит центр картинки находится по центру холста картинка у меня большая поэтому мне нужно уменьшить размер это можно сделать так я перетащил чтобы был доступен край картинки теперь нажимаю вот на эту кнопку Контроль трансформации и можно изменить размер если сделать это так то картинка искажается отменить неправильное действие можно нажав Редактирование Шаг назад если сначала нажать и удерживать клавишу Shift а затем менять размер то он меняется пропорционально без искажений я нажимаю Shift и перетаскиваю за уголок вот так будет неплохо я показал несколько основных простейших приемов работы со слоем для нашей иконки достаточно удалить белый фон и сохранить ее с расширением .ico все это мы сделаем прямо в этом приложении для удаления фона делаю правый клик по кнопке Выбор объекта и выбираю Волшебную палочку чтобы аккуратнее работать с фоном можно визуально увеличить то что мы видим для этого нажимаю Control + я уже выбрал волшебную палочку теперь просто кликаю по тому фону который хочу удалить появились контуры выделения чтобы удалить выделенное нажимаю клавишу Delete при этом удален только фон вокруг картинки те фрагменты белого которые есть на самой картинке остались и это правильно при желании их можно удалить отдельно давайте я удалю вот этот круг на месте объектива просто кликаю снова сюда и нажимаю Delete можно сохранять иконку для этого нажимаю Файл навожу на Экспортировать как здесь есть несколько форматов например .png или .jpeg если навести на пункт Больше то появляется еще несколько форматов среди них есть формат .ico выбираю его открылось окно Сохранить для интернета здесь виден формат сохраняемого файла и его размеры оставляем все как есть и нажимаем Сохранить готовая иконка скачалась можно присвоить её моей папке мы это уже делали пояснять нет необходимости вот моя иконка получилась вот такая иконка думаю вы согласитесь, что если опустить время на пояснения то этот способ быстрее Давайте вернемся на сайт Photopea мы можем на одну картинку или иконку добавить нескольких готовых слоев мне нужно скопировать эту картинку для этого делаю правый клик по этой кнопке выбирая Прямоугольное выделение выделяю то что мне необходимо Редактирование Копировать теперь создаю Новый проект Файл — Новый здесь оставлю те же самые 256 пикселей фон оставляю прозрачный нажимаю Создать сделаю немножко поближе картинку Control + вставляю то что скопировано в буфер обмена Редактирование — Вставить теперь переходим на первую вкладку сначала удалю белый фон нажимаю на Волшебную палочку делаю клик нажимаю Delete теперь выделяем фрагмент который мне нужен Прямоугольное выделение Редактирование — Копировать перемещаюсь на последний проект и вставляю сюда то что скопировал теперь нужно сделать изображение поменьше маркеры уже видно достаточно нажать на Shift и перетаскивать к нужному размеру теперь изменю размер фото это для этого нужно выделить слой снять замок и снова с Shift-ом уменьшаю картинку чтобы работать со слоем можно выделять его прямо здесь ну вот так будет неплохо можно сохранять нажимаю Файл — Экспортировать как — Больше иконка здесь оставляю все без изменений нажимаю Сохранить сворачиваю окно присваиваю скачанную иконку как видите мы довольно быстро в приложении объединили два изображения и присвоили их качестве иконки Иногда пользователи хотят сделать иконку не из скриншота а из фотографии в принципе приемы работы с фотографией мало отличаются но обычное фото из мобильника имеет довольно большой размер я покажу только один прием работы с круглым выделением именно о таком выделении многие задают вопросы у меня есть фотографии моих кошек поэтому будем тренироваться на кошках открывая сайт Photopea нажимая Файл Открыть фотка лежит у меня в папке Изображения открываю например вот эту картинка загружалась чуть дольше чтобы вырезать круг или эллипс делаю правый клик по этой кнопке выбираю Выделением в форме эллипса эллипс выделяется очень просто кликнули потащили отпустили кликнув внутри эллипса можно его подвигать направляющие подсказывают центр холста снимаю выделение кликом снаружи чтобы выделить идеальную окружность сначала нажимаю Shift и затем уже кликаю растягиваю на нужный диаметр размер подсказывет, что круг действительно идеальный точнее окружность аналогично можно подвигать дальше можно действовать по тем правилам которые мы рассмотрели ранее а можно сделать так: у нас сейчас выделено то что внутри окружности если мы хотим удалить все остальное то можно инвертировать выделение правый клик по выделению в контекстном меню есть пункт Инвертировать выбираю его появилось прямоугольное выделение сейчас выделено то что за пределами окружности чтобы удалить это просто нажимаю кнопку Delete остался только нужный фрагмент можно убрать лишний фон для этого нажимаю в меню Изображения выбирают Тримминг кликаю за пределами выделение снято с этим слоем можно много чего сделать: эффекты, тени, комбинировать с другими слоями но об этом поговорим в другом видео, если вы захотите, а сейчас просто сохраняю для этого нажимаю Файл — Экспортировать как если нам нужна иконка то лучше сразу сохранить в нужном формате навожу на Больше и выбираю уже знакомой формат появилось сообщение что максимальный размер иконок 256 на 256 вручную сделаем ресайз готово формат ico размер 256 на 256 пикселей вес у этой иконки будет довольно большой почти 100 Килобайт нажимаю Сохранить вот наша иконка присваивать мы уже знаем как Я покажу как вернуть вид иконки в первоначальное состояние правый клик по нужной иконке выбираю Свойства Настройка Сменить значок здесь есть кнопка Восстановить значение по умолчанию нажимаю нажимаю ОК, готово иконка папки теперь стандартная в приложении Photopea есть Русский язык если у вас она вдруг загрузилась на другом языке то включить Русский просто рассмотрим на примере Английского слева от красной кнопки Аккаунт нажимаю на кнопку в английском варианте это More навожу на Language и выбираю Русский теперь приложение на Русском если вы работаете в масштабе окна где текст довольно мелкий то кнопки в левой панели управления будут отличаться и я уменьшу масштаб к примеру у вас будет отдельная кнопка с Прямоугольным выделением и Выделением форме эллипса и отдельная кнопка для выделения лассо разобраться будет нетрудно если потеряли какую-то кнопку попробуйте поиграть масштабом Онлайн приложение Photopea имеет много возможностей мы рассмотрели крошечную их часть к примеру в приложении можно работать в любой операционной системе Windows, Linux, Mac OS, даже на планшете если хотите продолжить знакомство с приложением поддержите это видео своими замечательными лайками и комментами за неделю видео наберёт 5000 лайков продолжим серию Чтобы не пропустить новое видео не забудьте подписаться на канал и включить колокольчик если это видео было вам полезно ставьте лайки и делитесь видео с друзьями Спасибо! Я благодарю вас за просмотры, лайки, комментарии отдельная благодарность тем кто поддерживает мой канал и подписывается на дополнительный канал Спасибо! Всем зрителям желаю здоровья! Меня зовут Евгений Юртаев До встречи!

Иконка PNG изображений | Векторные и PSD файлы

1200 * 1200

1200 * 1200

3D как значок сердца

5000 * 5000

вектор значок дома

1024 * 1024

Иконок изображений — бесплатная загрузка в векторе, PNG, SVG, GIF

Иконки

Фото

Музыка

Иллюстрации

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Изображение

+ Коллекция

Нет изображения

+ Коллекция

Нет изображения

+ Коллекция

Нет изображения

+ Коллекция

Нет изображения

+ Коллекция

Редактировать изображение

+ Коллекция

Нет изображения

+ Коллекция

Редактировать изображение

+ Коллекция

Редактировать изображение

+ Коллекция

Нет изображения

+ Коллекция

Нет изображения

+ Коллекция

Редактировать изображение

+ Коллекция

Файл изображения

+ Коллекция

Графический документ

+ Коллекция

Редактировать изображение

+ Коллекция

Файл изображения

+ Коллекция

Графический документ

+ Коллекция

Редактировать изображение

+ Коллекция

Галерея

+ Коллекция

Файл изображения

+ Коллекция

Редактировать изображение

+ Коллекция

Файл изображения

+ Коллекция

Галерея

+ Коллекция

Нет изображения

+ Коллекция

Файл изображения

+ Коллекция

Галерея

+ Коллекция

Файл изображения

+ Коллекция

Файл изображения

+ Коллекция

Графический документ

+ Коллекция

Галерея

+ Коллекция

Где найти бесплатные значки для загрузки

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

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

Но возможности на этом не заканчиваются.

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

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

Если сайт требует указания авторства, вы можете добавить ссылку обратно в нижний колонтитул или на страницу «Обо мне».

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

01.Icons8

02. Журнал Smashing

03. Freepik

04. Плоский значок

05. Behance

06. Значок капитана

, красивый, вектор , значки Captain Icon доступны в форматах EPS, PSD, PNG, SVG и веб-шрифтов. Вы можете настроить все, от цвета до размера. Требуется указание авторства, и вы можете использовать эти значки в личных и коммерческих проектах.

07.Хорошая штука, не ерунда

08. DeviantArt

09. Dribbble

10. Iconfinder

11. GraphicBurger

12.702

3

3

na 9703

na Designbeep 14. Dafont

15. Бесплатные подарки для дизайнеров

16. Freebiesbug

17. Vecteezy

18. PixelsMarket

19.GraphicsFuel

20. Fribly

21. Icojam

22. Icon shock

23. Автор CSS

24. Creative tail

25. Все-скачать бесплатно

26. Ego icons

27. AlienValley

28. Dreamstale

29. 1001 бесплатная загрузка

30. Pixeden

NounProject

32. Iconmonstr

33. Dryicons

34. Глификоны

35. MrIcons

36000 9703

Endypo Приложение IcoMoon

39. Fontello

40. IconArchive

41. Чернила кальмара

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

Без сомнения, создание некоторых элементов с нуля — болезненная задача. Так что вы можете рассмотреть возможность использования огромных ресурсов, свободно доступных в Интернете. Ниже мы составили список из 20 лучших веб-сайтов для загрузки бесплатных иконок, чтобы упростить вам задачу.

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

1. Flaticon

Flaticon имеет самую большую базу данных бесплатных векторных иконок в Интернете с более чем 70 тысячами иконок на их сайте. Иконки на Flaticon представлены в форматах SVG, EPS, PSD и PNG разных размеров по вашему усмотрению.

Помимо бесплатных иконок, Flaticon имеет несколько интересных функций, таких как генератор шрифтов и плагин для Adobe Photoshop, Illustrator или After Effects, позволяющий получить прямой доступ к множеству бесплатных иконок в своей базе данных.Большинство значков доступны для бесплатного использования по лицензии CC (что означает, что требуется указание авторства).

2. IconArchive

IconArchive предназначен для упрощения работы профессиональных веб-разработчиков и графических дизайнеров. Благодаря функции профессионального поиска значков на основе тегов он предоставляет более 500 000 значков, поддерживающих различные операционные системы, такие как Windows, Linux и Mac.

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

3. 1001 Free Downloads

1001 Free Downloads содержит тысячи бесплатных векторов, градиентов, PSD, шрифтов, фотографий и многое другое, предоставляемое бесплатно в соответствии с вашими дизайнерскими потребностями. Они собрали грандиозную коллекцию привлекательной бесплатной графики, обыскивающей всю сеть в поисках лучших, и обеспечивающую интуитивно понятную функцию поиска.

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

4. FreePik

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

5. DeviantArt

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

6. SoftIcons

SoftIcons — еще один полезный веб-сайт для разработчиков веб-сайтов и приложений, позволяющий бесплатно загружать значки. Его база данных росла в геометрической прогрессии с каждым днем ​​с момента ее запуска в 2010 году.
Вы можете искать значки и наборы значков в различных категориях и использовать их в личных или коммерческих целях по различным лицензиям.

7. IconFinder

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

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

8. Premiumpixels

Premiumpixels — это рай для различных дизайнерских ресурсов, включая сотни бесплатных иконок. Он был основан британским дизайнером Орманом Кларком, который изначально начал его, чтобы поделиться своими дизайнерскими материалами. Теперь он превратился в большую коллекцию макетов, иконок и файлов PSD.

9. Iconmonstr

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

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

10. Iconmoon

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

11. IconSeeker

IconSeeker предназначен для веб-дизайнеров и разработчиков, ищущих разнообразия. Имея более 50 000 иконок, доступных для бесплатной загрузки в форматах ICNS, ICO и PNG, он поддерживает различные операционные системы, такие как Windows, Linux и Mac.

Если вы веб-дизайнер, ищущий красивые иконки для своего проекта, IconSeeker — подходящее место, куда можно зайти.

12. IconPng

IconPng может удовлетворить ваши потребности в иконках с его коллекцией из более чем 60 000 бесплатных иконок. Вы можете настроить поиск значков по цвету, размеру, категории и т. Д., Что облегчит вам поиск нужного значка.

13. Fontello

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

14. Найти значки

Найти значки содержит более 450 000 значков. Это означает, что вы можете быть уверены, что найдете любой нужный вам значок и, конечно же, бесплатно — универсальное решение для всех ваших потребностей в значках.

Для такой огромной коллекции вам понадобится удобная функция поиска с различными параметрами фильтрации, и Find Icons предоставляет именно это. Он позволяет фильтровать результаты поиска по размеру, стилю, цвету, лицензии и т. Д., Что упрощает поиск значков.

15. Iconspedia

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

16. Mr. Icons

Mr. Icons — это поисковая система значков, которая предоставляет вам бесплатные значки в форматах PNG и ICO. Он поддерживает все популярные операционные системы, включая Chrome, Windows, Linux и Mac. Так что это подходящее место, если вы ищете бесплатные значки, чтобы украсить свои веб-сайты или настроить свой рабочий стол.

17. VeryIcon

VeryIcon также предоставляет бесплатные значки в форматах PNG или ICO, совместимых со всеми операционными системами. Он имеет коллекцию из более чем 20 000 значков и более 1000 пакетов значков.

18. FreeIconsWeb

С 2006 года FreeIconsWeb бесплатно предоставляет широкий выбор значков. Он позволяет вам создать свой собственный значок, предоставляет полезные советы и руководства и многое другое.

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

Бесплатные иконки для коммерческого использования

Хорошо оптимизированные бесплатные иконки в формате SVG и PNG, которые можно использовать при проектировании интерфейсов, разработке веб-приложений и приложений.

Все значки хорошо сжаты почти на 60% без ущерба для качества значков SVG и PNG.

Разработано экспертом-художником

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

Настройка и создание значков

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

Все иконки бесплатные

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

Значок сжатого SVG и PNG

PNG хорошо сжимается без потери качества, а SVG хорошо оптимизирован с удалением ненужных данных для экономии полосы пропускания.

Хорошо классифицировано

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

Часто задаваемые вопросы (FAQ)

Могу ли я использовать иконки даже в коммерческих проектах?

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

Какие форматы доступны?

Доступны все значки масштабируемого векторного SVG, PNG с прозрачным фоном и веб-шрифтов в формате значков.

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

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

Могу ли я отправлять запросы на значки?

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

Можем ли мы получить новые иконки в будущем?

Да, наша библиотека значков постоянно пополняется новыми значками. Мы добавим больше свежих иконок, чтобы было больше полезный.

Как я могу получать уведомления о новом значке / обновлении?

Мы постоянно публикуем новые сообщения в нашей социальной сети, поэтому вы можете подписаться на нас в Twitter ИЛИ Facebook получать уведомления об обновлениях!

иконок приложений на iPhone, iPad и Apple Watch

Технические вопросы и ответы QA1686

Q: Какие значки необходимо включить в приложение iOS, приложение Apple Watch, приложение iMessage или приложение Sticker Pack?

A: Ниже приведены инструкции по работе с файлами значков для приложений только для iPhone, приложений только для iPad, универсальных приложений, приложений Apple Watch и расширений iMessage. Если вы создаете приложение iMessage или приложение Sticker Pack, вы должны включить значки как для содержащего приложения, так и для расширения iMessage.

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

До iOS 3.2 изображения значков для приложений iPhone должны были соответствовать строгому соглашению об именах. Эти устаревшие имена по-прежнему перечислены в таблицах ниже вместе с примерами имен для более поздних значков.За исключением iTunesArtwork , изображения значков, включенные в ваше приложение, могут иметь произвольные имена.

Примечание: Все изображения значков должны быть в формате PNG. Изображения значков могут включать альфа-канал, но не должны включать прозрачные области.

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

Важно: Изображения значков iTunesArtwork должны быть в формате png, но называть их без расширения.png расширение.

Примечание. Значки приложений нельзя локализовать.

Значки только для приложений iPhone

Приложения только для iPhone используют следующие значки. Пункты с пометкой « Требуется » должны быть включены.

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

В дополнение к указанным выше значкам в приложениях только для iPhone с целью развертывания iOS 6.1 или более ранней версии используются следующие значки. Элементы с пометкой « Требуется » должны быть включены, если целью развертывания приложения является iOS 6.1 или более ранней версии.

Вы можете включать отдельные изображения для значков iPhone и iPad в категории, требуемые размеры которых эквивалентны, например, «Настройки».

Значки для приложений только для iPad

Приложения только для iPad используют следующие значки. Пункты с пометкой « Требуется » должны быть включены.

В дополнение к указанным выше значкам, приложения только для iPad с целью развертывания iOS 6.1 или более ранней версии используйте следующие значки. Элементы, помеченные как « Требуется », должны быть включены, если целью развертывания приложения является iOS 6.1 или более ранняя версия.

Значки для универсальных приложений

Универсальные приложения используют следующие значки.Пункты с пометкой « Требуется » должны быть включены.

В дополнение к указанным выше значкам универсальные приложения с целью развертывания iOS 6.1 или более ранней версии используйте следующие значки. Элементы, помеченные как « Требуется », должны быть включены, если целью развертывания приложения является iOS 6.1 или более ранняя версия.

Вы можете включать отдельные изображения для значков iPhone и iPad в категории, требуемые размеры которых эквивалентны, например, «Настройки».

Значки приложений для часов

Приложения для часов используют следующие значки. Пункты с пометкой « Требуется » должны быть включены.

Важно: Значки для приложений Watch должны быть добавлены в цель приложения Watch. Не добавляйте значки часов в цель приложения iOS или цель расширения Watch.

Значки для расширений iMessage

Расширения iMessage и расширения пакета стикеров используют следующие значки. Пункты с пометкой « Требуется » должны быть включены.

Важно: Эти значки необходимо добавить в расширение iMessages или в целевое расширение пакета стикеров.

Добавление значков в приложение iOS

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

Добавление изображений значков в каталог активов

1. Выберите каталог активов в навигаторе проекта. По умолчанию он называется Assets.xcassets для новых проектов или Images.xcassets для перенесенных проектов.

2. В представлении структуры набора (левый столбец) выберите набор значков приложения.Для новых или перенесенных проектов он будет называться AppIcon. Вам может потребоваться создать набор значков, нажав кнопку (+) в нижнем левом углу редактора и выбрав в контекстном меню Значки приложений и изображения запуска > Новый значок приложения iOS .

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

1. Перетащите изображения из Finder в каждую ячейку изображений, чтобы настроить соответствующий значок.

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

1. Настройте приложение для использования нового набора значков.

2. 1. Выберите проект в навигаторе проекта.

   2. Выберите цель приложения из списка в левом столбце редактора проекта.

   3. Переключитесь на панель «Общие» в верхней части редактора проекта.

   4. Выберите набор значков приложения во всплывающем меню «Источник значков приложений» в разделе «Значки приложений и изображения запуска».

Перенос набора значков приложения iOS

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

1. В навигаторе проекта выберите цель.

2. Откройте панель «Общие» и прокрутите до раздела «Значки приложений и изображения для запуска».

3. Нажмите кнопку «Использовать каталог активов» рядом с меткой «Источник значков приложений».

1. Настройте любые параметры в диалоговом окне. Чтобы выбрать другой каталог активов или создать новый, щелкните всплывающее меню. Выберите существующий каталог активов или выберите «Новый каталог активов», чтобы создать новый. Меню отображается, если в проекте есть хотя бы один каталог активов.

2. Нажмите кнопку «Перенести». Если каталога активов нет или вы выбрали «Новый каталог активов» во всплывающем меню, вам будет предложено создать его.Отмена создания нового каталога активов приведет к отмене миграции.

Значки перенесены в новый или существующий каталог активов.

Настройка значков без каталога активов

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

2. Найдите список информационных свойств цели в навигаторе проекта. По умолчанию он будет называться Info.plist . Нажмите на него Command и выберите в контекстном меню Открыть как> Исходный код .

Начиная с iOS 5.0, значки указываются с помощью ключа CFBundleIcons . Старые приложения могли ранее указывать свои значки, включая ключ CFBundleIconFiles . Этот ключ следует удалить, если он все еще присутствует (не забудьте также удалить любые варианты, специфичные для устройства). Все приложения должны перейти на ключ CFBundleIcons , чтобы указать свои значки.

Значение ключа CFBundleIcons — это словарь с двумя дочерними ключами: CFBundlePrimaryIcon и UINewsstandIcon .Ключ UINewsstandIcon предназначен для приложений газетного киоска, в противном случае его можно не указывать. Значение ключа CFBundlePrimaryIcon — это словарь, который идентифицирует изображения значков, связанные с пакетом. Он может содержать два дочерних ключа: CFBundleIconFiles и UIPrerenderedIcon . Значение ключа UIPrerenderedIcon — это логическое значение, которое указывает, есть ли уже в изображениях эффект сияния. Значение ключа CFBundleIconFiles представляет собой массив строк, каждая из которых идентифицирует изображение в пакете.

Важно: При указании имени каждого изображения лучше опускать любые расширения. Отсутствие расширения позволяет системе автоматически обнаруживать варианты изображения с высоким разрешением ( @ 2x или @ 3x ), используя имя файла изображения со стандартным разрешением. Если вы включаете расширения, вы должны явно указать все файлы изображений (включая варианты с высоким разрешением).

Листинг 1 Пример конфигурации универсального приложения.

  CFBundleIconFiles  

  CFBundleIcons  

  CFBundlePrimaryIcon  

  Icon-Small  

  Icon-Small-40 строка> 

  Icon-Small-50  

  Icon  

  Icon-60  

  Icon-72  

  CFBundleIcons ~ ipad  

  CFBundlePrimaryIcon 
40 35 35 1  

  CFBundleIconFiles  

  Icon-Small  

  Icon-Small-50  

  Icon-72  

  Icon-76  

  Icon-83.5  

Если ваше приложение поддерживает iOS 4.3, вы также должны включить ключ CFBundleIconFiles для указания изображений значков приложения. Значение этого ключа представляет собой массив строк, каждая из которых идентифицирует изображение в наборе. Если вы включили изображения для значков для iPad, вы можете указать их под ключом CFBundleIconFiles или под ключом CFBundleIconFiles ~ ipad для конкретного устройства.Приложения только для iPad должны указывать изображения своих значков под ключом CFBundleIconFiles .

Листинг 2 Пример конфигурации универсального приложения с целью развертывания iOS 4.3.

  CFBundleIconFiles  

  Icon-Small  

  Icon-Small-50  

  Icon  

  Icon-60  

  Icon-72  

  CFBundleIconFiles ~ ipad  

  Icon-Small  

  Icon-Small-40  

  Icon- Small-50  

  Значок -72  

  Icon-76  

  Icon-167  

Добавление значков в приложение для часов

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

Добавление изображений значков в каталог активов

1. Выберите каталог активов в навигаторе проекта. По умолчанию он называется Images.xcassets.

2. В левом столбце редактора выберите набор значков. Для нового он будет называться AppIcon. Вам может потребоваться создать набор значков, нажав кнопку (+) в нижнем левом углу редактора и выбрав «Новый значок приложения» в контекстном меню.

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

1. Перетащите изображения из Finder в каждую ячейку изображений, чтобы настроить соответствующий значок.

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

1. Настройте приложение Watch для использования нового набора значков.

2. 1. Выберите проект в навигаторе проекта.

   2. Выберите цель Watch App из списка в левом столбце редактора проекта.

   3. Переключитесь на панель «Общие» в верхней части редактора проекта.

   4. Выберите набор значков во всплывающем меню «Источник значков приложений» в разделе «Значки приложений».

Добавление значков в расширение iMessage

Каталоги активов являются предпочтительным способом управления значками расширений iMessage и стикеров. Новые проекты по умолчанию настроены на использование каталогов активов.

Добавление изображений значков в каталог активов

1. Выберите каталог активов в навигаторе проекта. По умолчанию он называется Assets.xcassets.

2. В представлении структуры набора (левый столбец) выберите набор значков приложения. По умолчанию он называется «Значок приложения iMessage». Вам может потребоваться создать набор значков, нажав кнопку (+) в нижнем левом углу редактора и выбрав Значки приложений и изображения запуска > Значок расширения новых сообщений в контекстном меню.

1. Перетащите изображения из Finder в каждую ячейку изображений, чтобы настроить соответствующий значок.

1. Настройте добавочный номер для использования нового набора значков.

2. 1. Выберите проект в навигаторе проекта.

   2. Выберите расширение iMessage или цель расширения пакета стикеров из списка в левом столбце редактора проекта.

   3. Переключитесь на панель «Общие» в верхней части редактора проекта.

   4. Выберите набор значков во всплывающем меню «Источник значков наклеек» в разделе «Значки приложений».

Устранение неполадок

В этом разделе описаны распространенные проблемы и способы их решения.

Примечание: Перед попыткой дальнейшего устранения неполадок выполните чистую сборку приложения (удерживайте нажатой клавишу Option и выберите Продукт> Чистая папка сборки , затем Продукт> Сборка в строке меню Xcode) и удалите приложение с тестового устройства или симулятора. Снова соберите приложение и попытайтесь воспроизвести проблему. Вы также можете попробовать очистить содержимое папки производных данных Xcode ( ~ / Library / Developer / Xcode / DerivedData / ) перед повторной сборкой.

[Каталоги ресурсов] Удалить ключи, связанные со значками, из списка свойств информации.

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

1. Откройте список свойств информации для цели. Его можно найти на вкладке Info в редакторе проекта или в навигаторе проекта, где он, вероятно, будет называться Info.plist или -Info.plist .

2. Удалите следующие ключи, включая специфические варианты устройства.

[Каталоги активов] Убедитесь, что каталог активов связан с целью

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

1. Выберите каталог активов в навигаторе проекта.

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

1. Выберите проект в навигатор проекта.

2. Выберите цель из списка в левом столбце редактора проекта.

3. Переключитесь на панель «Общие» в верхней части редактора проекта.

4. Убедитесь, что имя набора значков выбрано во всплывающем меню «Источник значков приложений» в разделе «Значки приложений и изображения запуска», как показано на рисунке 4.

[Вручную] Убедитесь, что все изображения значков связаны с целью.

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

1. Выберите изображение значка в навигаторе проекта.

2. На панели утилит установите флажок рядом с целью под панелью Target Membership, как показано на рисунке 13.

[Вручную] Убедитесь, что ключ CFBundleIcons присутствует в списке свойств информации

Если цель не использует каталоги активов для управления своими значками, список свойств информации должен содержат ключ CFBundleIcons для указания изображений значков приложения. См. Раздел «Настройка значков без каталога активов».

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

[Вручную] Убедитесь, что все изображения, на которые ссылается ключ CFBundleIcons, присутствуют.

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

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

Все изображения значков должны быть в формате PNG и использовать поддерживаемую цветовую модель. Изображения, которые не используют цветовую модель RGB, могут правильно отображаться в Xcode, но не загружаются на устройство. Вы можете использовать приложение Preview для проверки формата, цветовой модели и размера изображения.

1. Открыть изображение в предварительном просмотре

   • Для изображения внутри каталога активов: выберите каталог активов в навигаторе проекта, выберите набор изображений, содержащий значки, выберите изображение и выберите File> Open with External Редактор .

   • Для изображения вне каталога активов: выберите изображение в навигаторе проекта и выберите File> Open with External Editor .

2. В строке меню «Предварительный просмотр» выберите «Инструменты »> «Показать инспектор ».

3. Откроется окно инспектора

   • Значение поля «Тип документа» показывает формат изображения. Это должен быть образ сетевой графики портала.

   • Значение поля Размер изображения показывает размер изображения.Он должен соответствовать размеру, указанному на вкладках выше.

   • Значение поля Цветовая модель показывает размер изображения. Это должно быть RGB.

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

1. В меню предварительного просмотра выберите Файл> Экспорт .

2. Выберите PNG в меню «Формат» в нижней части диалогового окна сохранения.

3. Щелкните кнопку Сохранить.

4. Импортируйте сохраненное изображение в свой проект Xcode, заменив исходное изображение.

Повторите вышеуказанное для всех изображений значков.

Ошибки проверки

Существует несколько проблем, связанных со значками, которые приведут к тому, что ваше приложение не сможет пройти проверку Xcode или iTunes Connect. Основная проблема зависит от ошибки.

ITMS-

: Отсутствует необходимый файл значка

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

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

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

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

ITMS-

  
   
 android: height = "256dp" 
 android: width = "256dp" 
  
 android: viewportWidth = "32" 
 android: viewportHeight = "32">  
  android: pathData = "M20.5,9.5 
 c-1.955,0, -3.83,1.268, -4.5,3 
 c-0.67, -1.732, -2.547, -3, - 4.5, -3 
 C8.957,9.5,7,11,432,7,14 
 c0,3,53,3.793,6,257,9,11,5 
 c5.207, -5,242,9, -7,97,9, -11,5 
 C25,11,432,23,043,9,5,20,5,9,5 z "/>