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?
asked Aug 9, 2013 at 21:55
Add a comment
|
6 Answers
EDIT: I suggest you use http://gauger.io/fonticon
I've created an online Font Awesome Favicon Generator to do just that!
answered Feb 10, 2015 at 8:47
-
2Need to allow us to define the color!– user2341406Commented Apr 29, 2015 at 3: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, paulferrett.com/fontawesome-favicon/… Commented Apr 30, 2015 at 4:03
-
7@paul-ferrett: is there a way to change the size of generated icon?– vgoklaniCommented May 17, 2015 at 21:40
-
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: stackoverflow.com/a/26092157/544294 Commented May 3, 2017 at 0:39
-
5Nice 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.– coorasseCommented Mar 10, 2018 at 10:02
I've also created an online Font Awesome Favicon Generator which has additional features that were missing from Paul Ferrett's solution.
- 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.
-
-
-
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 Commented Jan 1, 2017 at 23:23
-
1I've enhanced it with stacked icons support. PR is pending to review.– trungCommented Sep 15, 2017 at 20:52
-
3
Method 1
- Just visit fontawasome gallery.
- Now search and open your required icon i.e edit icon.
- Click on download svg as shown in given image.
- 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.
-
5
-
4@art-solopov Yes, it does - you can check it out at their license page: fortawesome.github.io/Font-Awesome/license Commented Jul 14, 2015 at 4: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. Commented Jul 21, 2015 at 8:59
-
Downvoted for suggesting screenshot. There are many lossless ways to achieve this. Commented Jan 11, 2018 at 0:05
-
3@marcogmonteiro If you visit 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. Commented Feb 28, 2020 at 3:23
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:
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:
Take a ride on the rocket:
https://centerkey.com/files/rocket.html
answered Aug 29, 2020 at 10:23
Any image can be uploaded to a favicon generator site such as
or
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.
-
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. Commented Feb 12, 2015 at 11:12
-
if you have issues seeing your fav icon locally see. stackoverflow.com/questions/16375592/… Commented Mar 1, 2018 at 6:16
It is not possible that you can use direct awesome font character as favicon without converting into image. You must convert character into image ..
answered Jan 27, 2014 at 8:12
