Иконка сайта в Nuxt

Рядом с заголовком вкладки браузер показывает маленький символ сайта. Его называют favicon. В Nuxt не обязательно описывать иконку в Vue-коде: достаточно положить файл в public, и сервер раздаст его по корневому адресу.

Давайте изучим стандартный вариант. Имя favicon.ico знакомо браузерам по умолчанию. Структура проекта для примера:

/public/
- favicon.ico
/app/
- /pages/
  - index.vue

Nuxt отдаёт public/favicon.ico как /favicon.ico и подставляет ссылку в head автоматически. Функция useHead тоже умеет задавать link rel="icon", но в этом уроке мы опираемся только на файл в public, чтобы не смешивать темы. Формат .png иногда удобнее для макета: файл public/icon.png тоже доступен по URL, однако именно favicon.ico в корне public Nuxt подхватывает без дополнительных настроек. После перезагрузки вкладки иконка появится слева от заголовка. Страница может оставаться простой:

<template>
	<p>
		Home page.
	</p>
</template>

Добавьте в проект файл иконки сайта в public под именем favicon.ico.

Проверьте на главной странице, что браузер показывает новую иконку на вкладке.