Utilia
Категорії ▾
Мова: uk ▾

Генератор favicon

Створіть favicon з картинки, літери чи емодзі: favicon.ico, apple-touch-icon, PNG для Android і site.webmanifest в одному ZIP. Усе у вашому браузері.

Джерело

Вписування
site.webmanifest

Як створити favicon

  1. У розділі Джерело виберіть Зображення або Текст або емодзі. - Зображення: перетягніть PNG, JPG, WebP або SVG. Найкраще працює квадратний логотип щонайменше 512 × 512 px. Виберіть Усе зображення, щоб вписати його в іконку, або Заповнити й обрізати, щоб закрити весь квадрат. - Текст або емодзі: введіть літеру, ініціали або емодзі, а потім виберіть Шрифт, Жирний і Колір тексту.
  2. Задайте Колір тла або позначте Прозоре тло. Виберіть Форма (Квадрат, Із заокругленими кутами або Коло) і Відступ (%), щоб залишити простір навколо вмісту.
  3. За бажання відкрийте site.webmanifest, щоб ввести Назва застосунку (веб-маніфест), Коротка назва, Колір теми та URL папки з іконками (залиште /, якщо файли лежатимуть у корені сайту).
  4. Натисніть Згенерувати favicon. Іконки з’являться в реальному розмірі поруч із макетом вкладки браузера. Далі кожна зміна оновлює їх миттєво.
  5. Натисніть Завантажити ZIP, завантажте файли на свій сайт, потім Копіювати теги й вставте їх у <head> ваших сторінок.

Що в архіві ZIP

Файл Розмір Для чого
favicon.ico 16, 32 і 48 px Вкладки браузера, закладки, старі браузери, Windows
favicon-16x16.png 16 × 16 Вкладки браузера
favicon-32x32.png 32 × 32 Вкладки на екранах із високою щільністю, ярлики на панелі завдань
apple-touch-icon.png 180 × 180 Головний екран iPhone і iPad
android-chrome-192x192.png 192 × 192 Головний екран Android (веб-маніфест)
android-chrome-512x512.png 512 × 512 Заставки під час встановлення (веб-маніфест)
site.webmanifest — Назва, кольори й іконки сайту, який можна встановити
favicon-tags.html — HTML-теги для довідки

Файл ICO містить три зображення PNG – формат, який читають Windows (починаючи з Vista) і всі сучасні браузери. Іконка apple-touch-icon завжди зберігається на суцільному тлі, бо iOS показує прозорі пікселі чорними; за прозорого тла використовується білий.

HTML-теги

Згенеровані теги виглядають так (із URL вашої папки):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Браузери також автоматично запитують /favicon.ico у корені вашого домену, тож тримати його там корисно навіть для сторінок без цих тегів.

Поради щодо дизайну

  • Не ускладнюйте. У розмірі 16 × 16 px деталі зникають. Найкраще читається одна літера, виразний символ або найпростіша версія логотипа.
  • Перевіряйте перегляд у реальному розмірі. Іконка 16 px у макеті вкладки – це те, що справді бачать відвідувачі.
  • Пам’ятайте про темний режим. Темний логотип на прозорому тлі може зникнути в темних темах браузера; допомагають кольорове тло або невеликий відступ.
  • Емодзі виглядають по-різному в кожній системі, бо кожна платформа малює їх у своєму стилі. Файли PNG зберігають вигляд вашого пристрою.

Поширені запитання

Які розміри потрібні для favicon?

На практиці: favicon.ico із 16, 32 і 48 px, apple-touch-icon 180 px і PNG на 192 та 512 px для веб-маніфесту. Цей інструмент створює їх усі з одного джерела.

Чи можна використати логотип у форматі SVG?

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

Як зробити favicon з емодзі?

Виберіть Текст або емодзі, введіть або вставте емодзі, виберіть тло або залиште його прозорим і згенеруйте. Результат – справжні PNG та ICO, тож він працює в кожному браузері.

Чому мій новий favicon не з’являється?

Браузери агресивно кешують favicon. Перезавантажте сторінку з очищенням кешу, відкрийте сайт у приватному вікні або додайте версію до URL, наприклад /favicon.ico?v=2.

Чи завантажується моє зображення на сервер?

Ні. Іконки, архів ZIP і маніфест створюються у вашому браузері; ніщо не залишає ваш пристрій.

Схожі інструменти