Перейти до уроку
lil cactus

Як створити фавікон у форматі ICO

Початковий4 хвилиниОновлено

Коротка відповідь

У Lil Cactus відкрийте своє зображення й виберіть Файл потім Експорт потім ICO… У полі Назва файлу введіть favicon.ico. У розділі Розміри значків залиште позначеними всі шість розмірів (від 16 до 256 px; так налаштовано за замовчуванням) і натисніть кнопку Експортувати. Завантажений файл ICO міститиме всі шість квадратних версій.

Шість експортованих розмірів значка з листком на світлій і темній смугах: у верхньому ряду кожної 16, 32, 48, 64, 128 і 256 пікселів, нижче 16 і 32 пікселі, збільшені вчетверо
Шість розмірів усередині favicon.ico на світлому й темному тлі: у верхньому ряду 16, 32, 48, 64, 128 і 256 px, нижче 16 і 32 px, збільшені в 4 рази.
Час
4 хвилини
Рівень
Початковий
Що потрібно
Значок або інше зображення, відкрите в редакторі
Підходить для
PNG, JPG, SVG, PSD і проєкти Lil Cactus (прозорість зберігається)
Відкрити приклад у Lil CactusВикористати своє фото

Безкоштовно, без реєстрації. Ваше фото залишається на вашому комп’ютері.

Фавікон — це маленький значок біля назви сайту на вкладці чи в закладках. Прості форми з великими кольоровими ділянками легше розпізнати в малому розмірі. У цій вправі використано двоколірний листок з однією світлою прожилкою.

Фавікон ICO за чотири кроки

  1. Відкрийте зображення

    Відкрийте зображення для практики з цієї сторінки. Для власного файлу виберіть Файл потім Відкрити… і вкажіть зображення. Шахівниця навколо листка позначає прозорий фон. Може з’явитися коротке повідомлення про згладжування країв SVG; воно закриється саме.

    Меню «Файл» з обведеною командою «Відкрити…»
    Завантажте зображення, з якого хочете зробити значок.

  2. Виберіть «Файл › Експорт › ICO…»

    Виберіть Файл потім Експорт потім ICO… Відкриється вікно Експортувати як ICO з попереднім переглядом зображення.

    Меню «Файл» і підменю «Експорт» з обведеним пунктом «ICO…»
    Відкрийте вікно експорту в ICO.

  3. Виберіть назву файлу й розміри

    У полі Назва файлу введіть favicon.ico. У розділі Розміри значків залиште позначеними 16, 32, 48, 64, 128 і 256. Це всі шість доступних розмірів.

    Поле «Назва файлу» для ICO зі значенням favicon.ico, обведене
    Дайте назву файлу значка, який завантажиться.
    Параметри експорту ICO: позначено 16, 32, 48, 64, 128 і 256, групу «Розміри значків» обведено
    Кожне число задає і ширину, і висоту квадратного значка в пікселях.

  4. Експортуйте ICO

    Переконайтеся, що внизу вікна написано 6 розмірів значка, і натисніть кнопку Експортувати. Браузер збереже favicon.ico так, як у ньому налаштовано завантаження чи вибір місця збереження.

    Нижня частина вікна ICO: «6 розмірів значка», «Скасувати» й обведена кнопка «Експортувати»
    Перед експортом перевірте кількість вибраних розмірів.

Як використати значок на сайті

Завантажте favicon.ico у кореневу папку сайту, щоб він відкривався за адресою /favicon.ico. Також на нього можна вказати в <head> сторінки за допомогою <link rel="icon" href="/favicon.ico"> (дивіться довідку MDN про значки).

Браузери кешують фавікони, тож оновлений значок може з’явитися лише після перезавантаження сторінки або через деякий час.

Якщо значок 16 px погано видно

Спростіть зображення: менше деталей, більші форми й товщі лінії. Рисунок угорі цієї сторінки показує, що залишається помітним при 16 px: дві великі кольорові ділянки листка й одна товста прожилка.

Перевірте, чи форму добре видно і на світлій, і на темній панелі вкладок. На рисунку темно-зелена половина листка на темному тлі майже зникає, і форму тримає світло-зелена половина. Зображення одного темного кольору там було б погано видно.

Що робити далі

Фавікони ICO: запитання та відповіді

Чи можна перетворити PNG або JPG на ICO?

Так. У Lil Cactus обидва формати можна відкрити й експортувати в ICO. Значком стає видиме зображення.

Чи може ICO мати прозорий фон?

Так. У Lil Cactus ICO зберігає прозорість, яка вже є у вашому зображенні. Якщо хочете, щоб навколо значка було порожньо, спершу приберіть однотонний фон.

Що відбувається з прямокутним зображенням в ICO?

У Lil Cactus зображення вписується в кожен вибраний квадрат без розтягування. Зайве місце заповнюється прозорими полями.

Чи можна експортувати ICO лише з одним розміром?

Так. У Lil Cactus залиште в розділі «Розміри значків» позначеним лише потрібний розмір. ICO міститиме тільки його.

Чи можна зробити ICO розміром 512 × 512 px?

Ні. У Lil Cactus найбільший розмір ICO — 256 × 256 px. Якщо потрібні більші розміри в пікселях, використовуйте PNG.

Чи завантажується моє зображення кудись, коли я створюю ICO?

Ні. Lil Cactus створює ICO у вашому браузері й завантажує його на ваш пристрій; зображення не надсилається на сервер. Про необов’язкову статистику використання написано на сторінці конфіденційності.

Опубліковано  · Востаннє перевірено