З моменту створення картинки 16х16 пікселів змінилася сама концепція фавікона. Тепер фавікон повинен працювати з цілою серією іконок, заточених під тачскрін, з плитковим інтерфейсом нових версій Windows, зі спеціальними можливостями Retina дисплеїв і т.д. Комплексне рішення (від realfavicongenerator) включає в себе досить довгий список всіляких варіантів:
Хоча більшість з цих файлів можна і просто покласти в корінь вашого сайту, а відповідні додатки виберуть, що їм необхідно, не прописуючи всі їх в явному вигляді в HTML, все ж це не найвдаліший підхід. Занадто багато контенту потрібно створити, а потім ще й обслуговувати. Один масштабується файл буде працювати набагато краще. Наприклад, логотип нашого сайту збережений у форматі favicon.svg:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Фавікон можна додати рядком коду між тегів head:
Складові малюнка виконані окремими, які перекривають один одного фігурами: значок повинен мати розмір 16х16 пікселів. Тут важливі простота і чіткість.
З тих же самих причин фон в SVG іконці прозорий, так що її можна використовувати в різних ситуаціях.
Viewbox для SVG повинен бути квадратним.
Малюнок повинен займати найбільшу площу на viewBox'е (полотно в SVG).
тег
описує цілі, для яких призначений малюнок; також варто додати <desc> і <title> для кожного полігону <polygon>.</p>
<p>Необхідно по максимуму оптимізувати і мініфіціровать ваш SVG, щоб файл на виході вийшов якомога менше.</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/images/131/sozdaniesvgikonokdlyasaytafaviconsvg-b7e9b628.jpg" title="Створення svg іконок для сайту (favicon svg) (іконок)" alt="Створення svg іконок для сайту (favicon svg)" /></div></p>
<p>Практичний курс по верстці адаптивного Лендінзі з нуля!</p>
<p>Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів</p>
<p>Щоб SVG заробив необхідно вказувати MIME тип image / svg + xml.</p>
<h3>Додаємо підтримку iOS</h3>
<p>В iOS 9 також підтримуються SVG фавікона в закріплених закладках, але з деякими застереженнями:</p>
<p>Елементи SVG повинні бути чорного кольору.</p>
<p>На засланні на фавікон повинен бути вказаний неофіційний атрибут mask-icon.</p>
<p>Не обов'язково, але колір можна змінити також за допомогою неофіційного атрибута color. Підтримувані значення hexadecimal, keyword і rgb. Не рекомендується використовувати яскраві кольори.</p>
<p>З огляду на вищеописані умови, я б використав новий SVG файл без інформації про квіти:</p>
<p>Щоб це запрацювало на iOS, додаємо рядок:</p>
<h3>Збираємо думки разом</h3>
<p>Припустимо, що вам більше не потрібно підтримувати IE8 і більш ранні версії, значить, формат .ico можна викинути, а браузерам залишити файл PNG. Щоб фавікон відображався у всіх браузерах і не забути про SVG, розташуємо посилання в наступному порядку:</p>
<p>Ми відмовилися від використання формату .ico: якби ми поклали в корінь сайту файл favicon.ico, то браузери використовували б його замість інших, і не важливо які директиви ви вказали в хедері.</p>
<p>Для iOS і IE все ще потрібно вказувати окремі іконки; SVG в даних браузерах ще не працює.</p>
<h3>висновок</h3>
<p>SVG неначе створений для фавікона, і залишається тільки сподіватися, що в недалекому майбутньому і Chrome буде його підтримувати. Ідеальним було б, щоб в одному SVG файлі для різних ступенів деталізації і розмірів використовувалися різні елементи <symbol> або <use>... хоча ми і так вже хочемо занадто багато чого.</p>
<p>Редакція: Команда webformyself.</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/images/131/sozdaniesvgikonokdlyasaytafaviconsvg-b7e9b628.jpg" title="Створення svg іконок для сайту (favicon svg) (іконок)" alt="Створення svg іконок для сайту (favicon svg)" /></div></p>
<p>Практичний курс по верстці адаптивного Лендінзі з нуля!</p>
<p>Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів</p>
<p>Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі</p>
<h4>Схожі статті</h4>
<ul>
<li>
<p><a href="/articles/poshuk-vid-google-dlja-sajtu.php">Пошук від google для сайту</a></p>
</li>
<li>
<p><a href="/articles/vikonuetsja-ustanovka-wordpress-na-hosting.php">Виконується установка wordpress на хостинг, створення бази даних та створення сайту на хостингу</a></p>
</li>
<li>
<p><a href="/articles/pravilna-struktura-sajtu-dlja-prosuvannja.php">Правильна структура сайту для просування</a></p>
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
<footer class="igrzom-footer clearfix">
<ul>
<li><a href="/articles/jaki-kriterii-viznachennja-sharazhnosti-vuzu.php">Які критерії визначення «шаражності» вузу</a></li>
<li><a href="/articles/virshi-do-podarunka-kastrulja.php">Вірші до подарунка каструля</a></li>
<li><a href="/articles/privitannja-z-dnem-narodzhennja-odnogrupnici-2.php">Привітання з днем народження одногрупниці</a></li>
<li><a href="/articles/standartizacija-zabarvlen-sobak-fcicopyright.php">Стандартизація забарвлень собак fcicopyright © переклад олени фёдоровойціркуляр fci №</a></li>
<li><a href="/articles/vigotovlennja-altanok-z-dereva.php">Виготовлення альтанок з дерева</a></li>
</ul>
<p>© Copyright 2016 - 2024 | Всі права захищен</p>
<br>
<p><a href="/privacy.php">Privacy Policy</a></p>
<!--LiveInternet counter--><script type="text/javascript">
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t50.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet' "+
"border='0' width='31' height='31'><\/a>")
</script><!--/LiveInternet-->
</footer>
</div>
</div></body>
</html>
