EN

Site Language

English

Content Language

English Polski Deutsch Português

Log in
Join

Languages

[Edit]

EN

React - change favicon

2 contributors

7 contributions

0 discussions

3 points

Created by:

201

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

By default favicon is located under public/favicon.ico path and is attached to webpage inside public/index.html file as:

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

Where: %PUBLIC_URL% represents public/ directory.

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

Solution 1: replace public/favicon.ico file with new one.
Solution 2: choose a new image with .png extension, let's say example.png, put it 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.

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