После недолгих поисков нашлась документация для мобильной версии Safari (iOS) из которой можно увидеть что есть два пути решения данной задачи:
1 - использовать специальный html тэг на странице, позволяющий задавать свою иконку для каждой страницы:
<link rel="apple-touch-icon" href="/touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">В данном примере расписаны иконки для разных типов экранов, но если нет желания делать под каждый экран - можно оставить только первую картинку сразу с размерами 152x152.
Также таким способом можно создавать разные иконки для разных страниц сайта.
2 - сделать одну картинку сразу на весь сайт, без каких-либо добавлений в код страницы, просто разместив в корне сайта файл иконки apple-touch-icon.png, желательно размерами 152x152.
В моем случае, я воспользовался вторым вариантом, теперь если вы попробуйте на своем мобильном устройстве в Safari добавить мой сайт в закладки, то увидите сделанную мной иконку.