Jeśli masz własną stronę internetową lub tworzysz ją dla kogoś innego, powinieneś dostosować ikonę zapisanej zakładki, która pojawia się na ekranie głównym iOS użytkownika. Na powyższym zrzucie ekranu zobaczysz niestandardową favicon OSXDaily na ekranie iPhone'a.

Ustawienie ikony Apple Touch to dobry pomysł, ponieważ domyślnie system iOS zapisuje tylko małą miniaturę witryny. Małe miniatury są często trudne do zidentyfikowania i zazwyczaj nie wyglądają zbyt dobrze, więc zamiast tego ustawmy własny obraz ikony ulubionych.

Jak dostosować i ustawić ikonę Apple Touch dla witryny internetowej

• Utwórz ikonę, upewnij się, że jest to kwadrat, ten tutaj na OSXDaily.com ma 512×512 pikseli, ale możesz wybrać inny rozmiar kwadratu, jeśli naprawdę chcesz – uwaga większy jest odpowiedni dla wyświetlacze siatkówki
• Zapisz ikonę ekranu głównego jako plik PNG i oznacz go etykietą: apple-touch-icon.png
• Upuść plik apple-touch-icon.png do głównego katalogu serwera WWW, aby można było uzyskać do niego dostęp pod adresem domain.com/apple-touch-icon.png
• Przetestuj ikonę zakładki na ekranie głównym swojej witryny, odwiedzając witrynę z przeglądarki Safari w systemie iOS, a następnie dotykając opcji „Dodaj do ekranu głównego”
• Spójrz na ekran główny urządzenia z systemem iOS, a zobaczysz zapisaną tam zakładkę z nową niestandardową ikoną, jak na powyższym zrzucie ekranu

Jeśli plik ma prawidłową nazwę i znajduje się w katalogu głównym serwerów WWW, mobilne Safari będzie wiedziało, co z nim zrobić, więc nie ma potrzeby wprowadzania dalszych zmian, aby wyświetlić ikonę favicon dla systemu iOS.

Dla porównania, oto nasz niestandardowy obraz „apple-touch-icon.png”, którego używamy w witrynie OSXDaily.com. Ta przykładowa ikona zakładki jest tworzona i ma odpowiedni rozmiar dla wyświetlaczy Retina ():

Zauważysz, że rzeczywisty plik ikony nie ma zapisanego załamania światła na ikonie, iOS obsługuje to samodzielnie. Możesz użyć dowolnego obrazu, ale zalecamy utworzenie takiego, który oddaje znajomy interfejs użytkownika istniejących ikon systemu iOS.

Oczywiście to nie to samo, co posiadanie dedykowanej aplikacji na iOS, ale przyzwoity interfejs użytkownika mobilnego z internetu to dobry pomysł, który pozwala uniknąć wysokich kosztów tworzenia aplikacji na iOS.

Hej, jeśli martwisz się takimi rzeczami, prawdopodobnie używasz Photoshopa przynajmniej do projektowania ikon, prawda? Więc sprawdź, kiedy już to robisz.