Что такое favicon?
Favicon — маленькая иконка сайта, которую браузер показывает во вкладке, закладках и истории. Она помогает быстро найти нужную вкладку среди десятков других, а на телефонах та же иконка становится значком сайта на домашнем экране.
Современным сайтам нужен не один файл, а небольшой набор: favicon.ico для старых браузеров, PNG 16×16 и 32×32 для вкладок, 180×180 для Apple Touch Icon и 192×192 / 512×512 для Android и PWA. Генератор собирает всё это сразу и даёт готовый HTML.
Кратко
Загрузите картинку, введите букву или выберите эмодзи — получите архив со всеми размерами и код для <head>. Данные не покидают ваш браузер.
Как сделать анимированный favicon
-
1
Загрузите GIF
На вкладке «GIF → PNG-кадры» выберите файл. Генератор разберёт анимацию, учтёт прозрачность и способ наложения кадров.
-
2
Выберите число кадров
По умолчанию берётся 30 кадров, равномерно распределённых по всей анимации. Если в GIF кадров меньше, будут использованы все.
-
3
Скачайте архив
В ZIP лежат файлы frame-01.png, frame-02.png и так далее, а также snippet.html со скриптом.
-
4
Загрузите кадры на сайт
Распакуйте архив в папку, указанную в поле «Путь к кадрам», и вставьте код из поля ниже в <head>. Скрипт предзагружает все кадры и переключает иконку по таймеру.
Анимированный favicon поддерживают не все браузеры: Chrome и Edge показывают смену кадров, Firefox обновляет иконку, а Safari часто показывает только первый кадр. Поэтому первый кадр должен выглядеть самостоятельно и осмысленно.