Как да направите икона на уебсайт за iPhone

Как да направите икона на уебсайт за iPhone

Броят на устройствата, работещи в операционната система iOS нараства всяка година. Тази статия е за уебмастъри, които оптимизират сайтовете си за изгледи с iPhone и iPad. За да се покаже желаната икона на сайта при добавяне към отметки в браузъра Safari или при добавяне на работния плот iPhone, трябва специално да създадете изображения. Favicon не работи в този случай.

За сайтове, на които няма такава икона, в отметките на Safari се показва сиво заместител и на работния плот се създава икона въз основа на екранна снимка на първата страница. Не е красиво. Но е достатъчно да отделите само няколко минути, за да направите своя собствена икона на сайта за iPhone …

Как да направите икона на уебсайт за iPhone

Как да създадете икона на уебсайт за iPhone

  1. Трябва да създадете изображение във формат PNG с размер 152x152px във всеки графичен редактор. Ако работите във Photoshop, това е формат PNG 24. Можете дори да зададете прозрачност.
  2. Запазете файла като “apple-touch-icon.png”.
  3. Качете получения файл чрез FTP на сървъра, в основната папка на сайта. Например /assets/pictures/9842/content_apple-touch-icon.png.

Сега, когато добавите отметка към вашия сайт, иконата, която сте създали, ще се появи в Safari. И ако изберете “Добавяне към начало”, тогава на работния плот.

интересни 6.1-инчови iPhone 12 и iPhone 12 Pro ще бъдат пуснати в продажба първи FAS ще започне нова проверка Apple

Как да направите икона на уебсайт за iPhone

Веднага ще отговоря на всякакви въпроси

Трябва ли да напиша нещо в самия HTML документ?

Не, няма нужда специално да регистрирате нещо в метето. Мобилните браузъри сами търсят този файл на вашия сайт. Освен това, ако такъв файл го няма, сървърът връща грешка 404. Погледнете в дневниците на сървъра, има много такива заявки. Освен това – тези файлове се „търсят“ не само в момента на добавяне на сайта към началния екран, но и при всяко посещение!

И може да се изненадате, но Android устройства също използват икони apple-touch-icon.png, когато добавят отметка на сайт към работния плот :).

Но какво ще кажете за Retina, трябва ли да направите няколко изображения с различна резолюция?

Преди това беше необходимо да се направят няколко изображения, сега е достатъчно едно голямо (152x152px). По принцип Apple редовно променя разделителните способности на екрана и стандартите за разработчиците. Вероятно, когато прочетете тази статия, нещо вече се е променило. Но най-актуалният размер винаги може да бъде намерен на връзката /assets/pictures/9844/content_apple-touch-icon.png. Това е най-правилният формат на иконите :).

Rate article
Мобилни телефони - новини, рецензии и лайфхакове.
Add a comment