Apple shortcut icon size

Для чего используется 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, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.

Источник

iOS 14.3 beta 2 lets you run shortcuts from the home screen without launching the Shortcuts app

— Nov. 18th 2020 10:03 am PT

Apple introduced the second developer beta of iOS 14.3 yesterday, and it includes a major change to Shortcuts. With iOS 14.3 beta 2, the Shortcuts app no longer opens when you launch a shortcut from the home screen, which in turn has major benefits for those using the Shortcuts app to set custom app icons.

Alongside the release of iOS 14 in September, the ability to set custom app icons using the Shortcuts app went viral. iPhone users were enamored by support for home screen widgets in iOS 14, and they quickly turned to the Shortcuts app as a way to further customize their home screen aesthetic with custom icons.

The downside to using Shortcuts to set a custom icon, however, is that the Shortcuts app launches every time you tap on the custom home screen icon. This is because you’re essentially creating a shortcut that’s sole action is to open another application, and using the custom icon for that shortcut on your home screen.

In iOS 14.3 beta 2, however, the Shortcuts app no longer opens when you launch a shortcut from your home screen. This means that you can set custom app icons on your home screen and launch the associated app, without the Shortcuts app automatically launching first. Instead, a compact UI banner appears at the top.

Here’s how it works for setting custom app icons:

1. Open the Shortcuts app
2. Tap the “+” button to create a new shortcut
3. Tap “Add Action”
4. Search for “Open App” and look for it in the Actions list
5. Tap “Choose” and pick which app you want to customize
6. Tap the three-dot icon in the upper-right
7. Tap “Add to Home Screen”
8. Name the shortcut the app name
9. Tap the icon to the left of the app name and choose your custom icon from the Photos app

Of course, this has numerous other benefits than just setting app icons. With iOS 14.3 beta, the Shortcuts app will no longer open when you launch a shortcut of any kind from the home screen. Hopefully, this is a change that remains throughout the rest of the iOS 14.3 beta testing period and into the final release.

Fantastic change in iOS 14.3 beta 2 – shortcuts added to the Home Screen now use compact UI and don’t launch the Shortcuts app anymore.

Which means custom icons like our own MacStories Shortcuts Icons will now run shortcuts in-place, just like widgets 😍https://t.co/9J47uU6ZlN pic.twitter.com/aHAS8iD0BW

FTC: We use income earning auto affiliate links. More.

Источник

Mac keyboard shortcuts

By pressing certain key combinations, you can do things that normally need a mouse, trackpad, or other input device.

To use a keyboard shortcut, press and hold one or more modifier keys and then press the last key of the shortcut. For example, to use Command-C (copy), press and hold the Command key, then the C key, then release both keys. Mac menus and keyboards often use symbols for certain keys, including modifier keys:

• Option (or Alt) ⌥
• Control (or Ctrl) ⌃

On keyboards made for Windows PCs, use the Alt key instead of Option, and the Windows logo key instead of Command.

Some keys on some Apple keyboards have special symbols and functions, such as for display brightness , keyboard brightness , Mission Control, and more. If these functions aren’t available on your keyboard, you might be able to reproduce some of them by creating your own keyboard shortcuts. To use these keys as F1, F2, F3, or other standard function keys, combine them with the Fn key.

Cut, copy, paste, and other common shortcuts

• Command-X: Cut the selected item and copy it to the Clipboard.
• Command-C: Copy the selected item to the Clipboard. This also works for files in the Finder.
• Command-V: Paste the contents of the Clipboard into the current document or app. This also works for files in the Finder.
• Command-Z: Undo the previous command. You can then press Shift-Command-Z to Redo, reversing the undo command. In some apps, you can undo and redo multiple commands.
• Command-A: Select All items.
• Command-F: Find items in a document or open a Find window.
• Command-G: Find Again: Find the next occurrence of the item previously found. To find the previous occurrence, press Shift-Command-G.
• Command-H: Hide the windows of the front app. To view the front app but hide all other apps, press Option-Command-H.
• Command-M: Minimize the front window to the Dock. To minimize all windows of the front app, press Option-Command-M.
• Command-O: Open the selected item, or open a dialog to select a file to open.
• Command-P: Print the current document.
• Command-S: Save the current document.
• Command-T: Open a new tab.
• Command-W: Close the front window. To close all windows of the app, press Option-Command-W.
• Option-Command-Esc: Force quit an app.
• Command–Space bar: Show or hide the Spotlight search field. To perform a Spotlight search from a Finder window, press Command–Option–Space bar. (If you use multiple input sources to type in different languages, these shortcuts change input sources instead of showing Spotlight. Learn how to change a conflicting keyboard shortcut.)
• Control–Command–Space bar: Show the Character Viewer, from which you can choose emoji and other symbols.
• Control-Command-F: Use the app in full screen, if supported by the app.
• Space bar: Use Quick Look to preview the selected item.
• Command-Tab: Switch to the next most recently used app among your open apps.
• Shift-Command-5: In macOS Mojave or later, take a screenshot or make a screen recording. Or use Shift-Command-3 or Shift-Command-4 for screenshots. Learn more about screenshots.
• Shift-Command-N: Create a new folder in the Finder.
• Command-Comma (,): Open preferences for the front app.

Sleep, log out, and shut down shortcuts

You might need to press and hold some of these shortcuts for slightly longer than other shortcuts. This helps you to avoid using them unintentionally.

• Power button: Press to turn on your Mac or wake it from sleep. Press and hold for 1.5 seconds to put your Mac to sleep.* Continue holding to force your Mac to turn off.
• Option–Command–Power button* or Option–Command–Media Eject : Put your Mac to sleep.
• Control–Shift–Power button* or Control–Shift–Media Eject : Put your displays to sleep.
• Control–Power button* or Control–Media Eject : Display a dialog asking whether you want to restart, sleep, or shut down.
• Control–Command–Power button:* Force your Mac to restart, without prompting to save any open and unsaved documents.
• Control–Command–Media Eject : Quit all apps, then restart your Mac. If any open documents have unsaved changes, you will be asked whether you want to save them.
• Control–Option–Command–Power button* or Control–Option–Command–Media Eject : Quit all apps, then shut down your Mac. If any open documents have unsaved changes, you will be asked whether you want to save them.
• Control-Command-Q: Immediately lock your screen.
• Shift-Command-Q: Log out of your macOS user account. You will be asked to confirm. To log out immediately without confirming, press Option-Shift-Command-Q.

* Does not apply to the Touch ID sensor.

Finder and system shortcuts

• Command-D: Duplicate the selected files.
• Command-E: Eject the selected disk or volume.
• Command-F: Start a Spotlight search in the Finder window.
• Command-I: Show the Get Info window for a selected file.
• Command-R: (1) When an alias is selected in the Finder: show the original file for the selected alias. (2) In some apps, such as Calendar or Safari, refresh or reload the page. (3) In Software Update preferences, check for software updates again.
• Shift-Command-C: Open the Computer window.
• Shift-Command-D: Open the desktop folder.
• Shift-Command-F: Open the Recents window, showing all of the files you viewed or changed recently.
• Shift-Command-G: Open a Go to Folder window.
• Shift-Command-H: Open the Home folder of the current macOS user account.
• Shift-Command-I: Open iCloud Drive.
• Shift-Command-K: Open the Network window.
• Option-Command-L: Open the Downloads folder.
• Shift-Command-N: Create a new folder.
• Shift-Command-O: Open the Documents folder.
• Shift-Command-P: Show or hide the Preview pane in Finder windows.
• Shift-Command-R: Open the AirDrop window.
• Shift-Command-T: Show or hide the tab bar in Finder windows.
• Control-Shift-Command-T: Add selected Finder item to the Dock (OS X Mavericks or later)
• Shift-Command-U: Open the Utilities folder.
• Option-Command-D: Show or hide the Dock.
• Control-Command-T: Add the selected item to the sidebar (OS X Mavericks or later).
• Option-Command-P: Hide or show the path bar in Finder windows.
• Option-Command-S: Hide or show the Sidebar in Finder windows.
• Command–Slash (/): Hide or show the status bar in Finder windows.
• Command-J: Show View Options.
• Command-K: Open the Connect to Server window.
• Control-Command-A: Make an alias of the selected item.
• Command-N: Open a new Finder window.
• Option-Command-N: Create a new Smart Folder.
• Command-T: Show or hide the tab bar when a single tab is open in the current Finder window.
• Option-Command-T: Show or hide the toolbar when a single tab is open in the current Finder window.
• Option-Command-V: Move the files in the Clipboard from their original location to the current location.
• Command-Y: Use Quick Look to preview the selected files.
• Option-Command-Y: View a Quick Look slideshow of the selected files.
• Command-1: View the items in the Finder window as icons.
• Command-2: View the items in a Finder window as a list.
• Command-3: View the items in a Finder window in columns.
• Command-4: View the items in a Finder window in a gallery.
• Command–Left Bracket ([): Go to the previous folder.
• Command–Right Bracket (]): Go to the next folder.
• Command–Up Arrow: Open the folder that contains the current folder.
• Command–Control–Up Arrow: Open the folder that contains the current folder in a new window.
• Command–Down Arrow: Open the selected item.
• Right Arrow: Open the selected folder. This works only when in list view.
• Left Arrow: Close the selected folder. This works only when in list view.
• Command-Delete: Move the selected item to the Trash.
• Shift-Command-Delete: Empty the Trash.
• Option-Shift-Command-Delete: Empty the Trash without confirmation dialog.
• Command–Brightness Down: Turn video mirroring on or off when your Mac is connected to more than one display.
• Option–Brightness Up: Open Displays preferences. This works with either Brightness key.
• Control–Brightness Up or Control–Brightness Down: Change the brightness of your external display, if supported by your display.
• Option–Shift–Brightness Up or Option–Shift–Brightness Down: Adjust the display brightness in smaller steps. Add the Control key to this shortcut to make the adjustment on your external display, if supported by your display.
• Option–Mission Control: Open Mission Control preferences.
• Command–Mission Control: Show the desktop.
• Control–Down Arrow: Show all windows of the front app.
• Option–Volume Up: Open Sound preferences. This works with any of the volume keys.
• Option–Shift–Volume Up or Option–Shift–Volume Down: Adjust the sound volume in smaller steps.
• Option–Keyboard Brightness Up: Open Keyboard preferences. This works with either Keyboard Brightness key.
• Option–Shift–Keyboard Brightness Up or Option–Shift–Keyboard Brightness Down: Adjust the keyboard brightness in smaller steps.
• Option key while double-clicking: Open the item in a separate window, then close the original window.
• Command key while double-clicking: Open a folder in a separate tab or window.
• Command key while dragging to another volume: Move the dragged item to the other volume, instead of copying it.
• Option key while dragging: Copy the dragged item. The pointer changes while you drag the item.
• Option-Command while dragging: Make an alias of the dragged item. The pointer changes while you drag the item.
• Option-click a disclosure triangle: Open all folders within the selected folder. This works only when in list view.
• Command-click a window title: See the folders that contain the current folder.
• Learn how to use Command or Shift to select multiple items in the Finder.
• Click the Go menu in the Finder menu bar to see shortcuts for opening many commonly used folders, such as Applications, Documents, Downloads, Utilities, and iCloud Drive.

Document shortcuts

The behavior of these shortcuts may vary with the app you’re using.

• Command-B: Boldface the selected text, or turn boldfacing on or off.
• Command-I: Italicize the selected text, or turn italics on or off.
• Command-K: Add a web link.
• Command-U: Underline the selected text, or turn underlining on or off.
• Command-T: Show or hide the Fonts window.
• Command-D: Select the Desktop folder from within an Open dialog or Save dialog.
• Control-Command-D: Show or hide the definition of the selected word.
• Shift-Command-Colon (:): Display the Spelling and Grammar window.
• Command-Semicolon (;): Find misspelled words in the document.
• Option-Delete: Delete the word to the left of the insertion point.
• Control-H: Delete the character to the left of the insertion point. Or use Delete.
• Control-D: Delete the character to the right of the insertion point. Or use Fn-Delete.
• Fn-Delete: Forward delete on keyboards that don’t have a Forward Delete key. Or use Control-D.
• Control-K: Delete the text between the insertion point and the end of the line or paragraph.
• Fn–Up Arrow: Page Up: Scroll up one page.
• Fn–Down Arrow: Page Down: Scroll down one page.
• Fn–Left Arrow: Home: Scroll to the beginning of a document.
• Fn–Right Arrow: End: Scroll to the end of a document.
• Command–Up Arrow: Move the insertion point to the beginning of the document.
• Command–Down Arrow: Move the insertion point to the end of the document.
• Command–Left Arrow: Move the insertion point to the beginning of the current line.
• Command–Right Arrow: Move the insertion point to the end of the current line.
• Option–Left Arrow: Move the insertion point to the beginning of the previous word.
• Option–Right Arrow: Move the insertion point to the end of the next word.
• Shift–Command–Up Arrow: Select the text between the insertion point and the beginning of the document.
• Shift–Command–Down Arrow: Select the text between the insertion point and the end of the document.
• Shift–Command–Left Arrow: Select the text between the insertion point and the beginning of the current line.
• Shift–Command–Right Arrow: Select the text between the insertion point and the end of the current line.
• Shift–Up Arrow: Extend text selection to the nearest character at the same horizontal location on the line above.
• Shift–Down Arrow: Extend text selection to the nearest character at the same horizontal location on the line below.
• Shift–Left Arrow: Extend text selection one character to the left.
• Shift–Right Arrow: Extend text selection one character to the right.
• Option–Shift–Up Arrow: Extend text selection to the beginning of the current paragraph, then to the beginning of the following paragraph if pressed again.
• Option–Shift–Down Arrow: Extend text selection to the end of the current paragraph, then to the end of the following paragraph if pressed again.
• Option–Shift–Left Arrow: Extend text selection to the beginning of the current word, then to the beginning of the following word if pressed again.
• Option–Shift–Right Arrow: Extend text selection to the end of the current word, then to the end of the following word if pressed again.
• Control-A: Move to the beginning of the line or paragraph.
• Control-E: Move to the end of a line or paragraph.
• Control-F: Move one character forward.
• Control-B: Move one character backward.
• Control-L: Center the cursor or selection in the visible area.
• Control-P: Move up one line.
• Control-N: Move down one line.
• Control-O: Insert a new line after the insertion point.
• Control-T: Swap the character behind the insertion point with the character in front of the insertion point.
• Command–Left Curly Bracket (<): Left align.
• Command–Right Curly Bracket (>): Right align.
• Shift–Command–Vertical bar (|): Center align.
• Option-Command-F: Go to the search field.
• Option-Command-T: Show or hide a toolbar in the app.
• Option-Command-C: Copy Style: Copy the formatting settings of the selected item to the Clipboard.
• Option-Command-V: Paste Style: Apply the copied style to the selected item.
• Option-Shift-Command-V: Paste and Match Style: Apply the style of the surrounding content to the item pasted within that content.
• Option-Command-I: Show or hide the inspector window.
• Shift-Command-P: Page setup: Display a window for selecting document settings.
• Shift-Command-S: Display the Save As dialog, or duplicate the current document.
• Shift–Command–Minus sign (-): Decrease the size of the selected item.
• Shift–Command–Plus sign (+): Increase the size of the selected item. Command–Equal sign (=) performs the same function.
• Shift–Command–Question mark (?): Open the Help menu.

Other shortcuts

For more shortcuts, check the shortcut abbreviations shown in the menus of your apps. Every app can have its own shortcuts, and shortcuts that work in one app might not work in another.

• Accessibility shortcuts
• Safari shortcuts
• Spotlight shortcuts
• Startup shortcuts
• Apple Music shortcuts: Choose Help > Keyboard shortcuts from the menu bar in the Music app.
• Other shortcuts: Choose Apple menu > System Preferences, click Keyboard, then click Shortcuts.

Источник