Зображення · Генератор фавіконів

Створення фавіконів для вебсайту на Mac

Усі фавікони, потрібні вебсайту, а також вебманіфест і HTML для вставлення на сторінку.

Працює на вашому Mac

Запитати ШІChatGPTClaudePerplexityРежим ШІGrokMarkdown

Завантажити OneMacTools Більше інструментів: Зображення

Генератор фавіконів на Mac

Генератор фавіконів зі зразковими файлами та його параметрами

Що Генератор фавіконів створив зі зразкових файлів

Знімки екрана програми зі зразками файлів.

Як користуватися «Генератор фавіконів»

1
Перетягніть свій логотип
Використовуйте одне зображення, бажано квадратне й щонайменше 512 px. Неквадратні зображення обрізаються до квадрата по центру.
2
Додайте дані свого сайту
Введіть назву сайту й колір теми для вебманіфесту та виберіть тло для Apple touch icon.
3
Клацніть «Створити фавікони»
Створюються всі файли фавіконів, а також маніфест і фрагмент HTML.
4
Завантажте на свій сайт
Скопіюйте файли з папки «favicons» (у папці з датою в Завантаження › OneMacTools) у корінь свого сайту, а HTML вставте в <head> сторінки. Фрагмент коду також показано в програмі.

Що робить Генератор фавіконів

З одного логотипа отримайте favicon.ico з версіями 16, 32 і 48 px усередині, PNG 16 і 32 px, Apple touch icon 180 px на суцільному тлі, щоб він не ставав чорним на iPhone, і піктограми 192 і 512 px для Android та вебпрограм, які можна встановити, — а також site.webmanifest з назвою сайту й кольором теми та фрагмент HTML для вашого <head>.

Чудово підходить для

Додайте фавікон до нового сайту
Зробіть сайт придатним до встановлення на телефонах
Замініть розмитий фавікон

Пояснення параметрів

Назва сайту: Назва в site.webmanifest, яку показано, коли хтось установлює ваш сайт на телефон. Якщо залишити порожньою, використовується назва файлу зображення. Коротка назва — це перші 12 символів.
Колір теми: Hex-колір, наприклад #1E90FF, для кольору теми браузера і кольору тла в маніфесті. Якщо залишити порожнім — білий.
Тло для Apple touch icon: «Білий», «Колір теми» або «Чорний». iPhone показує прозорі піктограми на головному екрані на чорному, тож Apple touch icon розміром 180 px отримує суцільне тло.
Заокруглити кути: За замовчуванням вимкнено. Заокруглює кути логотипа в кожному розмірі фавікона.

Найкращі практики

Використовуйте простий знак, а не повний логотип зі словами. За 16 px упізнаваними лишаються лише виразні форми.
Почніть із прозорого PNG, щоб фавікон гарно виглядав і на світлих, і на темних вкладках браузера.
Введіть колір теми як hex-значення. Він фарбує інтерфейс браузера на деяких телефонах, тож виберіть основний колір свого бренду.
Після вивантаження відкрийте сайт у приватному вікні, щоб перевірити нову піктограму, бо браузери довго кешують фавікони.

Працює з

У: Одне зображення, в ідеалі квадратне PNG розміром 512 px або більше.
Вихід: Папка «favicons» з favicon.ico (усередині 16, 32 і 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png і android-chrome-512x512.png, а також site.webmanifest і add-to-head.html.

Неквадратні зображення обрізаються до квадрата по центру.

Запитання про Генератор фавіконів

Які файли фавіконів потрібні вебсайту?

favicon.ico для старіших браузерів, PNG 16 і 32 px для вкладок, Apple touch icon 180 px для головного екрана iPhone, а також піктограми 192 і 512 px із вебманіфестом для Android. OneMacTools створює їх усі та HTML, який слід вставити в <head> сторінки.

Куди потрапляють файли?

У кореневій папці вашого вебсайту, поруч з index.html. І фрагмент HTML, і маніфест очікують їх саме там.

Як створити favicon.ico на Mac?

Перетягніть свій логотип на «Генератор фавіконів» і натисніть «Створити фавікони». Буде створено favicon.ico з версіями 16, 32 і 48 px усередині, а також розміри PNG.

Чому моя піктограма виглядає чорною на головному екрані iPhone?

iOS показує прозорі ділянки піктограми на головному екрані чорними. Щоб цього уникнути, Apple touch icon розміщується на суцільному білому, чорному тлі чи тлі кольору теми.

Навіщо потрібен site.webmanifest?

Він повідомляє телефонам назву, піктограми й кольори вашого сайту, коли хтось додає його на домашній екран чи встановлює як вебпрограму.

Мій новий фавікон не показується. Що не так?

Браузери агресивно кешують фавікони. Перевірте, що файли лежать у корені сайту, а фрагмент коду — в <head>, а потім перезавантажте сторінку в приватному вікні.

Чи вивантажує «Генератор фавіконів» мої файли?

Ні. Генератор фавіконів працює повністю на вашому Mac, тож ваші файли ніколи його не залишають, і все працює офлайн.

Чи змінить Генератор фавіконів мої оригінальні файли?

Ні. Результати зберігаються як нові файли в папці з датою в «Завантаження» › OneMacTools, а оригінали лишаються точно такими, як були, якщо ви не ввімкнете параметр, який каже інше.

Що потрібно для Генератор фавіконів?

Лише Mac з macOS 26 або новішою. Більше нічого встановлювати не треба.

Далі зробіть це

Генератор OG-зображень

Створіть картку 1200 × 630, яка з'являється, коли вашим посиланням діляться в X, LinkedIn, Slack, WhatsApp та iMessage.

Генератор піктограм програм

Одне квадратне зображення — усі піктограми програми: каталог ресурсів iOS для Xcode, піктограми запуску й адаптивні піктограми Android та .icns для Mac.