Как настроить автоматическую генерацию favicon в разных форматах? Быстрее всего открыть сервис realfavicongenerator.net, загрузить один исходник 512×512 и скачать готовый пакет: favicon.ico, PNG 16, 32, 48, 180, 192 и 512, файл site.webmanifest и готовый код для head. В сборщиках ту же задачу решают плагины: favicons-webpack-plugin для webpack, vite-plugin-pwa или vite-plugin-favicon для Vite, gulp-favicons для Gulp, а в Nuxt — модуль @nuxtjs/pwa в разделе pwa конфигурационного файла.
Практический нюанс: генерируйте всё из одного вектора SVG или PNG 512×512, иначе мелкие размеры получатся размытыми. В favicon.ico обязательно держите кадры 16 и 32 пикселя, apple-touch-icon 180×180 делайте без прозрачности и с залитым фоном, иначе iOS подставит чёрный квадрат, а в манифесте указывайте иконки 192 и 512 с purpose any maskable.
Мини-чек-лист перед публикацией: положите favicon.ico в корень сайта, добавьте ссылки rel icon, rel apple-touch-icon и rel manifest в head, проверьте отдачу по адресу домен/favicon.ico и очистите кэш браузера, потому что старая иконка держится в нём дольше остальных файлов.