EN

Site Language

English

Content Language

English Polski Deutsch Português

Log in
Join

[Edit]

EN

React - change favicon

2 contributors

7 contributions

0 discussions

3 points

Created by:

501

In this article we would like to show you how to change default favicon in React project.

Quick solution:

Change default favicon file that is located under public/favicon.ico path.

Its path is attached to webpage inside public/index.html file as:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

Where: %PUBLIC_URL% represents public/ directory in default configuration.

Detailed description

To change icon we can select one of the following approaches:

Solution 1: replace public/favicon.ico file to new one *.ico file
(we can change path also).
Solution 2: use *.png image file.
e.g. put example.png file inside public/ folder and attach it inside public/index.html file replacing favicon.ico with example.png in the path.

public/index.html file with example.png used as new favicon.

Note: Here you can find useful article descrbing how to convert images to a proper size.

Alternative titles

Donate to Dirask

Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!

Direct link

Join to our subscribers to be up to date with content, news and offers.

ReactJS

React - Ajax GET request

React - Ajax GET request (class component)

React - Ajax POST request

React - Google Ads / GPT with fluid size on web page

React - Material-UI Select component with array of objects

React - add / remove items from array in state (class component)

React - add / remove items from array in state (functional component)

React - add attributes to dynamic tag name

React - add onClick to div

React - add onClick to div (class component)

React - add scrollbar to the component

React - animated bar chart

React - animated progress bar

React - animation with transition property

React - array as state

React - async image loading

React - async useEffect

React - backgroundImage with inline style

React - button with AJAX request

React - change favicon

React - change logo

React - change state from props (functional component)

React - check version from cmd

React - checkbox (class component)

React - checkbox example

React - class component force re-render

React - comment source code

React - componentDidMount and componentWillUnmount (class component)

React - conditional rendering

React - convert SVG graphics to React SVG Components

React - create new app

React - create new app with yarn

React - custom AutoSizer component

React - custom async useEffect hook

React - custom progress bar

React - custom use current callback hook

React - custom useFetch hook

React - debug app

React - default property values in component

React - detect click outside component

React - detect click outside component hook (works with nested elements)

React - display current time with refresh

React - dynamic table (with dynamic header)

React - editable table

React - environment variables

React - file input example

React - force update/rendering without setState

React - form example (uncontrolled class component)

React - form example (uncontrolled components)

React - form reset

React - form reset (class component)

React - form submit

React - form with useState (controlled components)

React - forward ref in TypeScript

React - forward reference to component

React - forwardRef with generic component in TypeScript

React - functional component force re-render

React - get div reference

React - get input reference

React - get number value from an input

React - get react component size

React - get value of an input element

React - how to create dynamic table

React - how to pass props

React - how to style

React - how to style with embedded <style> element

React - how to use memo

React - how to use pure JavaScript components

React - how to use select

React - import component dynamically

React - import pure JavaScript file in async mode

React - increment state value (class component)

React - left-side animated menu

React - login / logout service

React - login form

React - loop inside JSX

React - material table with AJAX remote data and pager

React - multiple files input

React - multiple radio buttons

React - navbar with flexbox

React - object inside useState on click update

React - onClick example

React - onClick example (class component)

React - onClick with alert

React - onDoubleClick example

React - onDoubleClick example (class component)

React - onHover event example

React - onMount and onUnmount (functional components)

React - optimal form (uncontrolled components)

React - optimal way to create state

React - own light SweetAlert2 implementation

React - pass array of options to select

React - pass object between components using useContext

React - pass props to react components (class component)

React - pass string variable to a function with onClick

React - pass variable to method

React - radio button example

React - register form

React - render component as String (HTML in String)

React - render first N elements from array

React - render props (class component)

React - render props (functional component)

React - reset password form

React - return multiple elements from component

React - route and link difference

React - runtime compilation in browser

React - scroll to an element

React - set focus on input after rendering

React - show or hide element

React - show or hide element (class component)

React - simple animated expander

React - simple page layout

React - specify a port to run app

React - start app from command line

React - stretch element content to parent (css transform scale)

React - svg graphics / icons

React - sweetalert example

React - three-state checkbox

React - three-state checkbox (with Material-UI)

React - update object inside useState

React - update parent's state from child

React - update state with onClick (class component)

React - update useState object properties with input

React - use Google Ads / GPT

React - use current callback

React - use delayed callback with state reset

React - use state in a component (class component)

React - useEffect hook

React - useMemo hook example

React - useReducer vs useState

React - useState example

React - variable in string

React - why not to use key as custom property

Native Advertising

🚀

Get your tech brand or product in front of software developers.

For more information Contact us

Dirask - we help you to

solve coding problems.

Ask question.

❤️💻 🙂

Join