Як створити фавікон для веб-сайту - поради і сервіси

1. Що таке фавікон і навіщо він потрібен
2. Створення дизайну фавікона
3. Розмір фавікона
4. формати фавікона
5. Створити фавікон онлайн - інструменти та онлайн сервіси
6. Logotizer
7. RealFaviconGenerator.net
8. Favicon.by
9. Як додати фавікон на сайт
10. Як додати фавікон на WordPress і інші платформи
11. Як створити більш складні фавікона

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

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

У цій статті ви дізнаєтеся, як зробити фавікон - ми дамо поради по дизайну і розповімо про сервіси для створення фавікона, і як додати фавікон на сайт.

Що таке фавікон і навіщо він потрібен

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

клікніть тут , Щоб збільшити картинку.

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

По-друге, фавікон виділяє ваш сайт серед інших веб-ресурсів в списку пошукової видачі. Сайт без цієї міні-іконки буде блякло виглядати і програвати конкурентам. Одним словом, фавікон - це просто "must have" для сайтів.

По-третє, фавікон дозволяє користувачеві швидше знаходити ваш сайт в каталозі закладок або інших іконок на робочому столі.

Створення дизайну фавікона

Фавікон повинен відобразити суть вашого сайту і бренду в крихітному знаку розміром з смайлик. Хорошим рішенням стане спрощений варіант логотипу компанії, але врахуйте: повноцінний логотип з текстом і товарними знаками для цієї мети не підходить.

Ці веб-сайти використовують графічний знак свого бренду (або, принаймні, щось схоже на нього).

Не використовуйте текст

Слід відмовитися від використання тексту, тому що через невеликого розміру фавікона написи будуть нечитабельним. Помістіть на іконку 1, максимум 2 букви - наприклад, перші в назві вашої компанії або веб-ресурсу; в цьому випадку їх ще можна буде розрізнити.

пикселизация фавікона

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

Це фрагмент повнорозмірного логотипу Facebook після його зменшення до розміру 32 × 32. Легко помітити, що по краях зображення «пливе». Щоб уникнути такого дефекту, слід провести редагування на піксельному рівні.
При роботі з іконками я воліють використовувати програми для редагування растрових зображень (наприклад, Photoshop або Pixelmator). Спочатку я зменшую повнорозмірний логотип до розміру 64 × 64 пікселя, оскільки це найбільший фавікон, який мені знадобиться. Праця дуже копіткий, може зайняти цілу годину, а то й два, але зате результат виходить просто відмінний.
Якщо у вас немає часу і навиків в подібних операціях, краще використовувати онлайн сервіси, такі як Logotizer.ru

Розмір фавікона

Отримавши іконку розміром 64 × 64, я точно так же створюю іконки розміром 32 × 32, 24 × 24 і 16 × 16 пікселів. У кожної з них своє призначення:

- 64 × 64 - "Список для читання" в Safari і Windows
- 24 × 24 - Закріплені сайти в IE9.
- 32 × 32 - Для екранів з високою роздільною здатністю.
- 16 × 16 - Зазвичай використовується в таких браузерах, як IE, Safari, Chrome і т.д.

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

формати фавікона

Раніше, коли підтримувалися тільки файли формату Windows ICO, ми могли заощадити час, зберігши фавікон розміром 16 × 16 в форматі GIF і давши йому розширення .ico. Такий прийом працював безвідмовно! Але тепер в цьому методі немає необхідності, оскільки інструменти для створення файлів ICO можна легко знайти в Інтернеті. Більш того, зараз для фавікона використовуються і інші формати , Але найпоширенішими все ж є тільки такі два.

ICO

Пальма першості належить формату ICO. На відміну від файлів PNG, файли ICO можуть мати різний дозвіл і бітову глибину (що відмінно підходить для Windows). Браузер Internet Explorer використовує фавікона різних розмірів (наприклад, 32-піксельні іконки для панелі завдань Windows 7), і тому в даному випадку формат ICO є єдиним варіантом.

PNG

Файли PNG відрізняються великою зручністю, оскільки для їх створення не потрібні ніякі спеціальні інструменти. Цей формат підтримує альфа-канал і дозволяє створювати файли самих маленьких розмірів. Мабуть, єдиний недолік формату PNG полягає в тому, що він не підтримується в браузері Internet Explorer.

Є й інші варіанти:

- Формати GIF і анімований GIF не мають ніяких переваг, крім сумісності з дуже старими браузерами.
- Формат JPG використовувати не рекомендується, навіть якщо зображення представлено у вигляді фотографії. Цьому формату бракує чіткості PNG, а єдина перевага полягає в більш плавних переходах між квітами - нюанс, який на дуже маленькому зображенні зовсім непомітний.
- SVG міг би стати відмінним варіантом, якби більше браузерів підтримували фавікона цього формату. Поки ж є сумісність тільки з Opera.
- Також існує так званий "підформатів" PNG - APNG (анімований PNG), який підтримується в Firefox і Opera. Однак доцільність його використання залишається під питанням. Анімований фавікон може відволікати увагу і навіть дратувати користувача.

Створити фавікон онлайн - інструменти та онлайн сервіси

Ми вибрали для вас найкорисніші сервіси, які допоможуть створити фавікон онлайн.

Logotizer

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

Як створити фавікон за допомогою онлайн генератора Logotizer

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

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

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

Нижче блоку "Форма" розташована колекція фігур (символів). Їх не так багато, шкода, що не можна завантажувати свої варіанти; але вибір все одно досить цікавий.

Міняйте колір, розмір, розташування фігур! Одним словом, експериментуйте, благо, сервіс дозволяє це зробити.

Після того як фігура вибрана, можна додавати свій текст. Як я писав раніше, краще використовувати 1 або 2 літери, не більше.

Є великий вибір шрифтів. Це однозначно плюс. Як і у випадку з фігурами, ви можете змінювати колір, розмір, розташування тексту.

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

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

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

Після оплати користувач отримує відразу 10 фавіконок різних розмірів під всі необхідні на сьогоднішній день пристрої (Аpple touch icon, Microsoft Application Icons і інші).

Сам файл favicon.ico є мультіразмерним і містить в собі іконки 4 розмірів в 1 файлі (16px, 24px, 32px, 64px). Відповідно, якщо додати сайт в закладки браузера або відкрити історію - можна буде спостерігати іконки різного розміру, але відображатися вони будуть чітко і без розмиття.

В цілому сервіс хороший. Простий, зручний, нічого зайвого.

RealFaviconGenerator.net

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

Favicon.by

Favicon.by - ще один безкоштовний і простий у використанні генератор фавікона, який конвертує файли PNG, JPG і GIF в формат .ico. Завантажте зображення з вашого комп'ютера, виберіть розмір (16x16px або 32x32px) і натисніть на кнопку "Створити". Щоб зберегти отриманий фавікон на своєму сайті, дотримуйтесь вказівок.

Також сервіс дає можливість намалювати лого по пікселям, але, якщо чесно, це під силу не кожному. Ось, наприклад, я - не зміг. Ось такий я криворукий :)

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

Додати фавікон на сайт можна, зробивши кілька правок в HTML - коді сторінки сайту.

Крок 1: Завантажте файл "favicon.ico" на свій хостинговий сервер.

Для цього треба зайти в свій FTP-сервер за цим посиланням:
ftp: //[email protected]
Введіть свої ім'я користувача та пароль. Їх можна отримати в панелі адміністратора вашої хостингу компанії.
Завантажте файли з фавікона в кореневій каталог. Кореневої каталог зазвичай називається "public_html" або "www".

Крок 2: Додайте фавікон в HTML.

Тримаючи вікно FTP-сервера відкритим, скачайте файл "index.html" або "header.php".
Потім вам потрібно завантажити код. Завантаження код залежить від вашого веб-сайту.
Якщо ваш сайт на HTML, знайдіть область HEAD в файлі index.html і вставте наступний код:

<Link rel = "shortcut icon" type = "image / x-icon» href = "http://yourwebsite.com/favicon.ico» />

Якщо ваш сайт на WordPress, знайдіть область HEAD в файлі header.php і вставте наступний код:

<Link rel = "shortcut icon" type = "image / x-icon» href = "<? Php bloginfo ( 'url')?> / Favicon.ico» />

За допомогою цих кодів браузери зможуть знайти ваші фавікона.
Отже, ви встановили свій фавікон!

Як додати фавікон на WordPress і інші платформи

Якщо ваш ресурс базується на WordPress або інший CMS, то додати фавікон на сайт дуже просто. В цілому алгоритм додавання фавікона для різних платформ буде однаковим.
1. Вам потрібно зайти в консоль сайту.
2. Знайти розділ "Дизайн" або "Зовнішній вигляд".

3. Зайти в розділ "Налаштування теми" і знайти там "фавікона".

4. Завантажити фавікон з вашого комп'ютера.

5. Зберегти та оновити сторінку.

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

У цій статті розглянуті прості і швидкі способи створення фавікона, сумісних з практичним будь-якими браузерами та операційними системами. Але коли справа стосується веб-дизайну і розробки, межі досконалості немає. Якщо ви хочете навчитися робити більш складні фавікона, тач-іконки для головних екранів iOS, іконки для інтерфейсу Metro в Windows, іконки для Google TV і багато іншого, я рекомендую вам ознайомитися з цими матеріалами: favicon cheat sheet . Там зібрана повна інформація по темі і наведені хороші джерела. Це відмінний варіант для тих дизайнерів і розробників (включно зі мною), хто постійно прагнуть розширювати свої знання.

За допомогою Favico.js ви можете створювати динамічні фавікона з цифрами.

Також вам може знадобитися динамічний фавікон, який має значок зі змінною цифрою. Для створення таких фавікона я раджу скористатися сервісом favico.js , Доступним на Github. Поки динамічні фавікона сумісні не з усіма браузерами. Але для тих браузерів, які їх підтримують, ці іконки можуть стати цікавим і корисним доповненням.

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