Як підключити фавікон?
Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 26-05-2013, 22:38 2 621 0Для того щоб на закладці браузера з'явився значок Вашого сайту необхідно підключити фавікон (favicon).
На сьогодні окрім стандартного значка .ісо браузери підтримують і картинки у різних форматах.
Бажано свій значок зробити прозорим у форматі .png, це дозволить уникнути проблем з різними темами для браузерів.
1. Підключаємо стандартим методом, вставляємо між тегами <head></head>:
<link rel="icon" href="https://rullan.in.ua/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://rullan.in.ua/favicon.ico" type="image/x-icon">
"shortcut icon" - для Internet Explorer.
В html5 застосовується атрибут "sizes" означає що іконка може масштабуватися (використовується векторний формат, як SVG). Якщо атрибут sizes відсутній, браузер відобразить іконку з розмірами, відповідними реальному розміру графічної картинки.
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
2. Підключаємо фавікон для експрес-панелі опери:
Для цього нам потрібно створити картинку мінімум картинки розміром 114*114 пікселів та максимум 260*195 пікселів у форматі PNG, JPG или GIF (анімація не підтримується в gif).
Вставлямо код, що нижче між тегами <head></head>:
<link rel="icon" type="image/png" href="http://path/to/logo.png">
3. Для власників Apple:
<link rel="apple-touch-icon" href="apple-touch-favicon.png"/>Замість "apple-touch-icon" можна написати "apple-touch-icon-precomposed", що забере закругленість.
<!-- Favicon for Desctops -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch- icon-precomposed.png">
Для усіх хто бажає створити власну іконку існує гарний сервіс - favicon-generator.org
