Задайте „apple-touch-icon.png“, за да персонализирате уеб сайтове iPhone Bookmark FavIcon

Съдържание:

Anonim

Ако имате собствен уебсайт или разработвате такъв за някой друг, трябва да персонализирате запазената икона на отметка, която се появява на началния екран на iOS на потребителя. На екранната снимка по-горе ще видите персонализираната фавикона на OSXDaily на екрана на iPhone.

Настройването на иконата Apple Touch е добра идея, защото по подразбиране iOS просто ще запази малка миниатюра на сайта. Малките миниатюри често са трудни за идентифициране и като цяло не изглеждат толкова добре, така че нека вместо това зададем ваше собствено изображение на фавикон.

Как да персонализирате и зададете Apple Touch икона за уебсайт

  • Създайте иконата, уверете се, че е квадратна, тази тук на OSXDaily.com е 512×512 пиксела, но можете да изберете други квадратни размери, ако наистина искате – имайте предвид, че по-големият е подходящ за дисплеи на ретината
  • Запазете иконата на началния екран като PNG файл и го маркирайте: apple-touch-icon.png
  • Пуснете apple-touch-icon.png в основната директория на уеб сървъра, за да може да бъде достъпен на domain.com/apple-touch-icon.png
  • Тествайте иконата на отметка на началния екран на уебсайтовете си, като посетите сайта от Safari в iOS и след това докоснете „Добавяне към началния екран“
  • Погледнете началния екран на устройството с iOS и ще видите отметката, запазена там с новата ви персонализирана икона, като екранната снимка по-горе

Докато файлът е правилно наименуван и в главната директория на уеб сървъра, Mobile Safari ще знае какво да прави с него, така че не са необходими допълнителни настройки, за да се покаже специфичната за iOS favicon.

За справка, ето нашето персонализирано изображение „apple-touch-icon.png“, което използваме за OSXDaily.com, тази примерна икона на отметка е създадена и оразмерена по подходящ начин за дисплеи на ретината ():

Ще забележите, че действителният файл с икони няма запазено пречупване на светлината върху иконата, iOS се справя с това сама. Можете да използвате всяко изображение, което искате, но бих препоръчал да създадете такова, което улавя познатия потребителски интерфейс на съществуващите икони на iOS.

Това очевидно не е същото като да имате специално приложение за iOS, но прилично мобилно потребителско изживяване от мрежата е добра идея и избягва това, което може да бъде високата цена на разработването на приложение за iOS.

И хей, ако сте загрижени за неща като това, вероятно използвате Photoshop, за да проектирате поне иконите, нали? Така че вижте някои, докато сте там.

Задайте „apple-touch-icon.png“, за да персонализирате уеб сайтове iPhone Bookmark FavIcon