Pokud máte vlastní webovou stránku nebo ji vyvíjíte pro někoho jiného, ​​měli byste upravit ikonu uložené záložky, která se zobrazí na domovské obrazovce uživatele iOS. Na snímku obrazovky výše uvidíte vlastní favicon OSXDaily sedící na obrazovce iPhonu.

Nastavení ikony Apple Touch Icon je dobrý nápad, protože ve výchozím nastavení iOS uloží pouze malou miniaturu webu. Malé miniatury je často těžké identifikovat a obecně nevypadají tak skvěle, takže si místo toho nastavme vlastní obrázek favicon.

Jak přizpůsobit a nastavit dotykovou ikonu Apple pro web

• Vytvořte ikonu, ujistěte se, že je to čtverec, ta zde na OSXDaily.com má 512 × 512 pixelů, ale pokud opravdu chcete, můžete si vybrat i jiné velikosti čtverců – větší velikost je vhodná pro displeje sítnice
• Uložte ikonu domovské obrazovky jako soubor PNG a označte ji: apple-touch-icon.png
• Přetáhněte apple-touch-icon.png do kořenového adresáře webového serveru, abyste k němu měli přístup na adrese domain.com/apple-touch-icon.png
• Otestujte ikonu záložky na domovské obrazovce svých webových stránek tím, že navštívíte web ze Safari v iOS a poté klepnete na „Přidat na domovskou obrazovku“
• Podívejte se na domovskou obrazovku zařízení iOS a uvidíte tam uloženou záložku s vaší novou vlastní ikonou, jako je snímek obrazovky výše

Pokud je soubor správně pojmenován a je v kořenovém adresáři webových serverů, bude Mobile Safari vědět, co s ním dělat, takže není potřeba dalších úprav, aby se zobrazila specifická favicon iOS.

Pro referenci zde je náš vlastní obrázek 'apple-touch-icon.png', který používáme pro OSXDaily.com, tato ukázková ikona záložky je vytvořena a má vhodnou velikost pro displeje sítnice ():

Všimnete si, že skutečný soubor ikony nemá lom světla uložený na ikoně, iOS to zvládá sám. Můžete použít libovolný obrázek, ale doporučuji vytvořit takový, který zachycuje známé uživatelské rozhraní stávajících ikon iOS.

To samozřejmě není totéž jako mít specializovanou aplikaci pro iOS, ale slušný mobilní uživatelský zážitek z webu je dobrý nápad a vyhnete se vysoké ceně za vývoj aplikace pro iOS.

A hej, pokud vás takové věci znepokojují, pravděpodobně používáte Photoshop alespoň k návrhu ikon, že? Tak se na nějaké podívejte, když už jste u toho.