Порада: як швидко вставити фавикон в HTML

314

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

З фавиконом все не так просто, насправді. Робота з усіма пристроями дуже сильно розтягується і стає вкрай виснажливим процесом з-за фрагментації в мобільних і настільних ОС, а також браузерах. Іноді доводиться працювати з 30+ ресурсами одночасно, все залежить від рівня підтримки, якого ви хочете досягти.

На щастя для нас, є веб-сервіс Real Favicon Generator. На даному веб-сайті реалізована покрокова система генерації, яка дозволяє швидко і дуже просто генерувати всі необхідні фавиконы і веб-ресурси.

Порада: як швидко вставити фавикон в HTML

Процес генерації

Real Favicon Generator сильно спрощує процес генерації іконок. Спершу необхідно вибрати фавикон і завантажити його в генератор. Після завантаження сторінки перед вами з’являться екрани різних пристроїв.

У деяких секціях є однакові опції. Наприклад, можна додати окреме зображення для конкретного пристрою або зовнішній відступ margin до іконки, а також змінити колір тла. Нижче представлені екрани пристроїв, які можна налаштовувати (iOS і Android і інших Windows / Safari).

Порада: як швидко вставити фавикон в HTML

Порада: як швидко вставити фавикон в HTML

Порада: як швидко вставити фавикон в HTML

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

Крім генерації самих іконок сервіс вміє створювати маніфест файл для мобільної версії Chrome, а також змінювати інші параметри в прикріплюються закладках в Safari. Значення налаштувань в результаті заносяться в теги meta.

Як використовувати фавиконы

Натисніть кнопку «створити», коли будете готові. Після завантаження сторінки перед вашими очима буде сирий HTML код, який потрібно буде скопіювати на сайт. Приклад коду:

Генератор створює всі теги link і meta на основі ваших налаштувань. Для завантаження файлів потрібно натиснути на кнопку Favicon Package. Після завантаження витягніть файли в будь-яку папку і скопіюйте іконки на сайт. В процесі налаштувань можна вказати директорію зберігання на той випадок, якщо ваші іконки будуть знаходитися в кореневій папці сайту (наприклад, іконки можуть знаходитися у теці /images/favicons).

Порада: як швидко вставити фавикон в HTML

Залишилося лише скопіювати файли та додати HTML-код в тег . Тепер при закріпленні сайту на пристрої користувачам буде показуватися красивий фавикон.

Якщо даний сервіс допоможе заощадити вам час, то, може, ви пожертвуєте пару доларів в знак подяки (приймаються навіть биткоины!).

Додаткові функції та опції

Крім генерації іконок сервіс Real Favicon Generator може перевірити, а чи всі формати фавикона використовуються на вашому сайті. Після перевірки ви побачите повідомлення про відсутніх форматах іконок, якщо такі є.

Порада: як швидко вставити фавикон в HTML

Підтримка фавиконов розвивається, а цей чудовий сервіс допоможе генерувати кращі фавиконы і додаткові ресурси.