Генератор фавиконок

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

1. Выберите Букву или эмодзи, введите до трёх символов и задайте цвета и форму. Или выберите Свою картинку и перетащите изображение.
2. Проверьте предпросмотр каждого размера.
3. Нажмите Скачать все файлы или скачайте отдельный размер либо только ICO.
4. Скопируйте HTML-код в <head> вашего сайта.

Как работает

Каждый размер рисуется заново на своём canvas, а не уменьшается из одной большой картинки, поэтому маленькие иконки остаются чёткими. Картинка обрезается до самого большого квадрата по центру: у фото 800 × 600 берутся средние 600 × 600 пикселей. Файл ICO собирается в браузере из PNG-иконок 16, 32 и 48 пикселей.

Пример

По умолчанию — белая буква «N» на синем фоне в скруглённом квадрате. Размер шрифта зависит от числа символов: один символ занимает 0,7 стороны, два — 0,5, три — 0,36. В иконке 32 × 32 одна буква рисуется шрифтом 32 × 0,7 ≈ 22 пикселя, а надпись «ТД» — шрифтом 32 × 0,5 = 16 пикселей. Радиус скругления — 0,2 стороны, у иконки 512 × 512 это 102,4 пикселя; у круга — половина стороны.

Имена файлов

• favicon.ico — 16, 32, 48
• favicon-16x16.png, favicon-32x32.png, favicon-48x48.png
• apple-touch-icon.png — 180 × 180
• android-chrome-192x192.png, android-chrome-512x512.png

Советы

• Одна жирная буква на 16 px читается лучше, чем детальная картинка.
• Делайте сильный контраст между фоном и текстом.
• Кириллица работает так же, как латиница: можно взять первую букву названия сайта.