Как правильно подключить favicon через сборщик задач gulp?

Question

[Danya Wyse]

Я уже третий день сижу и туплю.
Как я понял из кучу пересмотренных гайдов про favicon:
ICO - устаревший формат, PNG/SVG юзается отлично.
favicon читается браузерами только из корня папки, то есть непосредственно где находится файл index.html
Когда собираю папку, можно просто подключить варварски его вручную
но мне бы хотелось делать это правильно,что бы в будущем в серьезных проектах это не было проблемой.
Добрался я до плагина gulp-real-favicon, сделал все по вот этой ссылке
https://realfavicongenerator.net/favicon_result?fi...
Выскакивает вот эта ошибка
JSON.parse($.gp.fs.readFileSync($.gp.FAVICON_DATA_FILE)).favicon.html_code
Я не нашел в интернете адекватного ответа на решение этой проблемы,
Вот мой сборщик который меня наматывает на титут "лоха"
https://github.com/iWyse/favicon

Если я двигаюсь в правильном направлении, обьясните как добить эту тему. Или же я делаю совсем не так как это осуществляется в реальных проектах?

Answer 1

[Сергей delphinpro]

1. В корне следует располагать только favicon.ico (16x16 или 32х32). Остальные иконки спокойно можно закинуть в любую папку.
2. Зачем вообще использовать какие-то плагины для генерации фавиконок, вы что их постоянно обновлять собираетесь? Раз сгенерил на каком-то онлайн-сервисе весь пак и забыл на пару лет. Подключение руками, те же онлайн генераторы предоставят готовый код, в котором только пути под себя скорректировать, если не в корень класть будете.

В общем, боюсь, вы ерундой маетесь.

Comments

[Ross Alex]

Тем более, что нужны разные favicon для приложений и браузерных иконок (с прозрачным фоном)

[Danya Wyse]

А если пользователь заходит через айфон или андроид на сайт,зачем ему иконка 32х32? Как тогда подгружать нужную

[Александр Фалалеев]

Danya Wyse, вот тут протестируйте:

https://realfavicongenerator.net/favicon_checker?p...

Я для всех форматов делать не стал ибо лень :)

[Сергей delphinpro]

Danya Wyse, Подключать все. Браузер сам выберет подходящую.

Вот примерно так у меня выглядит блок с подключением иконок.

<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicons/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#151515">
<meta name="theme-color" content="#151515">

[Danya Wyse]

Сергей delphinpro, ну, то есть эти иконки просто распологаются в корне папке продакшена с файлом index.html?
Подключать их просто а ручную? Не мудрить ничего в галпе?

[Сергей delphinpro]

Danya Wyse, верно.

[Danya Wyse]

Сергей delphinpro, У вас идет линк в папку favicons

<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon.ico">

Браузеры же читают правильно как

<link rel="icon" type="image/png" sizes="16x16" href="favicon.ico">

или я ошибаюсь
https://habr.com/ru/company/htmlacademy/blog/578224/

Расположение.
Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.

[Сергей delphinpro]

Danya Wyse, в корне на всякий случай всегда лежит иконка в ico формате.
я не указываю ее подключение в html. Из корня если нужно само подтянется.