Как сделать favicon для сайта

Шаги

1. Откройте «Генератор favicon» и перетащите одно изображение. Лучше всего подходит квадратное изображение от 512 пикселей.
2. Если оно не квадратное, выберите, обрезать ли его до квадрата из центра или оставить целиком с прозрачными полосами.
3. Нажмите "Make favicons" и скачайте файлы или все сразу одним ZIP.
4. Положите файлы в корневую папку сайта и вставьте показанный код в head ваших страниц.

Что вы получаете

В favicon.ico собраны версии 16, 32 и 48 пикселей в одном файле. favicon-16x16.png и favicon-32x32.png нужны для вкладок браузера, apple-touch-icon.png (180 пикселей) — для iPhone и iPad, а значки 192 и 512 пикселей — для Android и устанавливаемых веб-приложений.

Предпросмотр показывает ваш значок в 16, 32 и 64 пикселя, чтобы вы могли проверить его перед скачиванием.

Как сделать так, чтобы значок хорошо выглядел в малом размере

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

Изображение меньше 512 пикселей увеличивается для самых больших значков и может выглядеть размытым, и страница сообщает, когда так происходит. Прозрачный фон сохраняется.