Використовуйте піктограму Awesome Icon як Favicon


109

Чи можна використовувати піктограму Awesome Font як піктограму favicon? Знаєте, маленький значок, який з’являється поруч із заголовком веб-сайту на вкладці браузера?

Відповіді:


38

Так. Просто зробіть скріншот чогось із потрібним символом, виріжте потрібну частину і збережіть її як зображення (.ico).

Серйозно зараз ви можете перевірити формати, які підтримуються кожним браузером: http://en.wikipedia.org/wiki/Favicon#File_format_support

Якщо ваші символи - це зображення або векторні файли, ви не будете добре з більшістю браузерів, окрім IE (тому що MS вас ненавидить) . Інакше, ну, вам справді доведеться спочатку зберегти їх як зображення.


3
Чи дозволяє це ліцензія?
— арт-соловєв

3
@ art-solopov Так, це так - ви можете перевірити це на їх ліцензійній сторінці: fortawesome.github.io/Font-Awesome/license
— Ренан

Я прочитав OFL і не знайшов нічого, пов’язаного зі зміною формату шрифту або складанням зображення з гліфів. Вибачте, якщо я чогось не пропускаю, чи не могли б ви вказати мені конкретний розділ? Дякую.
— арт-соловєв

Запропоновано запропонувати скріншот. Є безліч збиткових способів досягти цього.
— metaColin

2
@marcogmonteiro Якщо ви відвідуєте fontawesome.com/download, ви можете завантажити піктограми у вигляді .svg файлів. Більшість веб-переглядачів сприйме файл .svg як фавікон. Якщо вам потрібно підтримувати старі версії IE, ви можете отримати хороший чистий растровий актив (наприклад, .png), перетворивши .svg за допомогою Photoshop або Illustrator.
— metaColin

289

EDIT: Я пропоную вам скористатися http://gauger.io/fonticon


Я створив онлайн-генератор шрифтів Favicon Favicon, щоб зробити саме це!

Див . Генератор шрифтів Favicon .


7
Гарний, швидкий та ефективний. +1!
— U rsus

2
Потрібно дозволити нам визначити колір!

6
@Freddy насправді генератор вже на це здатний, я просто не створив інтерфейс для цього. Розділіть параметри bg та fg для фону та переднього плану відповідно, використовуючи значення кольорів RGB HEX. наприклад, paulferrett.com/fontawesome-favicon/…
— Пол Феррет

7
@ paul-ferrett: чи є спосіб змінити розмір створеної піктограми?
— вгоклани

4
Приємна реалізація. На жаль, сьогодні просто 16х16 фавікону недостатньо. Було б добре завантажити поштовий індекс, що містить усі необхідні фавікони у всіх необхідних розмірах.
— coorasse

85

Я також створив онлайн- генератор шрифтів Favicon Favicon, який має додаткові функції, яких бракувало у рішенні Пола Феррета.

фавікон

  • Попередній перегляд favicon live у браузері
  • розмір піктограми
  • прозорий значок і фон
  • величезний розмір зображення (піктограма може бути настільки детальною, як вам потрібно)
  • набір іконок можна оновити за допомогою запиту на тягу github
  • оновлення 06/2017 оновлення Шрифта Awesome 4.7
  • оновлення 06/2017 нечіткий пошук та пошук за ключовими словами
  • оновлення 09/2017 іконки з накопиченням
  • оновлення 06/2018 оновлення шрифту Awesome 5.0.13
  • оновлення оновлення 11/2018 до Font Awesome 5.5.0
  • оновлення 04/2019 оновлення для шрифту Awesome 5.8.1
  • оновлення 04/2019 додана підтримка Font Awesome Pro !

Якщо ви хочете додаткові функції , будь ласка , чи не соромтеся представити питання або запит тягнути тут .


@vgoklani Якщо у вас є пропозиції, повідомте мене :)
— затемнення

@eclipse: Дуже дякую! Це врятувало мені стільки болю.
— сам

Дякую за це велике зусилля, спочатку з деякими повідомленнями : коли я завантажую зображення, воно шириною та висотою завжди 1024, його слід змінити до фактичного розміру. друге: розмір значення слайдера повинен бути записаний або краще його можна встановити в скриньку номерів
— Saif

1
Я покращив його підтримкою з накопиченими іконками. PR очікує на розгляд.
— trung

2
Я люблю функцію попереднього перегляду вкладки!
— Tot Zam

11

Будь-яке зображення можна завантажити на сайт генератора favicon, такий як

http://favicon-generator.org/

або

http://www.favicon.cc/

дотримуйтесь онлайн-інструкцій на обраному вами сайті. Зазвичай це лише три кроковий процес. Збережіть фавікон на найвищому рівні свого сайту.

Для сумісності у веб-переглядачах я рекомендую завжди використовувати зображення для любителів. Навіть якщо деякі створені вами веб-сайти призначені лише для сучасних веб-переглядачів, все-таки перетворять твої художні твори в зображення. Послідовне використання одного і того ж процесу дає вам менше, ніж потрібно турбуватися.


2
"Зауважте, що фавікон не відображатиметься в Chrome, якщо ваш сайт локальний, лише коли ви завантажуєте його на веб-хост". це не правильно.
— U rsus

якщо у вас виникли проблеми з переглядом іконки вашого перегляду на місцевому рівні. stackoverflow.com/questions/16375592 / ...
— otherDewi

7

Неможливо, що ви можете використовувати прямий дивовижний символ шрифту як фавікон без перетворення в зображення. Ви повинні перетворити символ у зображення ..

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.