Favicon - це favorite icon або ж кажучи російською мовою іконка для вибраного. Але це стара розшифровка, в нинішній час favicon є ще й іконкою самого сайту, відображаючись у вкладці браузера перед title. Також у багатьох пошукових системах, поруч з сайтом, відображається favicon. І часом, вашу favicon можна зустріти в багатьох рейтингах сайтів і блогів. Більш рідкісні випадки, де можна зустріти іконку сайту, це в панелі закладок Windows або на робочому столі, на сьогоднішній день це теж актуально, зустрічаються люди, які роблять потрібні закладки на робочому столі.
Таким чином на сьогоднішній день favicon можна зустріти в багатьох місцях, а не просто в обраному. А раз це так, то це можна використовувати для своєї ж користі, оскільки хороший favicon допомагає підвищити відгук від людей, роблячи посилання на ваш сайт більш привабливою. Хто відмовиться від декількох зайвих відсотків трафіку? Мені здається ніхто, всі будуть тільки раді їм! Тому у кожного повинен бути привабливий favicon. Давайте я розповім вам про основні плюси, які дає наявність хорошого Favicon у вашого сайту.
Навіщо потрібен Favicon
Як уже писалося вище Favicon це іконка вашого сайту і саме банальне її призначення - відображатися на вкладці браузера. Але у неї існує ще безліч призначень. Давайте я вам розповім про всіх, щоб ви в повній мірі усвідомлювали значимість favicon на сайті.
Для чого потрібен Favicon:
- Іконка на вкладці браузера. Так склалося, що давним давно іконку почали використовувати творці браузерів і поміщати її перед заголовком Titile на вкладці браузера, так вона і прижилася там. На сьогоднішній же день це вважається вже стандартом.
- Іконка в обраному. Вибране, воно ж закладки, це місце куди ви можете зберегти посилання на сайт з будь-якої позначкою, щоб не втратити. Насправді дуже корисна річ, для тих, хто веде активну діяльність в інтернеті, тому що часом не хочеться втрачати улюблені або корисні сайти. Нижче ви можете спостерігати приклад з мого списку закладок.
- Іконка в пошуковій видачі. Пошукові системи виводять її зліва від самого посилання на сайт. Дуже такий важливий фактор, що на сайти мають favicon клацають дещо частіше, ніж на сайти не мають його. Тому рекомендується його встановлювати. На малих рівнях трафіку ви цього не помітите, а коли у вас трафік буде 1000 і більше, ви почнете відчувати вплив іконки на вашому сайті. З метою підвищення CTR (кліків) у видачі варто задуматися про її установці. Приклад ви можете бачити нижче.
- Іконка на робочому столі комп'ютера, якщо ви там маєте в своєму розпорядженні посилання на сайт. Це явище можна зустріти рідше, але воно все ж зустрічається. Є користувачі які вважають за краще зберегти улюблені сайти на робочий стіл або ж в панель швидкого доступу Windows. І ось тут можуть виникнути проблеми, якщо Favicon зроблений не правильно. Справа в тому, що розмір Favicon не 16 × 16. Точніше 16 × 16 це один з розмірів іконки на сайті, а їх повинно бути як мінімум 3 в різних дозволах. Але пошукавши інформацію в мережі, про це мало хто знає. А зараз я вам покажу головні відмінності в тому, коли у вас одна іконка і кілька в різних дозволах.
В цілому як ви бачите наявність Favicon на сайті є хорошим таким плюсом у вигляді того, що ваш сайт отримує додаткових відвідувачів завдяки залученню уваги у видачі та різних рейтингах. Додатково до цього ваш сайт запам'ятовується в очах користувача, перебуваючи з іконкою в панелі закладок, на стартовій сторінці або на робочому столі. Саме з цих причин варто зробити Favicon правильно, щоб він коректно відображався при першій-ліпшій нагоді розміщення. Побачивши все плюси від іконки на сайті, тепер перейдемо безпосередньо до її створення.
Як намалювати Favicon
Для того, щоб почати, відкрийте Photoshop і почніть створення документа файл - створити або ж можна обійтися короткою комбінацією клавіш CTRL + N.
У вікні, вам необхідно вказати розміри створюваного зображення - 48 x 38px. Також вам необхідно задати дозвіл, вкажіть його рівним 300 пікселям на дюйм. Це необхідно для отримання найбільш красивої картинки.
Далі натисніть на кнопку ОК і ви побачите, як у вас з'явиться робоча область, яка буде розміром 48 x 48 і вона буде дуже маленька. Вам необхідно зробити її на весь екран, для зручного малювання. Можете перетягнути повзунок масштабування або ж просто натиснути CTRL і «+».
Після чого я вибрав інструмент «овал», намалював з його допомогою окружність, оскільки хочу, щоб мій favicon був круглим, а колір вибрав темно червоний, тому що, це є основною колірною гамою мого блогу. В результаті вийшла ось така ось коло. Ваш малюнок може бути іншим. На круг я завдав букву «S». При нанесення напису, варто вибрати «різке» написання, оскільки при такому дозволі, будь згладжування зіпсує літери, тому що при зменшенні до розміру 16 × 16, літера зіллється сама з собою. Але при «різкому» написанні все буде добре.
Ми з вами отримали іконку розміром 48 × 48 і нам потрібно її зберегти. Для цього вибираємо «файл» - «зберегти як». Але є і другий варіант, якщо ви лютий шанувальник економити місце або вам важлива швидкість завантаження сайту, то зайдіть у вкладку трохи нижче «зберегти для web». Особисто я зберігаю просто.
Натискаємо «зберегти» і отримуємо вікно, де необхідно вибрати місце для збереження вашого favicon. Що стосується формату, то вибирайте будь-який. Хоч і дуже часто можна зустріти інформацію, що потрібен формат ico, то це застаріла інформація, його потрібно зберігати в форматі PNG і це не буде помилкою.
Далі вам необхідно створити ще кілька копій іконки, тому її необхідно зменшити ще до двох розмірів, до 32 × 32 і 16 × 16. Давайте для початку зробимо копію 32 × 32, йтимемо плавно по зменшенню. Для цього вам потрібно перейти в розділ «зображення» - «розмір зображення».
Після того, як ви натиснете на «розмір зображення», у вас відкриється вкладка, де потрібно буде налаштувати параметри зменшення favicon. У нашому випадку його з розміру 48 × 48 потрібно зменшити до розміру 32 × 32.
Після цього вам потрібно повторити процедуру збереження іконки сайту, але при цьому дати іншу назву, наприклад, favicon32, а для більшої favicon48, особисто я називав їх саме так, для простоти.
Тепер залишилося зробити останню копію картинки, це ту, яка буде відображатися на самих вкладках браузера, тобто favicon 16 × 16. Для цього знову переходимо в розділ «розмір зображення» і зменшуємо до розміру 16 × 16.
Знову зберігаємо отриману іконку під іншим ім'ям, цю можете назвати favicon16 і не забудьте вибирати формат для збереження PNG.
Як поміняти favicon
Але ви можете і завантажити її через адмін-панель, якщо така функція присутня у вашій CMS. Після всіх виконаних маніпуляцій, вам необхідно прописати саму іконку на сайті. Для цього вам потрібно відкрити верхню частину коду вашого шаблону. Як правило верхню частину називають header. У цій частині коду вам необхідно знайти таке вміст.
Але не факт, що в коді буде задана іконка сайту, її може і не бути. Але вам треба задати її самостійно між двох head. Але врахуйте, стандартна запис нам не підходить, це не є застарілим рішенням. Нам необхідно видалити цей рядок.
Після того, на місці даного тега, нам з вами необхідно прописати відразу 3 наших іконки. Справа в тому, що з введенням HTML5, не обов'язково, щоб формат був ico. Тепер можна використовувати і png. І ми з вами будемо додавати саме в цьому форматі. На місце старого коду вставте новий, правильний код favicon.
Вказавши іконку сайту таким чином, в трьох форматах, ми даємо зрозуміти, що у нас є різні розміри і брати варто той, який потрібно, в разі, якщо потрібна велика, то візьметься 48 × 48. Так само і з іншими, для вкладок браузера буде братися 16 × 16 і так далі. Але суть в тому, що тепер ваша іконка, при необхідності великий, буде виглядати красиво і згладжено, що є хорошим плюсом.
Поділитися посиланням:
Привіт Іван, спасибі за вашу інструкцію, вона мені дуже допомогла. Я спочатку взяв, намалював favicon в фотошопі, а потім не міг зрозуміти як її поставити на сайт, всюди пишуть, що потрібно строго ico, а ви тут скинули чудовий код, який дозволяє вантажити будь-який формат, тепер не треба мучитися над пошуком програми робить ico . Спасибі ще раз, поміняв свій favicon і тепер не можу натішитися.
У мене фавікон встановлений за допомогою плагіна. Потрібно буде зробити як ви описали і видалити зайвий плагін.