Дотримуйтесь цього робочого прикладу, а потім адаптуйте ті самі елементи керування до власного зображення. Відкрити Генератор Favicon / ICO.
Виберіть чіткий логотип або почніть з ініціалів
Відкрийте генератор Favicon / ICO і виберіть «Зображення». Завантажте PNG, JPG, JPEG, WebP або GIF, або виберіть «Спробувати зразок». У прикладі використовується favicon-orbit.png, фіолетовий орбітальний знак розміром 512 × 512 пікселів із прозорими кутами. Вхідний файл має розмір 202,491 байтів.
Для бренду без готового логотипа виберіть «Текст» на сторінці інструмента. Введіть одну або дві літери та натисніть «Продовжити». Редактор пропонує шрифти Modern sans, Classic serif та Monospace, а також окремі кольори тексту та фону. Приймається до трьох символів, але додаткові символи можуть стати важкорозпізнаваними при малих розмірах.
Збережіть оригінальний файл. Генератор створює нові файли значків і не перезаписує вихідний файл. Вхідний файл GIF стає статичним значком, а не анімованим фавіконом.
Для монограми меню «Шрифт» починається з трьох включених стилів. Виберіть «Використовувати системні шрифти» у підтримуваному браузері на комп'ютері та надайте доступ, щоб додати шрифти, встановлені на вашому пристрої. Використовуйте стрілки «назад» і «вперед», щоб порівняти сусідні шрифти, або виберіть сімейство та перегляньте попередній перегляд, особливо при 16 пікселях. Шрифти залишаються на вашому пристрої; включені стилі працюють без дозволу.
Використовуйте простий силует. Детальна фотографія може виглядати привабливо при 512 пікселях, але перетворитися на нечітку пляму при 16 пікселях.
Уточніть кадрування та перевірте маленькі попередні перегляди
Редактор відображає світлі та темні вкладки браузера, а також попередні перегляди у звичайних розмірах значків. Спочатку перевірте приклад розміром 16 пікселів; це найсуворіший тест на те, чи залишається знак впізнаваним. Попередній перегляд Apple Touch представляє експорт розміром 180 пікселів і відображається меншим у робочій області.
На телефоні відкрийте «Налаштування». Залиште «Створити з» встановленим на «Завантажене зображення», а «Підгонка зображення» — на «Показати все зображення». Для цього зразка встановіть «Відступ навколо вмісту» на 0 і увімкніть «Прозорий фон». Вихідне зображення вже містить власну округлу фіолетову форму та чіткі поля, тому йому не потрібен додатковий кольоровий фон.
З іншим вихідним файлом «Показати все зображення» зберігає краї, тоді як «Заповнити значок» може їх обрізати. «Округлий квадрат», «Квадрат» і «Коло» визначають зовнішню форму. «Прозорий фон» зберігає прозорі ділянки, але не може видалити непрозорий фон, уже намальований на фотографії. Перевіряйте найменший попередній перегляд після кожної зміни кадрування.
Логотип із прозорими кутами може отримати небажану другу рамку, якщо ви додасте окремий непрозорий фон. Перегляньте обидва варіанти фону.
Приклад у цьому посібнику
Спробуйте зразок: favicon-orbit.png, 512 × 512 пікс. Завантажене зображення; Показати все зображення; Заокруглений квадрат; Відступ навколо вмісту 0%; Прозорий фон увімкнено; Пакет значків вебсайту (ZIP); Назва вебсайту My website.
- Вихідне зображення
- 512 × 512 PNG · 202,491 байтів
- ICO кадрів
- 16, 24, 32, 48, 64, 128 та 256 пікс.
- Пакет
- 9 файлів · 304,351 байтів
- Показаний результат
- Справжній кадр 256 × 256 ICO
Виберіть мультирозмірний ICO або пакет для вебсайту
У розділі «Завантажити» (Download) для цього прикладу виберіть «Пакет значків вебсайту» (ZIP). Залиште назву вебсайту «My website» для зразка або замініть її на справжню назву бренду для власного проєкту. Ця назва використовується у файлі site.webmanifest; вона не додається як текст поверх зображення.
Виберіть «Почати» (Start). Браузер згенерує семикадровий favicon.ico із квадратними зображеннями розміром 16, 24, 32, 48, 64, 128 та 256 пікселів. Він також створить PNG значків розміром 16, 32, 48, 180, 192 та 512 пікселів, маніфест та інструкції зі встановлення. Результатом є один ZIP-файл, а не окрема кнопка завантаження для кожного значка.
Якщо вам потрібен лише класичний favicon.ico, виберіть натомість «Багаторозмірний ICO» (Multi-size). Це корисно, коли платформа вебсайту приймає завантаження ICO і не потребує окремого пакета.
Цей пакет — це набір ресурсів значків вебсайту. Він не перетворює сайт автоматично на прогресивний вебзастосунок (PWA).
Завантажте, встановіть та перевірте файли значків
Завантаження зберігає website-icons.zip. Фактичний робочий приклад містить дев'ять файлів і має розмір 304,351 байтів. Порівняння вище показує вихідне зображення розміром 512 пікселів поруч із справжнім кадром розміром 256 пікселів, витягнутим із експортованого ICO, а не змодельований знімок екрана браузера.
Розпакуйте ZIP, завантажте файли значків у кореневу папку вашого вебсайту та прочитайте INSTALL.txt. Він містить HTML теги посилань для ICO, значка PNG, значка Apple Touch та вебманіфесту. Якщо ви розміщуєте файли в підпапці, оновіть як шляхи HTML, так і шляхи до значків усередині site.webmanifest.
Перевірте свій сайт у новій вкладці браузера та на пристроях, які вас цікавлять. Браузери можуть кешувати фавікони, тому старий значок не є доказом того, що встановлення не вдалося. Збережіть вихідне зображення та завантажений пакет перед оновленням редактора, оскільки оновлення повертає на головну сторінку інструмента.
Виберіть одне канонічне розташування значка та підтримуйте шляхи HTML незмінними. Генератор створює ресурси; їх публікація залишається частиною робочого процесу вашого вебсайту.
Поширені запитання
Чи можу я створити фавікон без завантаження логотипа?
Так. Виберіть «Текст», введіть свої ініціали, а потім виберіть шрифт, кольори, форму та інтервали в редакторі.
Які розміри містяться у файлі ICO?
ICO містить сім кадрів на основі PNG: 16, 24, 32, 48, 64, 128 та 256 пікселів у квадраті. Браузер вибирає відповідний кадр.
Що входить у ZIP-архів вебсайту?
Він містить favicon.ico, шість іконок PNG для браузера, Apple та Android, site.webmanifest та INSTALL.txt з тегами посилань HTML.
Чи може мій фавікон мати прозорий фон?
Так. Увімкніть «Прозорий фон». Це зберігає прозорі області навколо джерела; це не видаляє непрозорий фон з фотографії.
Чи завантажується зображення для конвертації?
Ні. Цей інструмент генерує та упаковує файли іконок у вашому браузері. Зберігайте завантажені файли, оскільки редактор не є постійним сховищем проектів.
Чи можу я використовувати шрифти, встановлені на моєму комп'ютері?
Так, якщо ваш браузер підтримує доступ до локальних шрифтів. Виберіть «Текст / монограма», виберіть «Використовувати системні шрифти» та надайте дозвіл браузеру. Доступні вам сімейства шрифтів з'являться у списку шрифтів. Включені стилі залишаються доступними, якщо в дозволі відмовлено або доступ до локальних шрифтів недоступний.
Надайте своєму наступному вебсайту чіткий маленький підпис.
Спробуйте зразок або використайте власний файл і перегляньте результат перед поширенням.
