1. Онлайн-сервіси для створення фавікон
2. Використання готових іконок для сайту
3. Прозорість і розмір іконки
4. Як встановити favicon на сайт

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

Favorite Icon ( "значок для обраного") - саме так розшифровується favicon.ico. Він був придуманий ще в минулому столітті. У березні 1999 року, браузер "Internet Explorer 5" став першим підтримувати ці значки. У порівнянні з 99 роком, інтернет-технології пішли далеко вперед, а іконка залишилася і використовується донині. Звичайно, за 16 років вона зазнавала ряд удосконалень, про деякі з них ми сьогодні поговоримо. Також розповім про те, як можна намалювати власну іконку або згенерувати її з графічного файлу. Чи не обійду увагою і сайти, де можна вибрати і завантажити красивий favicon для свого сайту.

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

Зазвичай, фавікон корелюється з назвою сайту, і / або його логотипом, тематичною спрямованістю і т.д. І при відображенні має розмір 16х16 пікселів.

На самому початку, іконка мала розширення ICO, але сьогодні цим справа не обмежується, і можна зустріти її в таких форматах, як GIF, JPEG і PNG. Ці формати підтримуються і всіма сучасними інтернет-браузерами, за винятком тільки підтримки JPEG в Internet Explorer.

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

Онлайн-сервіси для створення фавікон

Їх принцип досить простий. Вам доступно поле для малювання, розміром 16х16 квадратиків, кожен з яких символізує піксель. І найпростіший набір інструментів у вигляді олівця, гумки і т.д. Де ви, перетворившись художником, починаєте малювати свій favicon.

Як правило, ці сервіси дозволяють не тільки малювати, а й конвертувати графічний файл в стандарт ICO. Таких сервісів існує кілька, ось тільки деякі з них:

1. Favicon.ru - російськомовний сервіс, скріншот з якого ви бачите трохи вище. Дозволяє як малювати, так і конвертувати з інших форматів в формат ICO.
2. Favicon.cc - англомовний сервіс, з аналогічними можливостями, але підтримує створення анімованих ікон.
3. Favicon.by - російськомовний сервіс (судячи по домену білоруський). Функціонал, також аналогічний попереднім. Анімація не підтримується, але є можливість вказавши адресу сайту, «поцупити» з нього іконку для подальшої переробки в редакторі.

Подібні дії можна зробити і в більш вам звичному графічному редакторі. Там не обов'язково малювати в дозволі 16х16 пікселів, тому що при конвертації зображення favicon.ico зменшиться до потрібних розмірів. Якщо я малюю іконку самостійно, то вважаю за краще користуватися цим методом. Зберігаю в фотошопі картинку у форматі PNG, а потім перекладаю за допомогою даних онлайн-сервісів в ICO.

Використання готових іконок для сайту

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

Сайтів, на яких можна їх скачати, досить багато. Я не буду все перераховувати. Наведу, для прикладу, теж три сайти.

1. IconSearch.ru - російськомовний сервіс, з пристойним набором іконок. Розміри іконок від 16х16 до 128х128 пікселів. Є можливість збереження іконки в формати ICO і PNG.
2. IconSeeker.com - аналогічний сервіс, тільки англомовний. Великих відмінностей немає, за винятком того, що трапляються іконки розміру 256х256.
3. IconFinder.com - це один з моїх улюблених пошукачів іконок. Там правда багато платних іконок, але і серед безкоштовних є що вибрати. Крім згаданих уже ICO і PNG форматів, можна скачати в SVG, або навіть в AI (векторна графіка Adobe Illustration). Іконки розмірністю до 512х512 пікселів.

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

Прозорість і розмір іконки

Якщо ви вирішили вдіяти не квадратну іконку, а з прозорими пікселями, наприклад, у вигляді кола, то не забудьте подивитися, як це буде виглядати в браузерах, у тих користувачів, у кого встановлені нестандартні теми оформлення (з якимось малюнком або дуже темні ).

Деякі намальовані іконки з погано проробленої прозорістю, можуть не дуже красиво виглядати на фонах, відмінних від світлих відтінків. Прозорість підтримують формати ICO, GIF і PNG.

Фавікон може бути використаний і більше ніж 16х16 пікселів. Наприклад, розмір мого favicon.ico становить 256х256 пікселів. На комп'ютері або ноутбуці ви, звичайно, навряд чи помітите різницю, тому що вона масштабується автоматом. А ось в мобільних браузерах (на вашому смартфоні або планшеті), великі і маленькі іконки можуть відображатися про різному.

Так в мобільному Google Chrome, замість іконки 16х16, можна побачити кольоровий квадрат з першою літерою з назви сайту по середині. Інші браузери можуть розтягувати маленьку іконку, що виглядає візуально не дуже красиво. Частка мобільного трафіку сьогодні висока, і може досягати 20-25%. І з кожним роком тільки зростає, тому, подумати про нього на майбутнє буде не зайвим.

Як встановити favicon на сайт

Якщо на вашому сайті вже є стандартний фавікон від CMS, то найпростіший варіант, це замінити файл favicon.ico на вашому хостингу новим фалом (зазвичай він знаходиться в корені сайту). Також в ряді CMS установка favicon здійснюється через адмінку і не потрібно копирсатися коді сайту.

Якщо стандартної іконку і вас немає, і в адмінки вона теж не змінюється, то необхідно прописати невеликі рядки в HTML код вашого сайту. Їх потрібно розміщувати між тегів <head> і </ head>. У різних CMS структура шаблонів різна, тому, іноді доводиться пошукати в якому файлі шаблону є ці теги. У WordPress, наприклад, цей файл називається «header.php», а у OpenCart - «header.tpl».

Якщо у вас іконка в форматі ICO, то потрібно вставити наступний код:

<Link rel = "icon" href = "/favicon.ico" type = "image / x-icon">

<Link rel = "shortcut icon" href = "/favicon.ico" type = "image / x-icon">

Даний запис справедлива, якщо фавікон знаходиться в корені сайту. Якщо він має інший шлях, то перед «/favicon.ico», потрібно записати шлях до файлу. Наприклад, такий: «http: //мой-сайт.ru/моя-папка/favicon.ico».

Код для іконки в форматі GIF:

<Link rel = "icon" href = "/favicon.gif" type = "image / gif">

<Link rel = "shortcut icon" href = "/favicon.gif" type = "image / gif">

Код для іконки в форматі PNG:

<Link rel = "icon" href = "/favicon.png" type = "image / png">

<Link rel = "shortcut icon" href = "/favicon.png" type = "image / png">

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