З моменту створення картинки 16х16 пікселів змінилася сама концепція фавікона. Тепер фавікон повинен працювати з цілою серією іконок, заточених під тачскрін, з плитковим інтерфейсом нових версій Windows, зі спеціальними можливостями Retina дисплеїв і т.д. Комплексне рішення (від realfavicongenerator) включає в себе досить довгий список всіляких варіантів:
Хоча більшість з цих файлів можна і просто покласти в корінь вашого сайту, а відповідні додатки виберуть, що їм необхідно, не прописуючи всі їх в явному вигляді в HTML, все ж це не найвдаліший підхід. Занадто багато контенту потрібно створити, а потім ще й обслуговувати. Один масштабується файл буде працювати набагато краще. Наприклад, логотип нашого сайту збережений у форматі favicon.svg:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Фавікон можна додати рядком коду між тегів head:
Складові малюнка виконані окремими, які перекривають один одного фігурами: значок повинен мати розмір 16х16 пікселів. Тут важливі простота і чіткість.
З тих же самих причин фон в SVG іконці прозорий, так що її можна використовувати в різних ситуаціях.
Viewbox для SVG повинен бути квадратним.
Малюнок повинен займати найбільшу площу на viewBox'е (полотно в SVG).
тег
Необхідно по максимуму оптимізувати і мініфіціровать ваш SVG, щоб файл на виході вийшов якомога менше.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Щоб SVG заробив необхідно вказувати MIME тип image / svg + xml.
Додаємо підтримку iOS
В iOS 9 також підтримуються SVG фавікона в закріплених закладках, але з деякими застереженнями:
Елементи SVG повинні бути чорного кольору.
На засланні на фавікон повинен бути вказаний неофіційний атрибут mask-icon.
Не обов'язково, але колір можна змінити також за допомогою неофіційного атрибута color. Підтримувані значення hexadecimal, keyword і rgb. Не рекомендується використовувати яскраві кольори.
З огляду на вищеописані умови, я б використав новий SVG файл без інформації про квіти:
Щоб це запрацювало на iOS, додаємо рядок:
Збираємо думки разом
Припустимо, що вам більше не потрібно підтримувати IE8 і більш ранні версії, значить, формат .ico можна викинути, а браузерам залишити файл PNG. Щоб фавікон відображався у всіх браузерах і не забути про SVG, розташуємо посилання в наступному порядку:
Ми відмовилися від використання формату .ico: якби ми поклали в корінь сайту файл favicon.ico, то браузери використовували б його замість інших, і не важливо які директиви ви вказали в хедері.
Для iOS і IE все ще потрібно вказувати окремі іконки; SVG в даних браузерах ще не працює.
висновок
SVG неначе створений для фавікона, і залишається тільки сподіватися, що в недалекому майбутньому і Chrome буде його підтримувати. Ідеальним було б, щоб в одному SVG файлі для різних ступенів деталізації і розмірів використовувалися різні елементи
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі