Создать лендинг сайт с нуля: настройка favicon.ico #15

13 июня 2025
1 минута

Привет. Сегодня настроим значки favicon для разных браузеров и устройств. Также проведем небольшой рефакторинг предыдущего кода.

превью | blog.in9var.ru
Превью | blog.in9var.ru

Полезные ссылки:

Демо–проект лендинга можно посмотретьпо ссылке
Часть 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.Публикуем проект на хостинге
  • Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
  • Код данного урока доступен в репозитории GitHub по ссылке.
  • Подписывайтесь на мой Дзен канал

Рефакторинг

Прежде чем приступить к настройке favicon, отредактируем уже существующий код. В прошлых уроках мы добавляли анимацию к нашим секциям, для того чтобы всё работало корректно, необходимо ограничить область видимости наших секций до размера самого родительского блока, для этого в классы наших секций надо прописать «overflow-hidden».

Пример секции части кода секции:

<section id='about' className='flex w-full text-on-secondary bg-secondary overflow-hidden'>

Добавляем favicon

Для начала нам необходимо сгенерировать несколько различных иконок в разных форматах и размерах.

В интернете полно онлайн-сервисов, где вы сможете это сделать, взяв за основу svg-иконку.

На выходе вы должны получить вот такие файлы:

фото | изображение | blog.in9var.ru
Фото | blog.in9var.ru

Поместите их в папку проекта /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>
  );
}

В следующих статьях настроим добавим счетчик яндекс метрики на сайт.

На этом всё, добавляйте сайт в избранное, чтобы не пропустить новых статей, а также подписывайтесь на мой Дзен-канал – dzen.ru/in9var