1. Як створити фавікон
2. Як зробити фавікон в Фотошопі
3. Як зберегти фавікон
4. Як вставити фавікон на сайт
5. Як замінити фавікон
6. Як створити більш складні фавікона

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

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

Як створити фавікон

Почнемо з розробки дизайну фавікона. Хороший дизайн, незважаючи на свою компактність, повинен відображати всю сутність вашого сайту і бути органічною частиною фірмового стилю. Зазвичай в якості іконки виступає графічний знак (іконка) компанії а не цілий лого (іконка, текст і слоган).

Як фавікона ці вебсайти використовують свої іконки (або близькі до них зображення).

Текст в фавікона використовувати не варто, оскільки через маленького розміру зображення цей текст буде нечитабельним. Винятком з цього правила можуть служити лише всесвітньо відомі текстові символи, які автоматично асоціюються з певними брендом. Наприклад, онлайн-ресурс Wikipedia залишив на фавікона свою велику літеру «W», а Facebook - букву «F».

На цих фавікона присутні букви, які міцно асоціюються з певним брендом. Наприклад, Facebook використовує свій графічний знак. Також зверніть увагу на те, що на зображенні Disney видно пікселі. Це пояснюється тим, що скріншот був зроблений на Retina-дисплеї, який сумісний з іконками розміром 16 × 16, в той час як сайти використовують іконки розміром 32 × 32.

Оскільки фавікона це маленькі зображення, кожен піксель відіграє важливу роль. Іноді після зменшення логотипу стають видні окремі пікселі, через що зображення набуває «розмитий» вид. Щоб домогтися чіткості, необхідно редагувати іконку на піксельному рівні.

Щоб уникнути цього потрібно змінити розмір логотипу за допомогою спеціальних редакторів, наприклад Photoshop або GIMP. Спочатку потрібно зменшити розмір зображення до 64х64 пікселів (це найбільший розмір фавіконки). Потім потрібно відредагувати кожен піксель за допомогою інструменту «Олівець», доки знімок не буде чітким. Це трудомісткий процес, але результат того вартий. Коли фавікон 64х64 буде готовий, потрібно виконати ту ж саму роботу з зображенням 16 × 16, 24 × 24 і 32 × 32 пікселів. Стільки розмірів потрібно, щоб зображення правильно відображалося в усіх браузерах і гаджетах:

• 64х64 - закладки браузера Safari;
• 32х32 - дисплеї з високою роздільною здатністю (РЕТІНА);
• 24х24 - закладки браузера Internet Explorer і MicroSoft Edge;
• 16х16 - Google Chrome і інші браузери.

Як зробити фавікон в Фотошопі

Для початку потрібно створити кілька полотен з вищевказаними розмірами.

Потім потрібно додати іконку, букву або інше зображення на полотно.

Як зберегти фавікон

Створивши іконки різних розмірів, збережіть кожну з них як прозорий файл PNG (24 біт). У Photoshop можна скористатися функцією «Зберегти для веб», доступною в меню «Файл». Потім необхідно об'єднати всі PNG-файли в один ICO-файл. Можна одночасно використовувати і файли PNG, і файли ICO, але нерідко навіть Safari і Chrome надають перевагу винятково формат ICO. На мій погляд, простіше створити один ICO-файл. Формат ICO не можна назвати дуже поширеним, але, на щастя, існує ряд інструментів, які допоможуть вам конвертувати ваші файли в цей формат. Для цієї мети я вважаю за краще використовувати X-Icon Editor . Це безкоштовний онлайн-сервіс, який миттєво перетворює завантажені зображення в один ICO-файл, після чого ви можете його завантажити. В цьому немає нічого складного, просто дотримуйтесь інструкції на сайті. Якщо ви вважаєте себе відчайдушним людиною, можете поекспериментувати з піксельним редактором цього сервісу і намалювати фавікон самостійно. (Хоча я вважаю за краще редагувати фавікона в більш професійному редакторі, наприклад, в Photoshop).

Завантаживши свої PNG-зображення в редактор X-Icon Editor, на виході ви отримаєте один файл формату ICO.

Як вставити фавікон на сайт

Отже, у вас вже є файл формату ICO. Тепер його необхідно додати на веб-сайт. Перейменуйте файл в favicon.ico і розмістіть його в кореневій папці вашого веб-сайту (туди, де зберігається файл index.html і інші стандартні файли). Після успішного додавання ви можете подивитися його за адресою: вашсайт .com / favicon.ico. Практично всі браузери шукають файл favicon.ico в кореневій папці. Тому важливо, щоб ви завантажили фавікон саме в цю папку. Для забезпечення сумісності з різними браузерами, краще не додавати ніякі HTML-елементи або посилання, які вказують на його місце розташування. Цей прийом працює для всіх браузерів, аж до IE6. Також, якщо у вас сайт на WordPress, то в багатьох темах фавікон можна додати в налаштуваннях теми. Цей спосіб також можна використовувати.

Як замінити фавікон

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

<Link rel = "shortcut icon" href = "вашсайт .com / favicon.ico? V = 2" />

Так браузер буде думати, що це унікальний URL, і, отже, буде змушений відображати нову іконку. Після поновлення фавікона цей HTML-код можна повністю видалити. Якщо вам потрібно буде внести зміни в фавікон, скористайтеся тим же прийомом, щоразу збільшуючи цифру після «v» у рядку запиту. Таким чином, браузер буде кожен раз сприймати цей URL як унікальний і відображати нову його версію. І не забувайте видаляти HTML-код після успішного оновлення.

Як створити більш складні фавікона

У цій статті я хотів описати універсальний і простий спосіб створення фавікона, які будуть працювати на практично будь-яких платформах. Але в веб-дизайні і розробці немає межі досконалості. Якщо ви хочете навчитися створювати складніші іконки, то можете спробувати використовувати сервіс favico.js . Він дозволяє створювати динамічні зображення з мінливими цифрами. Завдяки такій іконці, ви зможете бачити кількість непрочитаних повідомлень, навіть коли відповідна вкладка не активна. Якщо ви хочете створити анімовані фавікона онлайн, то можете спробувати використовувати генератор фавікона favicon.cc .

Більше онлайн генераторів ви можете знайти тут .

Якщо ви хочете поділитися своїми порадами зі створення фавікона або задати питання, я чекаю вас в коментарях!