feat: replace header icon and favicon with brand image

2026-05-24 20:29:17 +05:00
parent 9ce3375088
commit ca302c4e2d
9 changed files with 24 additions and 42 deletions
@@ -2,7 +2,10 @@
 <html lang="ru">
  <head>
    <meta charset="UTF-8" />
+    <link rel="icon" type="image/avif" href="/favicon-320.avif" sizes="32x32" />
+    <link rel="icon" type="image/webp" href="/favicon-320.webp" sizes="32x32" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/favicon-640.avif" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
@@ -13,7 +16,7 @@
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Любимый Креатив — Изделия ручной работы" />
    <meta property="og:description" content="Игрушки, сувениры и другие уникальные изделия ручной работы." />
-    <meta property="og:image" content="/favicon.svg" />
+    <meta property="og:image" content="/favicon-640.avif" />
    <meta property="og:locale" content="ru_RU" />
    <link rel="canonical" href="https://любимыйкреатив.рф/" />
  </head>
@@ -118,7 +118,7 @@ export const AppHeader = React.memo(function AppHeader() {
              gap: 1,
            }}
          >
-            <BearLogo sx={{ fontSize: 28 }} />
+            <BearLogo sx={{ width: 28, height: 28 }} />
            <Typography variant="h6" sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {STORE_NAME}
            </Typography>
@@ -54,7 +54,7 @@ export function AuthPage() {
      >
        <Box sx={{ width: '100%', maxWidth: 440 }}>
          <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-            <BearLogo sx={{ fontSize: 72 }} />
+            <BearLogo sx={{ width: 72, height: 72 }} />
          </Box>

          <Typography variant="h5" sx={{ fontWeight: 700, textAlign: 'center' }} gutterBottom>
@@ -88,7 +88,7 @@ export function AuthPage() {
    >
      <Box sx={{ width: '100%', maxWidth: 440 }}>
        <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-          <BearLogo sx={{ fontSize: 72 }} />
+          <BearLogo sx={{ width: 72, height: 72 }} />
        </Box>

        <Typography variant="h5" sx={{ fontWeight: 700, textAlign: 'center' }} gutterBottom>
@@ -1,41 +1,20 @@
-import SvgIcon from '@mui/material/SvgIcon'
-import type { SvgIconProps } from '@mui/material/SvgIcon'
+import Box from '@mui/material/Box'
+import type { SxProps, Theme } from '@mui/material/styles'

-export function BearLogo(props: SvgIconProps) {
+type BearLogoProps = {
+  sx?: SxProps<Theme>
+}
+
+export function BearLogo({ sx }: BearLogoProps) {
  return (
-    <SvgIcon viewBox="0 0 64 64" {...props}>
-      <path
-        d="M18 24c-3.9 0-7-3.1-7-7s3.1-7 7-7c2.8 0 5.3 1.7 6.4 4.1C26.5 12.8 29.1 11 32 11s5.5 1.8 7.6 4.1C40.7 11.7 43.2 10 46 10c3.9 0 7 3.1 7 7s-3.1 7-7 7"
-        fill="currentColor"
-        opacity="0.35"
-      />
-      <path
-        d="M32 18c-12.1 0-22 9.4-22 21 0 12.2 10.6 20 22 20s22-7.8 22-20c0-11.6-9.9-21-22-21Z"
-        fill="currentColor"
-      />
-      <path
-        d="M23 39c0 2.2-1.6 4-3.5 4S16 41.2 16 39s1.6-4 3.5-4S23 36.8 23 39Zm25 0c0 2.2-1.6 4-3.5 4S41 41.2 41 39s1.6-4 3.5-4S48 36.8 48 39Z"
-        fill="#111"
-        opacity="0.85"
-      />
-      <path
-        d="M32 33c-6.2 0-11.2 4.6-11.2 10.2 0 5.5 5 9.8 11.2 9.8s11.2-4.3 11.2-9.8C43.2 37.6 38.2 33 32 33Z"
-        fill="#fff"
-        opacity="0.9"
-      />
-      <path
-        d="M32 40.2c-1.9 0-3.4-1.2-3.4-2.7s1.5-2.7 3.4-2.7 3.4 1.2 3.4 2.7-1.5 2.7-3.4 2.7Z"
-        fill="#111"
-        opacity="0.9"
-      />
-      <path
-        d="M27.8 44.8c1.2 1.5 2.8 2.2 4.2 2.2s3-.7 4.2-2.2"
-        fill="none"
-        stroke="#111"
-        strokeWidth="2.6"
-        strokeLinecap="round"
-        opacity="0.85"
-      />
-    </SvgIcon>
+    <Box
+      component="img"
+      src="/favicon-320.avif"
+      alt="Любимый Креатив"
+      sx={{
+        objectFit: 'contain',
+        ...sx,
+      }}
+    />
  )
 }
@@ -53,7 +53,7 @@ export function NavigationDrawer({
    >
      <Box sx={{ p: 2 }}>
        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
-          <BearLogo sx={{ fontSize: 28 }} />
+          <BearLogo sx={{ width: 28, height: 28 }} />
          <Typography variant="h6">{STORE_NAME}</Typography>
        </Box>