А знали ли вы что фавикон можно делать проще. Достаточно одной строчки. Статья посвящена олдам, верстальщикам с эры веб 2.0 и до неё, которым известно что для хорошей фавиконки нужно делать несколько размеров и форматов. А по канону фавиконка должна быть в формате .ico. Так вот, с 2000-х годов прошло более 20 лет и многое изменилось.
Ранее я использовал генератор realfavicongenerator.net который генерирует большое количество иконок и 6 строк для размещения фавиконки на все случаи жизни. И тут я задал вопрос, а нужны ли все эти размеры и подключения.
Ниже я приведу инструкцию по созданию базового минимального набора для фавиконки.
Фавиконка
Готовим изображение в svg формате для фавиконки. Размер может быть любым, ведь это svg. Я подготовил изображение размером 260x260px.
Подключил его строкой:
<link rel="icon" type="image/x-icon" href="./img/favicons/favicon.svg">
На 2024 год svg формат для фавиконки поддерживают все браузеры.
Также SVG идеальный формат для фавиконки. Поддерживает прозрачность. Векторный и отлично масштабируется под ретину и разные необходимые размеры.
Иконка для Apple устройств
Также, возможно вы захотите иметь красивую иконку для iPhone если захотите разместить иконку сайта на домашний экран. Для этого готовим png изображение фавиконки размером 180х180px.
Подключаем его следующей строкой:
<link rel="apple-touch-icon" sizes="180x180" href="./img/favicons/apple-touch-icon.png">
Готово. Этого вполне достаточно чтобы разместить фавиконку в 2024.
А если вы настраиваете Opengraph мета теги с превью сайта, то рекомендую полезный сервис по превью opengraph на разных платформах opengraph.xyz
