Як намалювати favicon.ico?

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

Відео: Як створити іконку favicon.ico для сайту онлайн

Що таке favicon? Це значок веб-сайту. Зображення, яке ви бачите поруч з його назвою в адресному рядку браузера, в журналі, в обраному, закладках, на панелі закладок і т.п. Це зображення розміром 16 на 16 пікселів, воно завжди носить назву favicon і має розширення файлу ico (що означає «іконка»).

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

Як створити favicon? Оскільки favicon - це звичайна картинка, її можна намалювати в графічному редакторі, що підтримує даний формат, а потім зберегти з ім`ям «favicon.ico». Для створення значка сайту також призначене безліч спеціалізованих програм, наприклад, IcoFX.

Відео: *** фавікона (favicon). Як створити і встановити на блог? ***

Але сьогодні ми не будемо використовувати звичні програми, а звернемося до чудового онлайн сервісу для створення favicon - «favicon.ico Generator», який можна знайти в інтернеті за адресою https://favicon.cc

Якщо ви хочете стати частиною спільноти творців favicon, брати участь в рейтингу і зберігати всі іконки сайтів на сервері «favicon.ico Generator», зареєструйтеся, клікнувши на посилання «Register». Але навіть незареєстрованим користувачам доступні всі необхідні інструменти створення favicon.

Перш за все, оглянемося.

У правій частині вікна ви побачите список доступних команд:

• «Create New Favicon» - створити новий favicon;

• «Import Image» - імпортувати зображення favicon;

• «Latest Favicons» - останні favicon, створені користувачами сайту;

• «Top Rated Favicons» - рейтинг favicon.

У центрі розташовано полотно, на якому ви і будете малювати favicon. Воно дбайливо розділене на 16 клітинок по вертикалі і горизонталі, щоб не ламати голову, відраховуючи 16 пікселів. А адже саме такий розмір повинен мати favicon - 16 на 16 точок.

У лівій частині вікна знаходяться інструменти малювання: вибір кольору, ластик, піпетка і інструмент переміщення.

У нижньому блоці «Preview», не відволікаючись від процесу малювання favicon, можна побачити, як він буде виглядати на вашому сайті.

Як ви могли переконатися, все просто і зрозуміло, хоча і по-англійськи. Що називається, зроблено для людей! Але не будемо зволікати і приступимо до малювання favicon.

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

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

Якщо намальований об`єкт або його частина вам не сподобалися, не варто впадати у відчай. Ситуацію виправить ластик. Відзначте його галочкою і періть на здоров`я!

На сайті «favicon.ico Generator» можна створювати не тільки статичні, але і анімовані favicon. Для цього необхідно натиснути посилання «Use Animation», яка розташована відразу під полотном.

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

• «Frame 1 of 1» (Кадр перший з одного) - показує номер поточного кадру і загальна кількість кадрів.

• «1sec» - час показу поточного кадру, яке вибирається зі списку від 0,05 до 20 секунд. Оптимально, якщо кадри будуть змінювати одному руга через 0,5 - 2 секунди.

• «Clear Frame» - очистити кадр від зображення.

• «Append New Frame» - додати наступний кадр.

• «Copy Previous Frame» - копіювати зображення з попереднього кадру в поточний кадр.

• «Delete Frame» - видалити кадр.

• «Loop forever» - один із способів відтворення анімації, що означає безперервне відтворення. Також можна вибрати «stop at last frame» - зупинитися на останньому кадрі, або кількість повторів анімації від 2 до 20 разів.

Таким чином, щоб додати новий кадр анімованого favicon, досить натиснути «Append New Frame». Потім за допомогою інструментів малювання створити зображення, яке буде показано в даному кадрі, і визначити тривалість його показу, наприклад 1 секунду. Після чого додаємо новий кадр, а при бажанні - копіюємо в нього попереднє зображення і трохи змінюємо його для досягнення ефекту плавного переходу.

Нарешті, коли результат предпросмотра нас повністю влаштовує, прийшов час завантажити свіженький favicon на комп`ютер і прилаштувати на свій сайт. Для цього в блоці «Preview» натисніть кнопочку «Download Favicon» і збережіть файл з іконкою на комп`ютері.

Спосіб вставки favicon на сайт буде залежати від того, яку систему управління контентом ви використовуєте. Якщо це Joomla або інша система, то там, як правило, в коді сайту вже прописана посилання на favicon. Досить замінити стандартну іконку з кореневої папці сайту і папці шаблону на вашу.

Якщо ж ви робите сайт або шаблон з нуля, то в коді сайту необхідно прописати рядок:

Параметр href вказує на шлях до зображення favicon щодо кореня сайту. У нашому прикладі це папка www, в якій розташований файл favicon.ico. Вам же слід замінити «/www/favicon.ico» на шлях до favicon на вашому хостингу. Після цього, перезагрузив сторінку сайту, ви вже зможете милуватися красивим favicon.

Спеціально для Ячайнік, Олена Карлтон

{Mosloadposition cpanel}