Iphone icon from image

MakeAppIcon on your mac.

Faster. Smarter. More organized than ever.

MakeAppIcon powered by Oursky

Generate App iOS and Android Icons of all sizes with a click!

Thanks for interested in MakeAppIcon Desktop!
It will be available very soon.

Best app icon resizer for
mobile developers.

Optimized for both for Xcode and Android Studio.

MakeAppIcon Desktop for Mac and Windows

MakeAppIcon.com has always been the best icon resizer for mobile app developers and designers.

With the desktop app, you can:

• Save upload time to MakeAppIcon Server
• Generate Android and iOS icons in bulk
• Preview icons
• Simple yet easy to use interface
• *30-day money back guarantee

Also available on App Store

*Priced at $14.99 because Apple takes commission

This icon resizer optimizes your icon designs into all formats needed for iOS and Android mobile app!

Generate icons that are required in an iOS and Android app

Quick preview of your app icon on the devices

Auto enhancement for the smaller icons!

• About
• About MakeAppIcon
• Desktop App
• Other Tools
• Privacy Statement
• Contact Us

• Apple Developers
• Use icons for iOS app
• OS App Icons for macOS
• App Icons for watchOS
• App Icons for iMessage
• tvOS App Icons
• Import into XCode

• Android Developers
• Use icons for Android
• Import into Android Studio

• Web & API
• Use icons for mobile web app
• API

Proudly powered by

Design and build award-winning apps

Besides MakeAppIcon,
We also build your web / mobile app with passion.

Drop us a line and we will get in touch with you soon.

Источник

iOS how to set app icon and launch images

How do I set the images so that I can archive and validate my app? The screen looks like this now:

So the first one says 29pt , but then it also says 2x . So do I put a 29×29 image or a 58×58 image? And where do I put all of the other ones? (I know that there are more sizes than 29 , 40 , and 60 ).

Anyway, what I tried was I dragged a 29×29 png onto the first slot, a 40×40 onto the second, and a 60×60 onto the third and fourth. When I went to Product->Archive , I get

/Users/kendon/Documents/iPhone Apps/Sales Tool/Sales Tool/Images.xcassets: The app icon set named «AppIcon» did not have any applicable content.

13 Answers 13

Update: Unless you love resizing icons one by one, check out Schmoudi’s answer. It’s just a lot easier.

Icon sizes

How to Set the App Icon

Click Assets.xcassets in the Project navigator and then choose AppIcon.

This will give you an empty app icon set.

Now just drag the right sized image (in .png format) from Finder onto every blank in the app set. The app icon should be all set up now.

How to create the right sized images

The image at the very top tells the pixels sizes for for each point size that is required in iOS 9. However, even if I don’t get this answer updated for future versions of iOS, you can still figure out the correct pixel sizes using the method below.

Look at how many points (pt) each blank on the empty image set is. If the image is 1x then the pixels are the same as the points. For 2x double the points and 3x triple the points. So, for example, in the first blank above (29pt 2x) you would need a 58×58 pixel image.

You can start with a 1024×1024 pixel image and then downsize it to the correct sizes. You can do it yourself or there are also websites and scripts for getting the right sizes. Do a search for «ios app icon generator» or something similar.

I don’t think the names matter as long as you get the dimensions right, but the general naming convention is as follows:

Launch Image

Although you can use an image for the launch screen, consider using a launch screen storyboard file. This will conveniently resize for every size and orientation. Check out this SO answer or the following documentation for help with this.

Useful documentation

The Xcode images in this post were created with Xcode 7.

Источник

Iphone icon from image

In iOS 13 or later, prefer using SF Symbols to represent tasks and types of content in your app. If your app is running in iOS 12 or earlier, follow the guidance below.

The system provides built-in icons that represent common tasks and types of content in a variety of use cases.

In apps running iOS 12 and earlier, it’s a good idea to use these built-in icons as much as possible because they’re familiar to people.

Use system icons as intended. Every system-provided image has a specific, well-known meaning. To avoid confusing users, it’s essential that each image be used in accordance with its meaning and recommended usage.

Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what’s onscreen, making navigation easier for people with visual disabilities.

Design a custom icon if you can’t find a system-provided one that meets your needs. It’s better to design your own than to misuse a system-provided image. See Glyphs.

Navigation Bar and Toolbar Icons

Use the following icons in navigation bars and toolbars. For developer guidance, see UIBarButtonSystemItem.

TIP You can use text instead of icons to represent items in a navigation bar or toolbar. For example, Calendar uses “Today,” “Calendars,” and “Inbox” in the toolbar. You can also use a fixed space element to provide padding between navigation and toolbar icons.

Icon	Name	Meaning	API
	Action (Share)	Shows a modal view containing share extensions, action extensions, and tasks, such as Copy, Favorite, or Find, that are useful in the current context.	action
	Add	Creates a new item.	add
	Bookmarks	Shows app-specific bookmarks.	bookmarks
	Camera	Takes a photo or video, or shows the Photo Library.	camera
Cancel	Cancel	Closes the current view or ends edit mode without saving changes.	cancel
	Compose	Opens a new view in edit mode.	compose
Done	Done	Saves the state and closes the current view, or exits edit mode.	done
Edit	Edit	Enters edit mode in the current context.	edit
	Fast Forward	Fast-forwards through media playback or slides.	fastForward
	Organize	Moves an item to a new destination, such as a folder.	organize
	Pause	Pauses media playback or slides. Always store the current location when pausing, so playback can resume later.	pause
	Play	Begins or resumes media playback or slides.	play
Redo	Redo	Redoes the last action that was undone.	redo
	Refresh	Refreshes content. Use this icon sparingly, as your app should refresh content automatically whenever possible.	refresh
	Reply	Sends or routes an item to another person or location.	reply
	Rewind	Moves backwards through media playback or slides.	rewind
Save	Save	Saves the current state.	save
	Search	Displays a search field.	search
	Stop	Stops media playback or slides.	stop
	Trash	Deletes the current or selected item.	trash
Undo	Undo	Undoes the last action.	undo

Tab Bar Icons

Use the following icons in tab bars. For developer guidance, see UITabBarSystemItem.

Icon	Name	Meaning	API
	Bookmarks	Shows app-specific bookmarks.	bookmarks
	Contacts	Shows the person’s contacts.	contacts
	Downloads	Shows active or recent downloads.	downloads
	Favorites	Shows the person’s favorite items.	favorites
	Featured	Shows content featured by the app.	featured
	History	Shows recent actions or activity.	history
	More	Shows additional tab bar items.	more
	Most Recent	Shows content or items recently accessed within a specific period of time.	mostRecent
	Most Viewed	Shows the most popular items.	mostViewed
	Search	Enters a search mode.	search
	Top Rated	Shows the highest-rated items.	topRated

Home Screen Quick Action Icons

Use the following icons in home screen quick action menus. For developer guidance, see UIApplicationShortcutIconType.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. В первую очередь к apple-touch-icon-precomposed.png.
2. Если он не найден (от сервера получен ответ 404), то устройство сделает новый запрос к к apple-touch-icon.png.
3. Если и этот способ не увенчается успехом, то устройство сделает скриншот верхней части вашего сайта, и он будет использоваться в качестве Web Clips.

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

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

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

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

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

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

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

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

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

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

Модель устройства	Размер apple-touch-icon
IPhone – first generation, iPhone 2G, iPhone 3G, iPhone 3GS	57×57
iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone se, iPhone 6, iPhone 6s, iPhone 7, iPhone8	120×120
iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus	180×180
iPad mini	76×76
iPad, iPad mini 2	152×152
iPad Pro	167×167

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Источник