Фавикон перестал быть одним квадратиком 16 пикселей много лет назад. Сегодня сайту нужна горстка размеров для вкладок, ярлыков Windows, домашних экранов iPhone и предложений установки на Android, плюс разметка, которая на них ссылается. Эта страница делает всё это из одного изображения, в вашем браузере.

Как пользоваться

1. 1 Перетащите квадратное изображение, лучше 512 px или больше.
2. 2 Проверьте каждый размер в предпросмотре и задайте фон, если изображение прозрачное.
3. 3 Скачайте архив, распакуйте его в корень сайта и вставьте HTML.

Рисуйте под 16 пикселей, а не под логотип

В размере вкладки фавикон примерно шириной с точку на этой странице. Логотипы-надписи превращаются в серые пятна, тонкие линии исчезают совсем. Одна буква, простая форма или самый узнаваемый фрагмент логотипа этот масштаб переживают; весь логотип почти никогда.

PNG достаточно; ICO это наследие

Все браузеры, которыми пользуются сегодня, читают PNG-фавиконы, поэтому набор PNG-файлов и правильные теги link покрывают веб. Контейнер .ico существует потому, что Internet Explorer искал его в корне сайта; если не нужно поддерживать что-то древнее, его можно пропустить.

На телефоне прозрачность ведёт себя иначе

Во вкладке браузера прозрачная иконка хорошо ложится на то, что даёт тема. На домашнем экране iPhone за тем же файлом появляется сплошной чёрный квадрат, потому что iOS там прозрачность не сводит. Задайте цвет фона, и иконка будет выглядеть задуманной в обоих местах.

Почему браузер всё ещё показывает старый

Фавиконы кэшируются жёстко и надолго, иногда переживая обычное обновление страницы. Откройте файл иконки напрямую, чтобы убедиться, что новый действительно на месте, затем проверьте в приватном окне. Сменить имя файла или добавить к нему версию это надёжный способ заставить обновление произойти.