Skip to content

Commit 1cec5d8

Browse files
velopertvelopert
committed
Configure favicon
1 parent 49c2a65 commit 1cec5d8

File tree

10 files changed

+64
-1
lines changed

10 files changed

+64
-1
lines changed

‎public/favicon.ico

11 KB
Binary file not shown.

‎public/favicons/apple-icon-152x152.png

5.35 KB
Loading

‎public/favicons/apple-icon-180x180.png

6.45 KB
Loading

‎public/favicons/apple-icon-precomposed.png

6.11 KB
Loading

‎public/favicons/apple-icon.png

6.11 KB
Loading

‎public/favicons/favicon-16x16.png

1016 Bytes
Loading

‎public/favicons/favicon-32x32.png

1.45 KB
Loading

‎public/favicons/favicon-96x96.png

2.66 KB
Loading

‎public/index.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/favicons/apple-icon-152x152.png">
8+
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicons/apple-icon-180x180.png">
9+
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicons/android-icon-192x192.png">
10+
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicons/favicon-32x32.png">
11+
<link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicons/favicon-96x96.png">
12+
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicons/favicon-16x16.png">
613
<meta name="viewport" content="width=device-width, initial-scale=1" />
714
<meta name="theme-color" content="#000000" />
815
<meta

‎src/server/Html.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,54 @@ export type HtmlProps = {
99
reduxState: any;
1010
};
1111

12+
/*
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/favicons/apple-icon-152x152.png"/>
15+
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicons/apple-icon-180x180.png"/>
16+
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicons/android-icon-192x192.png"/>
17+
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicons/favicon-32x32.png"/>
18+
<link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicons/favicon-96x96.png"/>
19+
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicons/favicon-16x16.png"/>
20+
*/
21+
22+
const favicons = [
23+
{ rel: 'shortcut icon', path: '/favicon.ico' },
24+
{
25+
rel: 'apple-touch-icon',
26+
sizes: '152x152',
27+
path: '/favicons/apple-icon-152x152.png',
28+
},
29+
{
30+
rel: 'apple-touch-icon',
31+
sizes: '180x180',
32+
path: '/favicons/apple-icon-180x180.png',
33+
},
34+
{
35+
rel: 'icon',
36+
type: 'image/png',
37+
sizes: '192x192',
38+
path: '/favicons/favicon-192x192.png',
39+
},
40+
{
41+
rel: 'icon',
42+
type: 'image/png',
43+
sizes: '32x32',
44+
path: '/favicons/favicon-32x32.png',
45+
},
46+
{
47+
rel: 'icon',
48+
type: 'image/png',
49+
sizes: '96x96',
50+
path: '/favicons/favicon-96x96.png',
51+
},
52+
{
53+
rel: 'icon',
54+
type: 'image/png',
55+
sizes: '16x16',
56+
path: '/favicons/favicon-16x16.png',
57+
},
58+
];
59+
1260
function Html({
1361
content,
1462
styledElement,
@@ -23,6 +71,14 @@ function Html({
2371
{styledElement}
2472
{extractor.getLinkElements()}
2573
{extractor.getStyleElements()}
74+
{favicons.map(favicon => (
75+
<link
76+
key={favicon.path}
77+
rel={favicon.rel}
78+
sizes={favicon.sizes}
79+
href={process.env.PUBLIC_URL.concat(favicon.path)}
80+
/>
81+
))}
2682
</head>
2783
<body>
2884
<div id="root" dangerouslySetInnerHTML={{ __html: content }}></div>

0 commit comments

Comments
 (0)