CODEWITHSUNDEEP
faviconfont-awesome
Connor Black
Connor Black

Reputation: 7181

Use Font Awesome Icon As Favicon

Is it possible to use a Font Awesome icon as a favicon icon? You know, the little icon that appears along-side a website title in the browser tab?

Upvotes: 147

Views: 80380

Answers (6)

eclipse
eclipse

Reputation: 3021

I've also created an online Font Awesome Favicon Generator which has additional features that were missing from Paul Ferrett's solution.

favicon

  • preview of favicon live in browser
  • sizing of the icon
  • transparent icon and background
  • huge image size (icon can be as detailed as you want)
  • iconset can be updated via github pull request
  • update 06/2017 update to Font Awesome 4.7
  • update 06/2017 fuzzy search and keyword search
  • update 09/2017 stacked icons
  • update 06/2018 update to Font Awesome 5.0.13
  • update 11/2021 update to Font Awesome 5.15.4
  • update 04/2024 update to Font Awesome 6.5.2

If you want additional features please feel free to submit an issue or a pull request here.

Upvotes: 107

Dem Pilafian
Dem Pilafian

Reputation: 5986

Font Awesome is hosted on a number of popular CDNs, enabling you to link directly to the individual SVG files. Just set the href URL of the <link> element to the desired SVG in the hosted Font Awesome library.

Example HTML for a "rocket" bookmark icon hosted on jsDelivr:

<head>
   <link rel=icon href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/rocket.svg>
</head>

What it looks like in Chrome:
screenshot

A limitation of this approach is that most browsers do not support changing the color or modifying any style properties.

Safari supports custom colors if you use the mask-icon relation and color attribute. The color bookmark icon will display on Safari's pinned tabs and also regular tabs if the user has selected the "Show website icons in tabs" option.

Example HTML for a color bookmark icon:

<head>
   <link rel=mask-icon color=teal
      href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/rocket.svg>
</head>

What it looks like in Safari:
screenshot

Take a ride on the rocket:
https://centerkey.com/files/rocket.html

Upvotes: 15

Geeky Guy
Geeky Guy

Reputation: 9399

Method 1

  1. Just visit fontawasome gallery.
  2. Now search and open your required icon i.e edit icon.
  3. Click on download svg as shown in given image.

enter image description here

  1. Now you can use this svg file in your website as favicon see How to set favicon.

Method 2

Take a screenshot of something with the desired character, cut the part you want and save it as an image (.ico).

Seriously now, you may want to check the formats supported by each browser: http://en.wikipedia.org/wiki/Favicon#File_format_support

If your characters are image or vector files, you'll be ok with most browsers but IE (because MS hates you). Otherwise, well, you'll really have to save them as images first.

Upvotes: 48

Paul Ferrett
Paul Ferrett

Reputation: 4150

EDIT: I suggest you use http://gauger.io/fonticon

I've created an online Font Awesome Favicon Generator to do just that!

See Font Awesome Favicon Generator.

Upvotes: 350

otherDewi
otherDewi

Reputation: 1098

Any image can be uploaded to a favicon generator site such as

http://favicon-generator.org/

or

http://www.favicon.cc/

follow the online instructions on the site you choose. Its usually just a three step process. Save the favicon in the top level of your site.

For compatibility across browsers I recommend always using images for favicons. Even if some sites you create are only for modern browsers still convert your favicon artwork to an image. Consistently using the same process gives you one less thing to worry about.

Upvotes: 11

Shakeel Ahmed
Shakeel Ahmed

Reputation: 1848

It is not possible that you can use direct awesome font character as favicon without converting into image. You must convert character into image ..

Upvotes: 8

Related Questions