Здравствуйте дорогие друзья, в статье под названием 7 причин установить фавикон на сайт я упомянул о том, что на рабочем столе мобильных телефонов вместо фавикона должна отображаться отдельная иконка блога.

Я начал читать различную литературу в этом плане, от европейских блогов до официальной документации Apple, которая диктует нам свои правила.

В целом для решение поставленной задачи нам необходимо, 4 разных по размеру картинки формата PNG:

114 x 114 - iPhone, iPod touch
144 x 144 - iPad
72 x 72 - iPad
57 x 57 - iPhone, iPod touch

данные картинки следует загрузить прямо к себе на блог и иметь следующие названия:

apple-touch-icon-xlarge.png - 144x144
apple-touch-icon-large.png - 114x114
apple-touch-icon-medium.png - 72x72
apple-touch-icon-small.png - 57х57

в результате чего в HTML код страницы блога в самый вверх перед закрывающим тегом </head> необходимо приписать вот такой код:

можно увеличить, клик-клик

обратите внимание на параметр rel="apple-touch-icon-precomposed", а если говорить точно, то на -precomposed, данный параметр запретит будущим иконкам отображать на ней блики и небольшую тень вокруг неё.

а параметр sizes="72x72" будет задавать размер данной иконки

После выполненных действий я решил посмотреть как будет выглядеть иконка моего блога размещенная на рабочем столе моего планшета под управлением Android и вот, что у меня получилось:

До и После

В целом я доволен решением поставленной задачи, так как большая часть мобильных пользователей моего блога используют планшеты и смартфоны под управлением Android.