Генератор фавиконок из любого изображения

Генератор фавиконок WoowTools превращает один логотип или изображение в полный набор иконок для современного сайта: маленькие PNG-фавиконки для вкладок браузера, иконки Apple touch для главного экрана iPhone и iPad и иконки Android Chrome для прогрессивных веб-приложений (PWA). Скачивайте иконки по одной или все сразу в ZIP-архиве, где также лежат готовый manifest.json и HTML-фрагмент с тегами link для вставки в head страниц. Всё работает в браузере, логотип никуда не загружается.

Доступные размеры фавиконок

• 16×16 и 32×32: вкладки, закладки и история (обычные и Retina-экраны).
• 48×48 и 64×64: значки сайтов и панель задач Windows.
• 96×96: Google TV; 128×128: Chrome Web Store.
• 152×152, 167×167 и 180×180: иконки Apple touch для iPad, iPad Pro и iPhone.
• 192×192 и 512×512: иконки Android Chrome и установки PWA.

Семь размеров выбраны по умолчанию (16, 32, 48, 152, 180, 192 и 512): этого хватает практически любому сайту. Отмечайте нужные размеры или используйте Select All и Deselect All.

Как сделать фавиконку

1. Загрузите логотип в PNG, JPG, SVG, WebP или другом формате (до 10 МБ). Лучше всего подходит квадратное изображение не меньше 512×512 пикселей.
2. Выберите цвет фона. Он заполняет прозрачные области и пустое место вокруг неквадратного логотипа. Белый, чёрный, синий, зелёный, янтарный или красный в один клик, или любой свой цвет.
3. Отметьте нужные размеры и запустите генерацию. У каждой иконки есть превью, чтобы проверить читаемость в крошечном размере.
4. Скачайте PNG по одному или всё сразу в favicons.zip.
5. Загрузите файлы в корневую папку сайта и вставьте строки из html-snippet.html в <head> страниц.

Что внутри ZIP-архива

В архиве: все созданные PNG с общепринятыми именами (например, favicon-32x32.png, apple-touch-icon-180x180.png и android-chrome-512x512.png), manifest.json со списком иконок Android и вашим цветом фона в качестве цвета темы, а также HTML-фрагмент с тегами link для иконок 16, 32, 180, 192 и 512 пикселей, manifest и мета-тегом theme-color. Перед публикацией поменяйте название приложения в manifest.json.

Советы для хорошей фавиконки

• Упрощайте. Полный логотип со слоганом при 16 px превращается в пятно. Оставьте только знак или первую букву и проверьте превью 16 и 32 px.
• Начинайте с квадрата. Изображение вписывается в квадрат по центру без искажения пропорций. Широкий логотип сначала обрежьте до квадрата в инструменте обрезки изображений, чтобы он заполнял иконку.
• Векторный логотип? Экспортируйте его в крупный PNG с помощью конвертера SVG в PNG или нарисуйте простой знак в конструкторе логотипов.
• Продумайте фон. У готовых иконок сплошной фон, поэтому выберите фирменный цвет или такой, который хорошо смотрится и в светлой, и в тёмной теме браузера.

Почему стоит выбрать этот генератор

Он бесплатный, не требует аккаунта и не добавляет на иконки чужих логотипов. Каждый размер рисуется на холсте в вашем браузере, поэтому ещё не опубликованный логотип остаётся на вашем компьютере, а весь набор готов за секунду.