Как сделать favicon иконку для сайта?

Favicon делают из готового логотипа: упрощают его до одного узнаваемого элемента - буквы, символа или знака, убирают мелкие детали, которые не читаются в маленьком размере, и сохраняют квадратное изображение минимум 512х512 пикселей в PNG. Дальше файл либо загружают в бесплатный сервис-генератор, который сам нарежет нужные размеры и форматы, либо напрямую в настройках сайта.

Современным браузерам достаточно одного файла favicon.ico или favicon.png размером 32х32 или 48х48 пикселей, но лучше подготовить сразу несколько размеров: 16х16 и 32х32 для вкладки браузера, 180х180 для значка на экране iPhone (apple-touch-icon) и 192х192 или 512х512 для Android и PWA. Формат SVG тоже подходит и выглядит чётче на экранах с высокой плотностью пикселей, но для старых браузеров лучше оставить PNG или ICO как запасной вариант.

Если сайт на WordPress, вручную прописывать код не нужно: иконка задаётся через раздел "Настройки экрана" в разделе "Настроить" темы, куда достаточно загрузить квадратное изображение от 512х512 пикселей, а движок сам подготовит нужные размеры. На самописном сайте файлы кладут в корень и подключают несколькими тегами link с rel="icon" и rel="apple-touch-icon" в head страницы. Главная ошибка, которую я вижу у клиентов, - брать в favicon мелкий или сложный логотип целиком: в размере 16 пикселей текст и тонкие линии сливаются в кашу, поэтому для иконки лучше оставить только один крупный узнаваемый элемент бренда.