react-favicon.com

Create favicons and logos for your website using React and JSX

Home

What is a favicon?

It's the icon that shows up next to the title of your website in a browser tab. It's also used for bookmarks and more recently for adding websites to mobile devices home screens.

It looks like this:

Favicon for react-favicon.com

How can you add a favicon?

After you create and download the favicon, a ZIP file will be downloaded into your computer. Unzip the ZIP file and you'll see it has a README file attached. This file has instructions regarding how to add a favicon to your website. Practically, you'll need to copy the files under icons folder into the root folder where you serve static assets from and add the following under the <header> element of the index.html (or whatever the entrypoint is):

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Why should you have one?

It is similar to your website's logo. Your users recognize your brand through this icon. Sometimes when there are too many tabs open and they can't read the title of the website, scanning the icons help them see your website among others.

Using icon-sets

Heroicons

Heroicons has 2 variants: solid and outline. Solid icon-set is available under Heroicons.Solid whereas the outline icon-set is available under Heroicons.Outline. You can check the full list of outline icon names here: Solid Outline.

Example:

<Heroicons.Solid.HeartIcon/>

<Heroicons.Outline.BeakerIcon/>

Feather Icons

The icon-set is available under Feather variable through react-feather library.

Example:

<Feather.Anchor size="120px"/>

<Feather.Camaera size="40px"/>

Font Awesome

After importing the CSS file for Font Awesome library, you can use it through the classes defined in Font Awesome. Search other icons here and change the className property on the i element using the classes listed here.

Example:

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
</style>

<i className='fab fa-font-awesome' style={{
  fontSize: '120px'
}}></i>

<i className='fa-solid fa-at' style={{
  fontSize: '80px'
}}></i>

Using external libraries

External CSS

You can use inlined style tags to import external CSS files:

<style>@import url('https://example.com/external.css')</style>

A real world example of this done to make use of Font Awesome and Google Fonts:

Font Awesome:

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
</style>

Google Fonts:

<style>
@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap');
</style>

External JavaScript

You can use useScript function to import an external JS file:

useScript('https://example.com/external.js')

A real world example of this is done to make use of TailwindCSS:

useScript('https://cdn.tailwindcss.com')