ToolsMaxxing
Русский
EnglishEspañolPortuguêsBahasa Indonesiaहिन्दीবাংলাРусскийTiếng ViệtFrançaisDeutschTürkçeالعربية

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

Создайте favicon.ico и PNG всех нужных размеров из одного изображения.

или перетащите сюда файлы (изображения)

изображение PNG, JPG, WebP или GIF (лучше всего подходит квадратный логотип)

Ваши файлы остаются на устройстве

  1. 1Добавьте файлы
  2. 2Настройте
  3. 3Скачайте

Как это работает

  1. 1Добавьте квадратный логотип или изображение. Лучший результат даёт размер от 512 на 512 пикселей.
  2. 2Выберите, как поступить с неквадратным изображением: вписать или обрезать, и задайте фон.
  3. 3Нажмите «Создать набор фавиконок».
  4. 4Скачайте ZIP, положите файлы в корень сайта и вставьте HTML из favicon-html.txt в head.

Что делают параметры

Вписать
Сохраняет изображение целиком и добавляет пустое место по короткой стороне.
Обрезать по размеру
Заполняет весь квадрат и обрезает края широкого или высокого изображения.
Фон
«Прозрачный» сохраняет прозрачность. Белый или чёрный заливает фон. Иконка Apple Touch всегда получает сплошной фон.

Конфиденциальность

Размер изображения меняется в вашем браузере, файл никуда не загружается.

Частые вопросы

Какие файлы я получу?

favicon.ico с изображениями 16, 32 и 48 px, отдельные PNG 16, 32 и 48 px, apple-touch-icon.png 180 px, иконки 192 и 512 px для Android, файл site.webmanifest и текстовый файл с HTML-тегами.

Нужен ли favicon.ico, если есть PNG?

Многие браузеры читают PNG-иконки, но некоторые краулеры, программы для чтения лент и старые инструменты всё равно запрашивают /favicon.ico, так что его лучше оставить.

Почему фавиконка получилась мелкой и нечитаемой?

При 16 пикселях детали пропадают. Используйте простую фигуру или одну букву на однотонном фоне, избегайте тонких линий и мелкого текста.

Почему браузер всё ещё показывает старую иконку?

Браузеры надолго кэшируют фавиконки. Обновите страницу с очисткой кэша или добавьте версию в ссылку, например /favicon.ico?v=2.

Можно ли загрузить SVG?

В этой версии нет. Сначала экспортируйте SVG в крупный PNG. Современный сайт может также добавить ссылку на SVG-иконку рядом с этими файлами.

Похожие инструменты