Привет. Сегодня настроим значки favicon для разных браузеров и устройств. Также проведем небольшой рефакторинг предыдущего кода.
Полезные ссылки:
Часть 1. Подготовка и настройка проекта
Часть 2. Настройка конфигурации и установка необходимых библиотек
Часть 3. Создание CSS-переменных и верстка блока Header
Часть 4. Верстка секции Hero, создание компонента Button
Часть 5. Верстка секции About
Часть 6. Верстка секции Gallery
Часть 7. Верстка секции WhyUs
Часть 8. Верстка секции Catalogue
Часть 9. Верстка секции Map
Часть 10. Верстка секции Footer
Часть 11. Создание якорных ссылок, рефакторинг
Часть 12. Создание мобильного меню
Часть 13. Анимация секций при скролле
Часть 14. Установка метаданных
Часть 15. Настройка Favicon.ico
Часть 16. Настройка счетчика Яндекс Метрики
Часть 17. Публикуем проект на хостинге
Рефакторинг
Прежде чем приступить к настройке favicon, отредактируем уже существующий код. В прошлых уроках мы добавляли анимацию к нашим секциям, для того чтобы всё работало корректно, необходимо ограничить область видимости наших секций до размера самого родительского блока, для этого в классы наших секций надо прописать «overflow-hidden».
Пример секции части кода секции:
<section id='about' className='flex w-full text-on-secondary bg-secondary overflow-hidden'>
Добавляем favicon
Для начала нам необходимо сгенерировать несколько различных иконок в разных форматах и размерах.
В интернете полно онлайн-сервисов, где вы сможете это сделать, взяв за основу svg-иконку.
На выходе вы должны получить вот такие файлы:
Поместите их в папку проекта /public
В файле layout.jsx пропишем наши иконки внутри head.
Итоговый код файла layout.jsx
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({
subsets: ['cyrillic'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
display: 'swap',
variable: '--font-inter',
});
export const metadata = {
title: 'Строительство уютных загородных домов: комфорт гарантирован',
description:
'Строим уютные загородные дома с комфортом для жизни. От проекта до сдачи. Используем качественные материалы. Создаем пространство вашей мечты',
keywords: 'строительство, дома, загородное, коттеджи, комфорт, проекты, под ключ, современные',
};
export default function RootLayout({ children }) {
return (
<html lang='ru' suppressHydrationWarning>
<head>
<link rel='icon' type='image/png' href='/public/favicon-96x96.png' sizes='96x96' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<link rel='shortcut icon' href='/favicon.ico' />
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
<meta name='apple-mobile-web-app-title' content={'landing.in9var.ru'} />
<link rel='manifest' href='/site.webmanifest' />
</head>
<body className={`${inter.variable}`}>{children}</body>
</html>
);
}
В следующих статьях настроим добавим счетчик яндекс метрики на сайт.
Код данного урока доступен в репозитории GitHub по ссылке.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.