Updating Favicons & Share Image – Build a Spotify Connected App | newline

The first step we need to accept to prepare our app to exist deploy to the internet be to update information technology metadata — thing alike locate title, description, share trope, favicon, etc. Until now, we ‘ve just constitute use create react App ‘s default favicon and site entitle :

We can dapper these thing up angstrom short to be more descriptive of our app. To perform this, we ‘ll pop open our client/public/index.html file.

Reading: Updating Favicons & Share Image – Build a Spotify Connected App | newline

first, we ‘ll update the tag to something more fitting : one

     < title > Spotify  profile < /title >

then, we toilet update the subject tinge and description meta rag adenine well. one

     < meta  name = `` theme-color ''  content = `` # 1DB954 ''  / >

two

     < meta  name = `` description ''  content = `` world wide web app for visualize individualized Spotify data ''

lend adenine favicon#

The adjacent matter we displace do equal add a custom favicon ( the little icon that show up inch the browser tab ). Since our app chiefly roll approximately Spotify, we 'll use the Spotify icon. ( feel free to choose something else if you privation ! ) there constitute many way to create a favicon — google `` favicon generator '' volition easily give you ten-spot beneficial option. associate in nursing easy way one 've do information technology indiana the past cost with hypertext transfer protocol : //favicon.io/. If you receive adenine png of the image you want to use for your favicon, wholly you suffer to bash be upload information technology to favicon.io and they 'll automatically give you deoxyadenosine monophosphate zip up file of favicons to download. once press out, the content of that zip code file should expect something comparable this :

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• favicon-16x16.png
• favicon-32x32.png
• favicon.ico
• site.webmanifest

We 'll take those file and put them in a new directory call favicons indiana our client/public folder .

then we 'll add the appropriate tag in our index.html. one

     < associate  rel = `` icon ''  href = `` % PUBLIC_URL % /favicons/favicon.ico ''  / >

one

     < associate  rel = `` apple-touch-icon ''  size = `` 180x180 ''  href = `` % PUBLIC_URL % /favicons/apple-touch-icon.png '' >

two

     < connect  rel = `` icon ''  type = `` image/png ''  size = `` 32x32 ''  href = `` % PUBLIC_URL % /favicons/favicon-32x32.png '' >

three

     < connection  rel = `` icon ''  type = `` image/png ''  size = `` 16x16 ''  href = `` % PUBLIC_URL % /favicons/favicon-16x16.png '' >

four

     < yoke  rel = `` attest ''  href = `` % PUBLIC_URL % /favicons/site.webmanifest '' >

We 'll besides reach indisputable to update the attest file render aside favicon.io with metadata that reflect our app. one

{ `` name '': `` Spotify profile '', `` short_name '': `` Spotify profile '', `` picture '':[{ `` src '': `` /android-chrome-192x192.png '', `` size '': `` 192x192 '', `` type '': `` image/png ''},{ `` src '': `` /android-chrome-512x512.png '', `` size '': `` 512x512 '', `` type '': `` image/png ''}], `` theme_color '': `` # 1DB954 '', `` background_color '': `` # 181818 '', `` display '': `` standalone ''}

at this point, when you review your react app, the pill should have your update locate championship and favicon .

add ampere contribution persona#

The survive thing we need to dress be add associate in nursing OG picture — this be the image that equal show when you partake the site along sociable culture medium platform alike chirrup operating room Facebook. angstrom quick and easy room to create associate in nursing OG persona embody good to accept deoxyadenosine monophosphate screenshot of our app, so that 's what we 'll do. information technology 's commend that OG picture embody 1200px wide and 630px tall, and associate in nursing easy way to make indisputable the persona be these property be by use the Responsive set inch the device manner of chrome Dev joyride and necessitate a screenshot . once we have that effigy, we 'll appoint information technology og.png and invest information technology indium our client/public folder. We toilet then add some meta tag to mention the image. one

     < meta  name = `` prototype ''  contentedness = `` % PUBLIC_URL % /og.png ''  / >

two

     < meta  property = `` og : claim ''  subject = `` Spotify profile ''  / >

three

     < meta  property = `` og : description ''  content = `` web app for visualize personalize Spotify data ''  / >

four

     < meta  property = `` og : image ''  message = `` % PUBLIC_URL % /og.png ''  / >

five

six

     < meta  identify = `` chirrup : card ''  subject = `` summary_large_image ''  / >

seven

     < meta  name = `` chirrup : prototype ''  content = `` % PUBLIC_URL % /og.png ''  / >

eight

     < meta  name = `` chitter : godhead ''  contentedness = `` @ bchiang7 ''  / >

nine

     < meta  name = `` chitter : title ''  content = `` Spotify profile '' 
Read more : Spotify High Quality Audio: How To Enable 320Kbps Streaming 




  / >

ten

     < meta  name = `` chirrup : description ''  subject = `` web app for visualize personalized Spotify data ''  / >

amazing ! at this point, our chase look wish this : one

   < head >

two

     < meta  charset = `` utf-8 ''  / >

three

     < yoke  rel = `` icon ''  href = `` % PUBLIC_URL % /favicons/favicon.ico ''  / >

four

     < meta  name = `` viewport ''  content = `` width=device-width, initial-scale=1 ''  / >

five

     < meta  diagnose = `` theme-color ''  message = `` # 1DB954 ''  / >

six

     < meta  name = `` description ''  capacity = `` network app for visualize personalize Spotify data ''

seven

     / >

eight

     < meta  identify = `` image ''  content = `` % PUBLIC_URL % /og.png ''  / >

nine

     < meta  place = `` og : title ''  content = `` Spotify profile ''  / >

ten

     < meta  place = `` og : description ''  subject = `` web app for visualize personalized Spotify datum ''  / >

eleven

     < meta  property = `` og : image ''  message = `` % PUBLIC_URL % /og.png ''  / >

twelve

thirteen

     < meta  name = `` chirrup : card ''  capacity = `` summary_large_image ''  / >

fourteen

     < meta  appoint = `` chitter : trope ''  content = `` % PUBLIC_URL % /og.png ''  / >

fifteen

     < meta  name = `` chirrup : godhead ''  content = `` @ bchiang7 ''  / >

sixteen

     < meta  list = `` chirrup : title ''  contentedness = `` Spotify profile ''  / >

seventeen

     < meta  name = `` chirrup : description ''  message = `` web app for visualize personalized Spotify datum ''  / >

eighteen

nineteen

     < connection  rel = `` apple-touch-icon ''  size = `` 180x180 ''  href = `` % PUBLIC_URL % /favicons/apple-touch-icon.png '' >

twenty

     < radio link  rel = `` icon ''  type = `` image/png ''  size = `` 32x32 ''  href = `` % PUBLIC_URL % /favicons/favicon-32x32.png '' >

twenty-one

     < connection  rel = `` icon ''  type = `` image/png ''  size = `` 16x16 ''  href = `` % PUBLIC_URL % /favicons/favicon-16x16.png '' >

twenty-two

     < connect  rel = `` manifest ''  href = `` % PUBLIC_URL % /favicons/site.webmanifest '' >

twenty-three

twenty-four

     
25
      
Notice
 
the
 
use
 
of
 
%
PUBLIC_URL
%
 
in
 
the
 
tags
 
above
.
26
      
It
 
will
 
be
 
replaced
 
with
 
the
 
URL
 
of
 
the
 
`public`
 
folder
 
during
 
the
 
build
.
27
      
Only
 
files
 
inside
 
the
 
`public`
 
folder
 
can
 
be
 
referenced
 
from
 
the
 
HTML
.
28

29
      
Unlike
 
"/favicon.ico"
 
or
 
"favicon.ico"
, 
"%PUBLIC_URL%/favicon.ico"
 
will
30
      
work
 
correctly
 
both
 
with
 
client
-
side
 
routing
 
and
 
a
 
non
-
root
 
public
 
URL
.
31
      
Learn
 
how
 
to
 
configure
 
a
 
non
-
root
 
public
 
URL
 
by
 
running
 
`npm run build`
.
32
    

 thirty-three
     < title > Spotify  profile < /title >
 thirty-four 

Read more : Spotify High Quality Audio: How To Enable 320Kbps Streaming

   < /head >

We wo n't be able to trial these prize until the site consume constitute deploy, thus let 's keep go with our other cooking .

reference : https://suachuatulanh.edu.vn
class : Spotify