Swift App Icon Image Assets: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 67: | Line 67: | ||
3. <snake_case_image_name>_<image_regular_width>@3x.png | 3. <snake_case_image_name>_<image_regular_width>@3x.png | ||
Example: lets say we have an | Example: lets say we have an Academia Logo.png with regular size of 100x30, then we have to create 3 images as following: | ||
1. | 1. academia_logo_100@1x.png (100x30) | ||
2. | 2. academia_logo_100@2x.png (200x60) | ||
3. | 3. academia_logo_100@3x.png (300x90) | ||
==References== | ==References== | ||
* [https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/ iOS development guide line] | * [https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/ iOS development guide line] | ||
Revision as of 09:48, 6 February 2020
# regular images
regular_images:
- user_icon_24x24.png #24x24
- home_icon_24x24.png #24x24
# ios example
images:
regular: # with suffix @1x.png
- user_icon_24@1x.png # 24x24
- home_icon_24@1x.png # 24x24
medium: # with suffix @2x.png
- user_icon_24@2x.png # 48x48
- home_icon_24@2x.png # 48x48
bigger: # with suffix @3x.png
- user_icon_24@3x.png # 72x72
- home_icon_24@3x.png # 72x72
|
iphone:
images:
notification:
- app_icon_20@2x.png # 40x40
- app_icon_20@3x.png # 60x60
settings:
- app_icon_29@2x.png # 58x58
- app_icon_29@3x.png # 87x87
spotlight:
- app_icon_40@2x.png # 80x80
- app_icon_40@3x.png # 120x120
app_icon:
- app_icon_60@2x.png # 120x120
- app_icon_60@3x.png # 180x180
app_store:
- app_icon_1024@1x.png # 1024x1024
|
ipad:
images:
notification:
- app_icon_20@1x.png # 20x20
- app_icon_20@2x.png # 40x40
settings:
- app_icon_29@1x.png # 29x29
- app_icon_29@2x.png # 58x58
spotlight:
- app_icon_40@1x.png # 40x40
- app_icon_40@2x.png # 80x80
app_icon:
- app_icon_76@1x.png # 76x76 , ipad <= 11.0"
- app_icon_76@2x.png # 152x152 , ipad <= 11.0"
- app_icon_83.5@2x.png # 167x167 , ipad == 12.9"
- app_icon_1024@1x.png # 1024x1024 , app_store
|
Example
For each images we need 3 sizes of images as following convention: 1. <snake_case_image_name>_<image_regular_width>@1x.png 2. <snake_case_image_name>_<image_regular_width>@2x.png 3. <snake_case_image_name>_<image_regular_width>@3x.png
Example: lets say we have an Academia Logo.png with regular size of 100x30, then we have to create 3 images as following: 1. academia_logo_100@1x.png (100x30) 2. academia_logo_100@2x.png (200x60) 3. academia_logo_100@3x.png (300x90)