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

Аналіз асоціацій

Перед тим, як створювати іконку для вашого проекту, потрібно визначити ключові слова, а потім спробувати знайти ідеальне уявлення чи метафору для них. Вам потрібно буде шукати образи та символи, які мають прямий зв'язок із потрібним ключовим словом. Так ви зможете підібрати правильні зображення для своїх ікон, які будуть інтуїтивно зрозумілі для користувача.

Дослідження конкурентів

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

Іконка Wunderlist (перша) вигідно відрізняється від іконок інших програм. Швидше за все, користувач завантажить Wunderlist і таким чином програма отримає більше установок.

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

Призначення іконки

При розробці іконки важливо врахувати, як вона використовуватиметься, та які її функції.

Наприклад, іконка мобільного додатка повинна виконувати функцію ідентифікації та виділяти її серед інших програм на смартфоні. Це стосується як списку програм вже на смартфоні, так і в магазині програм ( App Store, Google Play).

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

Унікальність та впізнаваність

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

Поменше деталей

Чим лаконічніший значок, тим легше його запам'ятати та розпізнати за будь-якого випадку. Багато дизайнерів прагнуть максимально естетичного вигляду іконки, додаючи велику кількість деталей, які не виконують жодної функції, крім прикраси та попутного засмічення інформаційного поля іконки. Це не фотографія, скрупульозна деталізація тут не потрібна. До того ж у малому розмірі дрібні деталі просто зливаються у безформну масу.

Друга іконка програми виглядає краще за рахунок простоти та мінімалізму.

Визначте пріоритетність розміру

Існує два підходи до створення ікон.

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

Потрібно кілька ікон? Створюйте сет!

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

Не шкодуйте місця

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

Різні іконки для різних платформ

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

Колір дуже важливий

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

Обходьтеся без тексту

Ефективній іконці не потрібні слова для донесення інформації про зміст. Залишіть текст для сайтів або рекламних банеріва при створенні іконки постарайтеся обійтися без нього. Чому так? Тому що при зменшенні розміру іконки текст стане нечитабельним і виглядатиме як звичайна пляма кольору.

Шукайте баланс між оригінальністю та простотою сприйняття

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

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

Не забувайте про фон

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

Елементів інтерфейсу програми немає місця на іконці

Не розміщуйте елементи інтерфейсу програми на його іконці. Це заплутує користувача і вважається поганим тоном.

Іконка має бути інформативною

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

По іконці користувач робить висновок про те, що чекає на нього всередині програми. Тому іконка має бути зрозумілою, лаконічною, мінімум об'єктів, картинка має читатися при побіжному погляді.

Ксенія Маєвська,розробник програми Пам'ятаю-Нагадаю.

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

Корисні сервіси та ресурси для створення іконки

Російськомовний онлайн сервісдля створення як окремих ікон, так і цілих наборів. Великий вибір іконок та можливостей для їх редагування.

Шрифтові іконки для використання з Twitter Bootstrap

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

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

Автоматичне створення градієнтів.

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

Посібник ,присвячене Material Design для Android

Керівництв про iOS Human Interface від Apple.

Покрокова інструкція створення іконки

Створити іконку для сайту або програми можна за допомогою графічних програмчи онлайн сервісів.

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

Одним із онлайн сервісів, який дозволяє швидко створювати сучаснііконки є IconsFlow.

Пару слів про можливості сервісу:

• Можливість експорту іконок у SVG (вектор), PNG та ICO формах;
• Великий функціонал з редагування;
• Можливість створення пакетів іконок у одному стилі;
• Безкоштовні варіанти.

Тепер перейдемо до створення іконки.

Щоб створити іконку або цілий набір, вам потрібно в онлайн-редакторі спочатку знайти потрібну іконку або відразу кілька.

Потім за допомогою інструментів редагування ви можете кастомізувати, наприклад, можна задати потрібний колір іконки, фону, додати ще одну іконку, форму, текст, домалювати новий елемент.

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

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

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

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

От і все.

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

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

Подібні сайти редактори іконок є дуже ефективними. Вони дозволяють вам:

• легко та швидко створювати нові матеріали;
• надати існуючим напрацюванням завершеного вигляду;
• зберігати результат у різних форматах(SVG, ICO і PNG);
• створювати іконки для .

У статті ми підібрали п'ять кращих онлайнових безкоштовних редакторів ікон і для порівняння спробували створити набір у кожному з них.

IconsFlow

IconsFlow.com — векторні іконки + редактор, що дозволяє створювати персоналізовані набори та експортувати їх у хорошій якості(SVG, ICO та PNG). Головною перевагою сервісу є наявність двох редакторів:

• головного, у якому вибирається палітра, стиль, ефекти;
• редактора форми, де можна змінити поточну форму або намалювати нову.

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

Вигляд векторного редактора IconsFlow:

Приклади робіт:

FlatIcons

За допомогою FlatIcons.net ви можете створити свою флет-іконку (у плоскому стилі) на основі готових шаблонів. Задавайте розміри, вибирайте малюнок та основне тло (кола, кільця, прямокутники), змінюйте колір. Цей редактор іконок безкоштовний, але має два недоліки:

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

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

Launcher Icon Generator

Проект Launcher Icon Generator безкоштовний і, як ми думаємо, більше підходить для сучасних користувачів. Даний онлайн редактор іконок дозволяє завантажувати зображення/кліпарти та додавати текст. Ви можете завантажити по одній іконці за раз у 5 розмірах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

Як базовий кліпарт використовується набір графіки в стилі Material Design з GitHub. Сервіс містить такі параметри як: відступи, форма, колір або прозорість фону, масштабування + додаткові ефекти. Результат:

Android Material Icon Generator – ще один інструмент створення флет-іконок. Фішкою сервісу безперечно є ефект у вигляді довгої тіні. Якщо вам потрібні подібні рішення, цей редактор іконок буде ідеальним варіантом.

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

Після завантаження файлу-архіву знайдете 6 PNG різного розміру і векторний файл SVG. В Illustrator іконка SVG буде розмитою, але, на щастя, вона добре виглядає у браузері. У результаті виходить щось на кшталт:

Сайт Simunity – це генератор на базі HTML5, де можна створити іконку, а потім скопіювати код, щоб відобразити її у ваших веб-проектах. Як вихідні матеріали використовуються іконки з Font Awesome, для яких вибираються різні параметри: колір, рамка, розмір і стиль тіней.

Даний сервіс стане в нагоді, якщо вам необхідно швидко створити прості оригінальні іконки для сайту. Результат застосування Simunity:

Разом. Розглянуті вище онлайн редакториіконок – чудові інструменти для оптимізації роботи дизайнерів. Немає сенсу завантажувати якісь програми, коли все можна легко та швидко робити в мережі. З цієї вибірки, мабуть, можна виділити IconsFlow. У ньому зібрано максимально велике числофункцій: галерея іконок, завантаження SVG, код для вбудовування, попередній перегляд, створення власних шаблонів, експорт PNG, ICO та SVG, адаптація розміру, модні стилі та вбудований векторний редактор. До того ж, це єдиний безкоштовний редакторіконок російською, якщо вам це важливо.

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

Favicon – це невеликий значок, що відображається поруч із назвою сайту у вікні браузера або у видачі пошуковика. Жодної функції для SEO він не несе, але його використання дозволяє підвищити впізнаваність сайту, і, як наслідок, показника CTR. Також ви можете створити ретина фавіконок. Якого розміру має бути favicon? Як правило, фавікони бувають розмірами 16x16px або 32x32px.

Який формат я отримаю favicon?

Після того як ви зробите favicon, ви отримаєте файл favicon.ico для сайту, тобто файл із розширенням *.ico. Саме його і треба буде використати надалі. Як створити favicon онлайн? Використовуйте генератор faviconонлайн на нашому сайті. Ви зможете не тільки створити фавікон з картинки, але й використовувати вбудований редактор, що дозволяє створити будь-яку іконку для сайту.

Як розмістити favicon на сайті

Потрібно завантажити favicon у кореневий каталог сайту, щоб вийшла адреса виду http://sitename.ru/favicon.ico. Це шлях до зображення. Далі потрібно помістити код у тег. Повинно вийти так:

 ...
 
 
 ...

Навіщо вказувати шлях favicon?

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

Favicon відображатиметься у пошуковій видачі?

У Google фавікони не відображаються. Яндекс має так звану індексацію фавіконів, цей процес займає від тижня до місяця.

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

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

Створення фавікон за допомогою онлайн-сервісів

Іконку, або фавікон (від англійської favorites icon) найлегше створити, використовуючи популярні безкоштовні сервіси.

Але перед тим, як зробити іконку для сайту, слід підготувати заздалегідь обране зображення. Це має бути квадратна картинка. Потрібно врахувати, що сервіс фавікон.ру стандартизує всі зображення, зменшуючи їх до розміру 16х16 пікселів. Тому якщо картинка спочатку буде не квадратною, програма може досить сильно спотворити її. Розмір файлу, що завантажується, для сервісу не повинен перевищувати 300 кілобайт.

Зробити фавікон для сайту можна за допомогою будь-якого графічного редактора. Якщо вже є готове зображення(наприклад, емблема компанії), її варто лише підготувати та зменшити. Якщо ж потрібно створити малюнок «з нуля» — сервіс «фавікон» пропонує скористатися елементарним, але досить зручною програмоюмалювання ікон.

Отже, іконка завантажена чи намальована. Щоб отримати готове зображення, достатньо натиснути кнопку «Завантажити favicon» у нижньому правому кутку сторінки. В результаті завантажиться файл favicon.ico.

Фавікон та Фотошоп

Можна створити файл, використовуючи лише Фотошоп. Підібравши або попередньо відмалювавши потрібне зображення, слід натиснути «Зберегти як» та зі списку форматів для збереження вибрати ico.

Можливо, що версія програми обробки зображень не підтримуватиме цей формат. У такому випадку слід пошукати та завантажити плагін формату ico. Його потрібно розпакувати у папку Plug-InsFileFormats. Після цих нехитрих дій можливість збереження цього розширення буде доступна.

Невелика порада.Майже всі браузери стандартизують іконки веб-сайтів до розміру 16 на 16 пікселів. Враховуючи це, не потрібно створювати високохудожні полотна — їх просто не буде видно.

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

Набір іконок

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

Але це ще не все. Для відображення іконки потрібно прописати наступний html-код:

У графі “type” важливо правильно вказати тип зображення. Тобто, якщо використовується картинка формату GIF, код виглядатиме так:

Цей код встановлюється у будь-якому місці між тегами. іголовного файлу.

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

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

Заміна іконок

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

Таким чином, щоб знайти відповідь на питання, як змінити іконку сайту, слід прочитати цей матеріал заново. 🙂

Доброго вам дня! А у вас favicon на сайті? Це важливий елемент сайту, він відображатиметься у пошуковій видачі! Про те, що це таке і як його встановити за кілька хвилин читайте у статті.

Фавікон це іконка для сайту, невід'ємний атрибут, індивідуальність вашого ресурсу. За допомогою faviсon читач вашого онлайн-проекту з легкістю визначить та знайде його у "панелі закладок" на своєму браузері або в деяких пошукових системах, наприклад, Яндекс.

У мене на Наразі favicon виглядає так:

Тепер я думаю ви зрозуміли, що це за " штуковина- Favicon. Давайте розберемо, як його зробити.

Як зробити favicon

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

Але як кажуть у приказці: "Хто шукає той завжди знайде" . І я знайшов рішення - це онлайн сервіс, який перетворює формат вашої картинки (фавікон), зазвичай це формат PNG або JPG, у формат ICO. Це сервіс image.online-convert.com.

Для того, щоб перетворити формат зображення на формат іконки ICO, потрібно натиснути на кнопку " Огляд" , вибрати картинку, встановити розмір пікселів 16×16 і натиснути на кнопку "Перетворити файл" .

Після вищезробленого, зможете завантажити файл на свій комп'ютер вже у форматі ICO.

Якщо не хочеться турбувати себе створенням фавікона, можете завантажити його на різних сервісах в Інтернеті, вже у форматі ICO. Наприклад, сервіс iconsearch.ru.Тут ви можете знайти favicon, для цього потрібно ввести в рядок " Пошук"Слово, яке несе сенс вашої фавіконки. Наприклад," Гроші- далі відобразяться всі іконки, відповідні за змістом.

З цим, я думаю, ми з вами розібралися. Тепер вже скачати favicon нам потрібно завантажити на Інтернет-ресурс, для цього можна скористатися програмами Total Commander або , а також можна завантажити через файловий менеджервашого хостингу.

Цей файлможете знайти за адресою: wp-content/themes/папка з темою, яку ви використовуєте .

Потім, коли відкриєте файл header.php, після тегу потрібно буде вставити код:

Зберігаєте зміни. Всі favicon готовий!

Ну що ж, тепер я думаю, що ви можете легко створити і встановити favicon. Бажаю Вам успіхів, будьте індивідуальні)!

P.S.

З повагою, Олександр Сергієнко