Поблагодарить:
Вторник, 10 Июль 2018 08:49

Как добавить favicon на сайт, картинку png

В далёкие времена, когда сайтостроение только зарождалось, некоторые вебмастера чуть ли не гордились тем, какие favicon’ы они сделали себе на сайт. Всё дело в том, что иконка представляла собой bitmap (*.bmp) файл, имея разрешение 16х16 пикселей, в очень редких случаях 32х32. Далее этому файлу меняли расширение на ico, и достаточно было просто добавить картинку в корневой каталог и во все каталоги, где находились html-файлы страниц сайта.

Однако современные методы зашли далеко вперёд и такая иконка покажется скучной, а может даже унылой, фраза «ты, что это в Paint нарисовал?» звучит, как оскорбление и на место *.bmp пришли *.png . Так как добавить то картинку под иконку?

Для этого в конструкцию <head></head> добавляется следующий тег:

<link rel="icon" type="image/png" href="/favicon.png" />

Разрешение файлов с 32х32 так же изменилось, сегодня иконки делают 57х57 и более. Так же стоит отметить для владельцев сайтов, кто верстает сайты для посетителей, заходящих с айфонов и точей следующие строки:

<link rel="apple-touch-icon" href="/apple-touch-favicon.png" />

Нужно отметить, что в этом случае при просмотре будут закруглены углы и наложен блик, самим устройством. Если же Вам нужна иконка в оригинале без эффектов от девайсов, воспользуйтесь таким тегом:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-favicon.png" />

Спонсоры: