Сделать favicon онлайн: иконка сайта из буквы или картинки

  • Бесплатно
  • Без регистрации
  • Всё остаётся в браузере

Введите одну-две буквы или выберите картинку. Справа сразу видно, как значок выглядит во вкладке и на экране телефона. Скачайте три PNG и файл favicon.ico.

Сделайте иконку

Подойдут буквы и цифры, регистр сохранится. Лучше всего читается одна буква.

Форма
Цвета
Толщина буквы

В 16 пикселей тонкая буква теряется. Жирная читается лучше.

Только для картинки справа, в файлы оно не попадает. Необязательно.

Буквы рисует и картинку читает ваш браузер. Ничего из того, что вы ввели или выбрали, не уходит с этой страницы и нигде не запоминается.

Пример: так выглядит результат

Это пример, буква «Р» на чёрном. Введите буквы или выберите картинку, и здесь появится ваша иконка.

Светлая вкладка: значок в 16 пикселей
Тёмная вкладка: значок в 16 пикселей

Экран «Домой» на телефоне: файл 180 на 180 пикселей

  • favicon-32.png32 × 32 · Для вкладки
  • favicon-48.png48 × 48 · Для поиска
  • apple-touch-icon.png180 × 180 · Для экрана «Домой»
  • favicon.ico32 × 32 внутри · Один файл для корня сайта
Четыре файла скачаются по одному.

Какого размера нужен favicon?

Единого числа нет: у каждого, кто читает значок, свой список. Google просит квадрат не меньше 8×8 пикселей и советует брать от 48×48. Яндекс называет три размера: 120×120, 32×32 или 16×16.

Инструмент делает 32, 48 и 180 пикселей. Те же три размера получаются в rillo, когда вы загружаете иконку в настройках сайта. Размера 120×120 в наборе нет, но Яндекс пишет, что его сервисы могут взять любой из значков сайта.

  • Google

    Квадрат 1:1, не меньше 8×8 пикселей, лучше от 48×48. Форматы: BMP, GIF, ICO, PNG, JPEG, PPM и TIFF. На сайт один значок, а сайтом считается имя хоста. Источник: developers.google.com

  • Яндекс

    Размер 120×120, 32×32 или 16×16 пикселей. Формат: SVG (рекомендуется), ICO, GIF, JPEG, PNG, BMP, без анимации. Файл с именем favicon просят положить в корень сайта. Источник: yandex.ru

  • Этот набор

    favicon-32.png и favicon-48.png для вкладки и поиска, apple-touch-icon.png на 180×180 для телефона и favicon.ico с PNG 32×32 внутри. Первые три размера взяты у загрузчика rillo.

  • Файл ICO

    Один ICO может хранить несколько картинок, каждая внутри — BMP или готовый PNG. Так устроен и наш файл. MDN при этом пишет, что для сайтов ICO использовать не стоит: его вытеснили PNG и тег link, а PNG внутри ICO заработал только с Windows Vista. Источник: developer.mozilla.org

Где показывается иконка сайта?

Везде, где сайту нужен маленький знак. Слева в инструменте эти места нарисованы, а ниже сказано, откуда что берётся.

  • Вкладка

    Значок стоит слева от названия страницы. Когда вкладок много, название обрезается, а цветной знак виден. Вкладки бывают светлые и тёмные, поэтому смотрите иконку на обеих.

  • Закладки

    В списке закладок браузер обычно ставит тот же значок. Там он такой же мелкий, как во вкладке.

  • Экран «Домой»

    Если добавить сайт на главный экран телефона, на нём появится плитка с картинкой. Для неё нужен файл на 180×180 пикселей. В настройках rillo он подписан «для устройств Apple».

  • Поиск

    Google и Яндекс показывают значок сайта рядом со ссылкой в выдаче. Он появляется не сразу: Яндекс пишет про срок до двух недель после того, как робот загрузил значок, у Google сканирование занимает от нескольких дней до нескольких недель. Источник: developers.google.com

Как поставить иконку на сайт?

Выберите по тому, где живёт сайт. На rillo хватит одного файла.

  • Сайт на rillo

    Откройте «Настройки сайта» → «Поиск и соцсети». В поле «Иконка сайта (favicon)» загрузите apple-touch-icon.png, самый крупный файл. Остальные размеры rillo сделает сам, под полем появится строка «Подготовлены:». Потом опубликуйте сайт. Файл ICO это поле не принимает, и в код ничего вставлять не нужно.

  • Любой другой сайт

    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

    Положите три PNG и favicon.ico в корень сайта и вставьте эти строки в head главной страницы. rillo пишет такие же теги у своих сайтов. Адрес значка потом лучше не менять: Google просит не менять его слишком часто.

Что почитать и открыть дальше?

Про иконку подробнее, про картинку ссылки и про соседние инструменты.

Собрать сайт с этой иконкой

Справка, на которую мы опираемся: Google Search Central: значок сайта, Яндекс Вебмастер, справка: фавиконка, MDN: Image file type and format guide, W3C: WCAG 2.1, критерий 1.4.3.

Пригодилось? Отправьте тому, кому тоже нужно.

TelegramMAXВКонтакте

Коротко об иконке сайта.

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

Не обязательно. MDN советует для сайтов PNG и тег link, а ICO называет устаревающим. Но Яндекс просит файл с именем favicon в корне сайта, а ICO есть в списках форматов и Google, и Яндекса. Поэтому даём оба: PNG подключите строками, ICO положите в корень.

Что нарисовать, если логотипа нет?

Одну букву названия на ровном фоне. В 32 пикселя помещается один знак, остальное сливается в пятно. Возьмите жирное начертание и цвет, как у вашего сайта.

Почему инструмент пишет, что буква сольётся с фоном?

Он считает контраст между двумя цветами и предупреждает, когда он меньше 3 к 1. Это наш порог, а не правило поисковиков. Для текста на страницах WCAG 2.1 требует от 4,5 к 1, для крупного шрифта от 3 к 1. Мы взяли меньшее число: оно ловит явные неудачи, но не гарантирует, что в 16 пикселей всё разберёшь.

Можно ли загрузить в rillo файл favicon.ico?

Нет: поле «Иконка сайта (favicon)» принимает JPEG, PNG, WebP, AVIF и SVG. Загрузите apple-touch-icon.png, остальные размеры rillo сделает сам.

Иконку поменял, а в браузере старая. Что делать?

Сначала убедитесь, что сайт опубликован после смены, и откройте его в окне инкогнито. В поиске значок обновляется не сразу: Яндекс называет срок до двух недель, Google пишет про несколько дней или недель. Шаги по порядку есть в статье про favicon, ссылка внизу страницы.

Иконка готова. Нужен сайт?

0 ₽ навсегда · карта не нужна