Генератор favicon
Загрузите изображение один раз — получите все нужные размеры favicon: для вкладок браузера, главного экрана iOS и иконок Android/PWA, плюс готовый HTML для их подключения.
Нажмите, чтобы выбрать изображение, или перетащите его сюда
Квадратные изображения подходят лучше всего. Всё остаётся на вашем устройстве, ничего не загружается.
Что вы получите
Архив .zip с PNG размером 16×16, 32×32 и 48×48 для вкладок браузера, apple-touch-icon 180×180 для главного экрана iOS, а также PNG 192×192 / 512×512 для манифестов Android и PWA, плюс текстовый файл с готовыми тегами <link> для вставки в <head> вашего сайта.
Как это работает
Ваше изображение сначала обрезается до наибольшего центрированного квадрата, который в нём помещается, затем один вызов drawImage() обрезает и масштабирует этот квадрат до холста нужного размера за один шаг — поэтому неквадратные изображения выходят обрезанными, а не растянутыми. Это происходит шесть раз, по одному разу для каждого размера: 16, 32, 48, 180, 192 и 512 пикселей, и каждый холст экспортируется как файл PNG. Zip-архив собирается побайтово в JavaScript без какого-либо сжатия на сервере и включает текстовый файл с точными тегами <link> для вставки в <head> вашего сайта.
Вы заметите отсутствие файла .ico: все современные браузеры принимают PNG-иконки напрямую. Из сгенерированных размеров 32×32 используется во вкладках браузера на современных экранах, 180×180 — то, что iOS использует для ярлыков на домашнем экране, а 192×192 и 512×512 — два размера, которые требует спецификация прогрессивных веб-приложений. Иконка, которая отлично смотрится при 512px, часто превращается в кашу при 16px, поэтому выбирайте смелую, чёткую, контрастную форму вместо мелких деталей.
Изображение, которое вы перетаскиваете, полностью декодируется, обрезается, масштабируется и сжимается в памяти вашего браузера — на этой странице вообще нет точки загрузки на сервер. Понаблюдайте за вкладкой «Сеть» во время генерации: единственная передача — это готовый zip-файл, который переходит из памяти в вашу папку загрузок.
Частые вопросы
Почему не файл .ico?
Современные браузеры, iOS и Android напрямую поддерживают favicon в формате PNG — именно в этом формате каждый размер и предоставляется. Файл .ico исторически упаковывал несколько размеров в один контейнер, но сейчас это не нужно: включённый HTML-фрагмент указывает браузерам правильный PNG для каждого контекста.
Какое изображение лучше загрузить?
Лучше всего подходит квадратное изображение — оно обрезается аккуратно. Неквадратные изображения автоматически обрезаются до центрированного квадрата перед изменением размера, поэтому важная часть логотипа должна находиться ближе к центру.
Загружается ли моё изображение куда-либо?
Нет, каждый размер создаётся локально в вашем браузере с помощью API canvas. Ничего не отправляется на сервер.