Від автора: прості, часто геометричні і виконані в різних розмірах іконки (favicon) відмінно підходять під формат SVG. На жаль, до недавнього часу браузери дуже погано підтримували SVG фавиконы. У Firefox 41 з’явилася підтримка даного формату, в Safari 9 для десктопної і мобільного версії (з деякими поступками). Проте в IE/Edge і Chrome все ще немає підтримки, принаймні на даний момент. Тим не менш, ситуація незабаром зміниться (повинна змінитися). Так що варто приділити трохи часу і вивчити можливості та синтаксис SVG фавиконов, щоб підготувати ваш сайт до прийдешніх часів.
Проблема
З моменту створення картинки 16х16 пікселів змінилася сама концепція фавиконов. Тепер фавикон повинен працювати з цілою серією іконок, заточених під тачскріни, з плитковим інтерфейсом нових версій Windows, зі спеціальними можливостями Retina дисплеїв і т. д. Комплексне рішення (від realfavicongenerator) включає в себе досить довгий список всіляких варіантів:
Хоча більшість з цих файлів можна просто покласти в корінь вашого сайту, а відповідні додатки виберуть, що їм необхідно, не прописуючи всі їх в явному вигляді в HTML, все ж це не найкращий підхід. Занадто багато контенту потрібно створити, а потім ще й обслуговувати. Один масштабований файл буде працювати набагато краще. Наприклад, логотип нашого сайту збережений у форматі favicon.svg:
the new code favicon
І виглядає так:
Фавикон можна додати рядком коду між тегами head:
Кілька зауважень:
Складові малюнка виконані окремими, не перекривають один одного фігурами: значок повинен мати розмір 16х16 пікселів. Тут важливі простота і чіткість.
По тим же самим причинам фон в SVG іконці прозорий, так що її можна використовувати в різних ситуаціях.
Viewbox для SVG повинен бути квадратним.
Малюнок повинен займати найбільшу площу на viewBox’е (полотно в SVG).
Тег описує цілі, для яких призначений малюнок; також варто додати і для кожного полігону .
Необхідно максимально оптимізувати і минифицировать ваш SVG, щоб файл на виході вийшов якомога менше.
Щоб SVG заробив необхідно вказувати тип MIME image/svg+xml.
Додаємо підтримку iOS
У iOS 9 також підтримуються SVG фавиконы в закріплених закладках, але з деякими застереженнями:
Елементи SVG повинні бути чорного кольору.
У посиланні на фавикон повинен бути вказаний неофіційний атрибут mask-icon.
Не обов’язково, але колір можна змінити за допомогою неофіційного атрибут color. Підтримувані значення hexadecimal, keyword і rgb. Не рекомендується використовувати яскраві кольори.
Враховуючи вищеописані умови, я б використав новий SVG-файл без інформації про кольорах:
the new code favicon
Щоб це запрацювало на iOS, додаємо рядок:
Збираємо думки разом
Припустимо, що вам більше не потрібно підтримувати IE8 і більш ранні версії, значить, формат .ico можна викинути, а браузерам залишити файл PNG. Щоб фавикон відображався у всіх браузерах і не забути про SVG, розташуємо посилання в такому порядку:
Ми відмовилися від використання формату .ico: якби ми поклали в корінь сайту файл favicon.ico, то браузери використовували його замість інших, і не важливо які директиви ви вказали в хедері.
Для iOS і IE все ще потрібно вказувати окремі іконки; SVG даних браузерах ще не працює.
Висновок
SVG наче створений для фавиконов, і залишається тільки сподіватися, що в недалекому майбутньому і Chrome буде його підтримувати. Ідеальним було б, щоб в одному файлі SVG для різних ступенів деталізації і розмірів використовувалися різні елементи або … хоча ми і так вже хочемо занадто багато.
