142

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?

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Connor Black
  • 6,921
  • 12
  • 39
  • 70

6 Answers6

344

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.

Paul Ferrett
  • 4,090
  • 2
  • 17
  • 19
  • 2
    Need to allow us to define the color! –  Apr 29 '15 at 03:19
  • 6
    @Freddy actually the generator is already capable of that, I just haven't built the UI for it. Pass in params bg and fg for the background and foreground, respectively, using RGB HEX colour values. for example, http://paulferrett.com/fontawesome-favicon/generate.php?icon=heart&bg=FFFDDB&fg=FA3C3C – Paul Ferrett Apr 30 '15 at 04:03
  • 7
    @paul-ferrett: is there a way to change the size of generated icon? – vgoklani May 17 '15 at 21:40
  • I wish google would index this app. Every time i do a google search I end up back here and don't see any listing in the search engine for this awesome app. – jtlindsey Jun 27 '16 at 21:20
  • I gave +1 because you solved my immediate problem with your online tool. However this is a site for programmers and you did not say anything about how you convert the font glyph to the favicon file. I am not any better at programming the conversion after reading your answer. When your site goes down some day in future this answer will be useless. A good answer would describe the process that your online tool uses. :) – snap Jul 04 '16 at 15:29
  • @PaulFerrett: +1. Thanks for great work! I just tested and it works like charm. I'm curious, how is that possible that you exported SVG to ICO? If it's not a secret, could you please share. Thanks again. – Viet May 02 '17 at 13:52
  • 1
    @Viet it's a super simple PHP script that uses the ttf font provided by font awesome together with image magick to generate the icon. Pretty similar to this code: http://stackoverflow.com/a/26092157/544294 – Paul Ferrett May 03 '17 at 00:39
  • 5
    Nice implementation. Unfortunately nowadays just the 16x16 favicon is not enough. Would be nice to download a zip containing all necessary favicons in all necessary sizes. – coorasse Mar 10 '18 at 10:02
  • @paul if use your generator will it be copy right issues???????????????????????? – giveJob Dec 13 '18 at 05:36
  • Very cool, would be nice to be able to change the color of the stacked icon, as well as a searchbar. – Souleste Aug 06 '19 at 15:32
103

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/2018 update to Font Awesome 5.5.0
  • update 04/2019 update to Font Awesome 5.8.1
  • update 11/2021 update to Font Awesome 5.15.4

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

eclipse
  • 2,831
  • 3
  • 26
  • 34
  • @vgoklani If you have suggestions please let me know :) – eclipse Sep 09 '16 at 06:44
  • @eclipse: Thank you so much! This has saved me so much pain. – sam Nov 26 '16 at 18:10
  • Thank you for this great effort, with some notices **first:** when I download an image, it is always 1024 for width and height, it should be resized to the actual size. **second:** the size of the slider value should be written or better can be set in a numberbox – Saif Jan 01 '17 at 23:23
  • 1
    I've enhanced it with stacked icons support. PR is pending to review. – trung Sep 15 '17 at 20:52
  • 3
    I love the live tab preview feature! – Tot Zam Dec 11 '17 at 18:34
  • I can't figure out how to use it with font awesome pro. Maybe that functionality was removed. I just downloaded an svg and used realfavicongenerator.net – gamingexpert13 Apr 07 '21 at 22:56
47

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.

Geeky Guy
  • 9,229
  • 4
  • 42
  • 62
  • 5
    Does the license permit it though? – art-solopov Jul 13 '15 at 14:49
  • 4
    @art-solopov Yes, it does - you can check it out at their license page: http://fortawesome.github.io/Font-Awesome/license/ – Geeky Guy Jul 14 '15 at 04:37
  • I've read through the OFL and I haven't found anything related to changing the font's format or composing an image from glyphs. Sorry if I'm missing anything, could you please point me to the specific section? Thank you. – art-solopov Jul 21 '15 at 08:59
  • Downvoted for suggesting screenshot. There are many lossless ways to achieve this. – metaColin Jan 11 '18 at 00:05
  • @metaColin care to explain what those lossless ways are? – marcogmonteiro Feb 24 '20 at 13:31
  • 3
    @marcogmonteiro If you visit https://fontawesome.com/download you can download the icons as .svg files. Most browsers will accept an .svg asset as a favicon. If you need to support old versions of IE, you can get a nice clean raster asset (such as a .png) by converting the .svg using Photoshop or Illustrator. – metaColin Feb 28 '20 at 03:23
15

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

Dem Pilafian
  • 5,625
  • 6
  • 39
  • 67
11

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.

otherDewi
  • 1,098
  • 10
  • 24
  • 2
    "Note that a favicon will not show up in Chrome if your site is local, only when you upload the site to your web host". that's not correct. – U r s u s Feb 12 '15 at 11:12
  • if you have issues seeing your fav icon locally see. https://stackoverflow.com/questions/16375592/favicon-not-showing-up-in-google-chrome – otherDewi Mar 01 '18 at 06:16
8

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

Shakeel Ahmed
  • 1,526
  • 17
  • 22