ファビコンとしてフォント素晴らしいアイコンを使用する


109

Font Awesomeアイコンをファビコンアイコンとして使用することはできますか?ブラウザのタブでウェブサイトのタイトルの横に表示される小さなアイコンですか?

回答:


38

はい、そうです。希望するキャラクターのスクリーンショットを撮り、必要な部分を切り取り、画像(.ico)として保存するだけです。

真剣に今、あなたは各ブラウザでサポートされているフォーマットをチェックしたいかもしれません:http : //en.wikipedia.org/wiki/Favicon#File_format_support

キャラクターが画像またはベクターファイルの場合、ほとんどのブラウザーで問題ありませんが、IE (MSがあなたを嫌うため)です。そうでなければ、まあ、あなたは本当にそれらを最初に画像として保存する必要があります。


3
ライセンスはそれを許可しますか?
art-solopov 2015

3
@ art-solopovはい、あります。ライセンスページで確認できます:fortawesome.github.io/Font-Awesome/license
Renan

OFLを読みましたが、フォントの形式を変更したり、グリフから画像を構成したりする方法は見つかりませんでした。何か不足している場合は申し訳ありませんが、特定のセクションを教えていただけますか?ありがとうございました。
art-solopov 2015

スクリーンショットの提案に対して反対票を投じました。これを達成するための多くの無損失の方法があります。
metaColin 2018年

2
@marcogmonteiroあなたが訪問した場合fontawesome.com/downloadあなたがの.svgファイルとしてアイコンをダウンロードすることができます。ほとんどのブラウザーは、.svgアセットをファビコンとして受け入れます。古いバージョンのIEをサポートする必要がある場合は、PhotoshopまたはIllustratorを使用して.svgを変換することにより、きれいなラスターアセット(.pngなど)を取得できます。
metaColin

289

編集:私はあなたがhttp://gauger.io/fonticonを使用することをお勧めします


私はそれを行うためにオンラインのFont Awesome Favicon Generatorを作成しました!

Font Awesome Favicon Generatorを参照してください。


7
素晴らしく、効果的です。+1!
2015

2
色を定義できるようにする必要があります!

6
@Freddyは実際にはジェネレーターがすでにその機能を備えていますが、そのためのUIを作成していません。RGB HEXカラー値を使用して、背景と前景のパラメーターbgとfgをそれぞれ渡します。たとえば、paulferrett.com / fontawesome
Paul

7
@ paul-ferrett:生成されるアイコンのサイズを変更する方法はありますか?
vgoklani

4
素晴らしい実装。残念ながら、今日では16x16のファビコンだけでは不十分です。必要なすべてのファビコンをすべての必要なサイズで含むzipをダウンロードするとよいでしょう。
coorasse

85

また、Paul Ferrettのソリューションにはなかった追加機能を備えたオンラインのFont Awesome Favicon Generatorも作成しました。

ファビコン

  • ブラウザでライブのファビコンのプレビュー
  • アイコンのサイズ変更
  • 透明なアイコンと背景
  • 巨大な画像サイズ(アイコンは好きなだけ詳細にすることができます)
  • アイコンセットはgithubプルリクエストで更新できます
  • Font Awesome 4.7のアップデート2017年6月アップデート
  • 2017年6月更新のあいまい検索とキーワード検索
  • 2017年9月更新のスタックアイコン
  • 2018年6月の Font Awesome 5.0.13へのアップデート
  • Font Awesome 5.5.0へのアップデート11/2018のアップデート
  • 更新2019年4月 Font Awesome 5.8.1への更新
  • 2019年4月4日更新Font Awesome Proのサポートが追加されました!

追加機能が必要な場合は、ここに問題またはプルリクエストを送信してください


@vgoklani提案があれば私に知らせてください:)
eclipse

@eclipse:ありがとうございました!これは私をとても苦痛から救いました。
サム

最初にいくつかの注意を払って、この多大な努力をありがとう画像をダウンロードするとき、幅と高さは常に1024ですが、実際のサイズにサイズ変更する必要があります。 2番目:スライダー値のサイズを書き込む必要があります。数値ボックスで設定することができます
Saif

1
積み重ねられたアイコンのサポートでそれを強化しました。PRは審査待ちです。
2017

2
ライブタブプレビュー機能が大好きです。
Tot Zam 2017

11

次のようなファビコンジェネレーターサイトに画像をアップロードできます。

http://favicon-generator.org/

または

http://www.favicon.cc/

選択したサイトのオンライン指示に従ってください。通常は3ステップのプロセスです。サイトのトップレベルにファビコンを保存します。

ブラウザ間の互換性のために、私は常にファビコンの画像を使用することをお勧めします。作成したいくつかのサイトが最新のブラウザー専用である場合でも、ファビコンのアートワークを画像に変換します。同じプロセスを一貫して使用することで、心配することが1つ少なくなります。


2
「サイトがローカルの場合、ファビコンはChromeに表示されないことに注意してください。サイトをWebホストにアップロードした場合のみです。」不正解です。
2015

favアイコンがローカルに表示されない場合。stackoverflow.com/questions/16375592/...
otherDewi

7

画像に変換せずに直接素晴らしいフォント文字をファビコンとして使用することはできません。文字を画像に変換する必要があります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.