Преобразуйте логотип PNG, JPG или SVG в настоящий многоразмерный favicon.ico с картинками 16, 32 и 48 px, а заодно получите PNG, Apple touch и иконки для Android. Берите исходник от 512 × 512 px или SVG, чтобы крупные иконки были чёткими.
Как пользоваться
- Введите одну-две буквы или эмодзи либо переключитесь на «Изображение» и перетащите логотип (лучше всего SVG).
- Выберите фон, цвет текста, форму и отступ — предпросмотр обновляется по ходу.
- Скачайте всё одним ZIP или нажмите на файл, чтобы скачать его отдельно.
- Вставьте HTML-код в <head> страницы и загрузите файлы в корневую папку сайта.
- favicon.ico содержит иконки 16, 32 и 48 px в PNG для любого браузера; favicon.svg остаётся чётким в любом размере.
- apple-touch-icon.png квадратный и непрозрачный: iOS сама скругляет углы.
- Иконка maskable держит логотип в безопасной зоне, чтобы Android мог обрезать её в любую форму.
- Всё создаётся в браузере, изображение никуда не загружается.
Что входит в современный набор фавиконок
favicon.ico содержит изображения 16, 32 и 48 px, и многие браузеры и сервисы до сих пор ищут его в корне сайта. favicon.svg остаётся чётким при любом размере и используется современными браузерами. apple-touch-icon.png (180 × 180) появляется, когда сайт добавляют на экран «Домой» iPhone. android-chrome-192x192 и 512x512 и maskable-иконка 512 px прописываются в site.webmanifest для Android и устанавливаемых веб-приложений.
HTML-фрагмент подключает все файлы: вставьте его в head и загрузите файлы в корневую папку.
Иконка, читаемая в 16 пикселях
На вкладке браузера фавиконка занимает всего 16 × 16 пикселей. Одна-две жирные буквы, простой символ или только знак из логотипа смотрятся гораздо лучше полного логотипа с текстом. Сильный контраст фона и рисунка помогает и в светлой, и в тёмной теме. Перед скачиванием посмотрите превью вкладки в светлой и тёмной теме.
Иконки Apple и maskable
iOS сама скругляет углы и плохо работает с прозрачностью, поэтому иконка Apple touch квадратная и непрозрачная. Android может обрезать maskable-иконки до круга и других форм; генератор держит рисунок внутри безопасной зоны, чтобы ничего важного не срезалось.
Частые вопросы
Какого размера должна быть фавиконка?
Нужно несколько размеров: 16, 32 и 48 px внутри favicon.ico, SVG для любого масштаба, 180 × 180 для устройств Apple и 192 и 512 px для Android. Этот генератор создаёт их все сразу.
Нужен ли ещё favicon.ico?
Да. Некоторые браузеры, RSS-читалки и другие программы по-прежнему запрашивают /favicon.ico в корне сайта, и файл там избавит от пустых иконок и ошибок 404.
Как добавить фавиконку на сайт?
Загрузите файлы из ZIP в корневую папку сайта и вставьте HTML-фрагмент в head каждой страницы. Затем перезагрузите страницу с очисткой кеша, чтобы увидеть новую иконку.
Почему новая фавиконка не отображается?
Браузеры долго хранят фавиконки в кеше. Откройте адрес иконки напрямую, сделайте жёсткую перезагрузку или проверьте в приватном окне. В поисковой выдаче новая иконка может появиться не сразу.
Можно ли сделать фавиконку из эмодзи?
Да. Введите эмодзи, выберите фон и форму, и иконка будет нарисована на его основе. Эмодзи выглядят немного по-разному в разных системах, а файлы сохраняют вид того устройства, на котором вы их создали.
Загружается ли мой логотип?
Нет. Все иконки рисуются и упаковываются в ZIP прямо в браузере, поэтому логотип остаётся на вашем устройстве и никуда не отправляется.