Які файли фавікона потрібні сайту та які розміри їм потрібні

Сайту потрібен невеликий набір файлів-іконок, і більшість рішень стосується розміру. Покладіть favicon.ico із зображеннями 16, 32 і 48 пікселів у корінь сайту для вкладок браузера та Windows. Додайте іконку Apple touch 180 пікселів для головних екранів iPhone і iPad, а також PNG-іконки 192 і 512 пікселів, перелічені у веб-маніфесті застосунку. Генератор фавікона створює їх усі з одного логотипу й записує рядки HTML, які можна вставити на сторінки.

Файли та їхні розміри

ZIP-архів, який завантажує генератор, містить усі сім файлів. Файл favicon.ico складається з трьох PNG-зображень розміром 16, 32 і 48 пікселів, збережених в одному файлі. Кожна іконка є тим самим логотипом, намальованим меншим. Генератор працює з 512-піксельною версією вашого зображення і з неї створює кожен розмір.

Рядки HTML

Генератор записує чотири рядки для секції head ваших сторінок:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Перший рядок вказує на favicon.ico і зазначає розмір 48 на 48. Другий дає PNG 32 пікселі. Третій називає іконку Apple touch, а четвертий вказує на маніфест, у якому перелічено іконки 192 і 512 пікселів. PNG 16 пікселів є в ZIP-архіві, але в цих рядках його немає. Браузери також самі шукають /favicon.ico, тож файл знайдеться, навіть якщо першого рядка немає. Залишайте шляхи такими, як записано, якщо ваші файли не лежать в іншому місці.

Чому малі розміри потребують простих форм

На зображенні 16 на 16 пікселів усього 256 пікселів. У 48-піксельній іконці їх 2 304, а у 512-піксельному вихідному зображенні 262 144. До 16 пікселів більшість деталей логотипу зникає, тож тонка лінія чи маленьке слово перетворюються на розмиту пляму. Використовуйте простий знак або одну-дві літери з сильним контрастом.

Варіант з літерами приймає один або два символи й малює їх великими посередині іконки, зменшуючи, якщо вони надто широкі. Доступні форми: Square, Rounded і Circle. Попередній перегляд показує результати 16, 32, 48, 180 і 512 пікселів поруч, а також світлі й темні вкладки, тож ви можете оцінити малі розміри до завантаження. Попередній перегляд оновлюється, щойно ви змінюєте форму, відступи чи фон, тож можна спершу перевірити кожен варіант.

Відступи, фон і іконка Apple

Відступи мають три налаштування: No padding, Small і Large. Small залишає порожніми 10 відсотків іконки з кожного боку, а Large — 20 відсотків. У режимі зображення No padding обрізає картинку до центрального квадрата, тож краї широкого логотипу втрачаються. Налаштування з відступами натомість вміщують усе зображення всередину квадрата.

Варіанти фону: Transparent, White і Custom; за замовчуванням обрано Transparent. Іконка Apple touch завжди непрозора. У режимі зображення її прозорі ділянки набувають обраного фону, а якщо фон Transparent, то білого. У режимі літер вони набувають кольору фону літери. Прозорі ділянки іконки Apple touch на iPhone і iPad можуть відображатися як чорні, тож генератор їх заповнює. Інші розміри зберігають прозорість, яку ви обрали. Чому прозорий PNG стає чорним пояснює причину.

Фавікон квадратний, тому широкому логотипу спершу потрібна квадратна рамка. Створювач квадратних фото вписує все зображення в кадр 1:1 з розмитою, білою, чорною або власною рамкою, тож нічого не обрізається. Змінити розмір зображення задає точні пікселі. Якщо ввімкнено Keep proportions і заповнено обидві сторони, картинка вписується в рамку без спотворень. Співвідношення сторін фото пояснено розглядає поширені форми.

Зміни, які проявляються не одразу

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

Як зробити це у fixmint

1. Оберіть Image і перетягніть логотип у поле або оберіть Letter і введіть один чи два символи.
2. Встановіть Padding на None, Small або Large, а Background на Transparent, White або Custom colour.
3. Перевірте іконки 16, 32 і 48 px на світлій і темній вкладках, а також попередній перегляд 180 і 512 px.
4. Натисніть Download ZIP, щоб отримати всі сім файлів, або Download favicon.ico, щоб завантажити лише цей файл.
5. Натисніть Copy HTML і вставте рядки з HTML for your head в head кожної сторінки.

Особливі випадки

• Ваше зображення залишається на вашому пристрої. Генератор створює іконки у вашому браузері, і нічого не вивантажується.
• Два символи для літер. Два символи приймаються і малюються меншими, щоб вони обидва вмістилися, тому при 16 пікселях їх важче прочитати, ніж одну літеру.
• Назви файлів. Зберігайте назви, які використовує HTML, бо посилання вказують саме на них.
• Файли, які не вдається прочитати. Якщо зображення не вдається перетворити на іконки, генератор показує повідомлення «Could not make the icons from this input. Try another image.» і очищає результати. Спробуйте інший файл або збережіть зображення знову у поширеному форматі.