→ Favicon програма для створення. Універсальний спосіб створення фавіконів

Favicon програма для створення. Універсальний спосіб створення фавіконів

У цьому уроці розглянуто створення Favicon, ви дізнаєтеся, для чого потрібна дана іконка, отримаєте рекомендації щодо покращення її виду та привабливості.

Крім цього ми розглянемо процес створення та додавання Favicon для сайту.

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

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

Ось деякі рекомендації, які необхідно враховувати під час створення Favicon.

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

#2. Не використовуйте стандартні піктограми. Багато хто після створення сайту на тій чи іншій CMS, залишають значок , нічого, не змінюючи. В результаті у видачі пошукової системи може бути не один сайт з таким значком, а безліч. Цим ви не як не виділіть свій сайт, тому використовуйте тільки унікальні іконки Favicon створені спеціально для вашого сайту. Сюди можна віднести ситуацію, коли використовують іконки з різних колекцій або елементів інтерфейсу інших сайтів. Пам'ятайте для того, щоб виділятися вам потрібна унікальна Favicon.

#3. Намагайтеся при створенні значка використовувати яскравіші і світліші кольори, як правило, вони привертають більше уваги.

#4. Не використовуйте анімовані піктограми. По-перше, анімація підтримується не всіма браузерами, по-друге увагу відвідувача має бути зосереджено на вмісті, а не на іконці.

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

Створення заготовки Favicon у Photoshop

#1. Створіть новий документ у Photoshop розміром 64*64px, для цього пройдіть у меню "Файл" >> "Новий..." або натисніть клавіші Ctrl+N. Взагалі сам значок повинен бути 16 * 16px, але краще спочатку створювати його розміром, а потім зменшити до необхідного.

#2. У моєму випадку у мене немає якогось логотипу для сайту, тому я вирішив використовувати символ "W" з якого починається адреса сайту, а також ті кольори які переважають у верхній частині сайту це синій і жовтий. Тому я встановив значення кольору #6A91D0 і за допомогою інструмента "Заливка" (G) поставив синій колір раніше створеного документа.

#3. Після цього я вибрав інструмент "Текст" (Т), додав символ "W" і задав йому наступне значення кольору #FAC31D.

Для того, щоб символ більше виділявся на синьому тлі, я додав йому обведення чорним кольором і розміром 2px. Для цього необхідно пройти до пункту меню "Шар" >> "Стиль шару" >> "Обведення", вибрати колір та розмір обведення.

Після цього необхідно об'єднати шари, для цього необхідно пройти до пункту меню "Шар" >> "Об'єднати видимі"або натиснути клавіші Shift + Ctrl + E.

Щоб лінії були плавні без засічок я додав розмиття. Для цього необхідно пройти до пункту меню "Фільтр" >> "Розмиття" >> "Розмиття за Гаусом..."та встановити радіус 0,3 пікселя.

Свій символ або зображення розміщуйте так, щоб воно зайняло максимум простору, тому що якщо він буде маленького розміру, то при розмірі 16*16 воно не буде помітне.

#4. Тепер потрібно змінити розмір піктограми. Для цього потрібно пройти у меню "Зображення" >> "Розмір зображення"та встановити розмір 16*16px.

#5. Залишилося зберегти значок. Favicon значок повинен мати ім'я favicon і розширення.ico. Справа в тому, що за замовчуванням Photoshop не зберігає зображення у форматі.ico. Тому збережіть його у форматі.png, для цього пройдіть в пункт меню "Файл" >> "Зберегти як..." і зі списку виберіть PNG.

Конвертування зображення у формат.ICO

Після цього ми конвертуємо його у формат.ico за допомогою сервісу. Зайдіть на даний сервіс і за допомогою кнопки "Огляд" виберіть раніше збережений файл у форматі PNG після чого натисніть кнопку "Створити favicon.ico".

Після цього на сторінці з'явиться посилання "Завантажити favicon.ico!" Клікнувши по якій можна зберегти готову іконку Favicon на комп'ютер.

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

Але в кожну сторінку ці рядки необхідно додавати, якщо у вас сайт на HTML. Але оскільки, швидше за все, ваш сайт створений на базі, якийсь CMS, то вам буде достатньо додати ці рядки в головний файл вашої теми, яку ви використовуєте для сайту.

Якщо ви використовуєте WordPress то пройдіть в папку wp-content/themes/папка-з-вашою-темою/ знайдіть в ній і відкрийте файл header.php, а потім вставте необхідні рядки і збережіть файл.

Якщо ви використовуєте Joomla, то пройдіть в папку templates/папка-з-вашою-темою/ і відкрийте файл index.php вставте необхідні рядки і збережіть.

У деяких темах WordPress і Joomla вже можуть бути прописані свої шляхи до файлу favicon.ico в такому випадку видаліть їх і замініть на свої.

Якщо ви використовуєте якусь іншу CMS то все робіть за аналогією.

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

Матеріал підготовлений проектом:

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

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

  • легко та швидко створювати нові матеріали;
  • надати існуючим напрацюванням завершеного вигляду;
  • зберігати результат у різних форматах (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, адаптація розміру, модні стилі та вбудований векторний редактор. До того ж це єдиний безкоштовний редактор іконок російською, якщо це важливо.

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

Вітаю вас, дорогі відвідувачі мого блогу. Сьогодні я підготував для вас вибірку з 10 сервісів, які допоможуть вам зробити фавікон онлайн. А також наприкінці статті я виділив 5 найзручніших сайтів, на мою думку.

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

Ця маленька картинка насамперед ваш бренд. Люди дізнаватимуться по ній ваш сайт. Тому вона повинна бути оригінальною і незабутньою, щоб у пошуку Яндекса була відразу видно. Самостійно складно намалювати таку маленьку іконку і на допомогу приходять онлайн-сервіси, які допоможуть зробити фавіконку з картинки. Давайте по порядку розглянемо деякі з них і виявимо їх сильні та слабкі сторони.


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


    • Є можливість створити з картинки чи намалювати самому.
    • Після генерації показується приклад посилання для додавання сайту.
    • Усі англійською мовою.
    • Негарний дизайн.
    • Неможливо обрізати картинку під час створення.

  2. 3 www.Chami.com


    • Гарний зручний інтерфейс.
    • Можна зробити фавіконку з картинки або намалювати самому.
    • Велика палітра кольорів для малювання.
    • Немає попереднього перегляду.
    • Усі англійською мовою.
    • Немає галереї готові іконки.


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


    • Зручний гарний інтерфейс.
    • Нічого зайвого.
    • Є можливість намалювати самому або згенерувати з картинки.
    • Є галерея готових іконок.
    • Ви можете зберегти розмір іконки під час створення або стиснути її.
    • Попередній перегляд.
    • Можна зробити анімовану іконку.
    • Величезна кількість кольорів для малювання.
    • Усі англійською мовою.


    • Є вибір розміру іконок 16×16 та 32×32.
    • Немає додаткових функцій, тільки створення фавікона з картинки.
    • Немає попереднього перегляду.


    • Попередній перегляд.
    • Велика колекція готові іконки.
    • Є можливість обрізати картинку.
    • Усі англійською мовою.
    • Існують помилки на сайті.
    • Незручний інтерфейс.


    • Можна вибрати розмір іконки 16×16, 32×32, 48×48 та 64×64.
    • Усі англійською мовою.


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

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

А зараз, як і обіцяв, ТОП-5 зручних та якісних сервісів, на мій погляд.

Це моя п'ятірка найкращих. Хочу з'ясувати, який сервіс ви поставите на перше місце, а який на останнє? Радий почути відповіді в коментарях.

P.S. Якщо ви ще не придумали для себе фавікон, обов'язково загляньте на сайт Faviconka.ru. На ньому ви знайдете більше 2000 готових іконок на будь-який смак. Сподіваюся, стаття вам була корисною, і ви знайшли свій сервіс, щоб зробити фавікон онлайн.

Дуже важливим елементом дизайну є фавікон – невелике зображення (16х16 пікселів). Маленькі розміри – але величезний ефект! Ця стаття присвячена тому, як створити фавікон (favicon.ico) для сайту онлайн за допомогою спеціальних сервісів. Ви докладніше ознайомитеся з тим, що це за іконка фавікон, для чого вона використовується, які у неї функції, як додати її на блог і створити в режимі online. Також ви дізнаєтесь, де скачати колекцію готових favicon ico для сайту.

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

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

Favicon – скорочення із двох слів (англ. FAVorites ICON), що перекладається, як іконка (дуже маленьке зображення) для «Вибраного». Вибране– так називають закладки в браузері Internet Explorer. Зовнішній вигляд favicon приблизно такий:

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

Отже, favicon - це невелике зображення розміром 16×16 px, з розширенням.ico (розширення ікон). Т.к. іконка набула широкої популярності, вона є практично у кожного сайту, а це ще один привід, щоб створити фавікон для сайту онлайн. При цьому не важливо, що за хостинг ви використовуєте, на якому движку працює ваш блог - у будь-якому випадку ви зможете створити в режимі online, а потім встановити favicon або завантажити готовий фавікон для сайту. Завдяки сучасним генераторам іконок, їхнє створення не займає багато часу – одна-дві хвилини, і все готове.

У вас ще немає фавіконки? Виправляйтеся швидше!

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

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

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

  • Наберіть ваш сайт у вікні пошуку Яндекс, і ви побачите, чи є поруч із ним favicon.
  • Наберіть у браузері посилання http://favicon.yandex.net/favicon/ site.ruде замініть site.ru на адресу вашого сайту. Якщо фава проіндексована, ви зможете її побачити.
  • Зайдіть в панель Яндекс.Вебмайстер, там теж відображається фавікон.

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

2. Online генератори та колекції favicon

Тепер ми знаємо, що таке фавікон, і навіщо вона потрібна сайту. Запам'ятали, що її розмір у пікселях має бути строго рівним 16 на 16, а розширення – тільки. Тепер дізнаємося, як зробити таке міні-лого:

  1. Завантажити готову фаву з галереї.
  2. Створити самому за допомогою генератора фавікон.
  3. Зробити з готового зображення (знову ж таки за допомогою favicon generator'а)

2.1 Колекції та галереї фавікон

  1. http://www.thefavicongallery.com/ - хоч і невелика колекція, але корисна. Тут ви знайдете іконки на різні тематики. Усього їх близько 300 штук. Для того, щоб скачати favicon ico для сайту, натисніть на неї правою кнопкою миші і збережіть на свій комп'ютер.
  2. http://www.iconj.com/favicon-gallery-page1.html — ще одна колекція favicon для сайту, яка містить понад 3 тисячі міні-картинок. Зберегти вподобану можна у двох форматах (ico або gif). Але є й недолік: ви можете переглядати лише 30 іконок, щоб побачити наступні, потрібно перейти на нову сторінку.
  3. http://www.favicon.cc/?action=icon_list&order_by_rating=1 – завдяки цій галереї, вам не доведеться самому онлайн створювати фавікон. Просто виберіть і скачайте картинку, що сподобалася. Знову ж таки, за раз можна переглядати 20 фавікон, що уповільнює процес вибору.
  4. http://www.favicon.co.uk/gallery.php - цей сайт дозволяє не тільки робити фавікон для сайту, але і завантажувати готові варіанти. За раз ви можете переглядати по 144 іконки, що набагато зручніше, ніж у попередніх двох варіантах. Фави на різні теми.
  5. http://favicon-generator.org/gallery/ - хоч і маленька, але корисна колекція з 84 штук фавіконок. Вибирайте будь-яку!

2.2 Як зробити Фавікон для сайту з нуля

Звичайно, ви можете завантажити для свого сайту і готову фаву, але набагато краще зробити власну своїми руками. У цій справі нам допоможуть так звані Favicon Generators (генератори фав), які дають змогу в режимі онлайн створювати гарні міні-картинки.

2.2.1 Logaster.ru

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

Завантажити файли фавікон можна у форматах ICO або PNG.
Детальніше, як створити фавікон за допомогою Логастер можна прочитати

Окрім фавікона, сервіс також створює логотипи, візитки, конверти та бланки.

2.2.2 Favicon.cc – генератор фавіконок

Цей нехитрий генератор – один із найпростіших і найпопулярніших, що використовуються для online створення favicon для сайту. Ви зможете намалювати кожен піксель майбутньої фави (всього їх 256). Перейшовши на сайт, вам стане доступним робоче вікно, в якому ви можете експериментувати.

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

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

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

Зображення можна буде переміщати та рухати по робочій області, для чого використовуйте пункт move.

Щоб скачати фавікон, який ви робили для сайту, натисніть на посилання Download Favicon (виділена червоним).

2.2.3. Генератор Amichurin.Appspot.com

Ще один Generator красивих favicon, у якому в режимі online можна створити гарну картинку. Весь генератор російською, але його функціонал буде простіше, ніж у попередньому випадку. До речі, підписи, зроблені червоним кольором, – не мої.

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

2.2.4 Генератор Favicon-Generator.org

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


2.3 Favicon із готового зображення

Якщо ви не хочете створювати фавікон за допомогою онлайн генераторів з нуля, а галереї та колекції favicon ico для сайту вам не підходять, спробуйте зробити міні-картинку з готового зображення. Можна навіть використовувати вашу фотографію. Створюються такі картинки теж у режимі online за допомогою спеціальних генераторів favicon.

Заздалегідь підготуйте картинку, яку хочете взяти як основу.

2.3.1 Сервіс Favicon.ru

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

Додати картинку або фотку (основу) ви можете так:

  • Натисніть на кнопку " виберіть файл» та завантажте потрібну фотографію.
  • Введіть у біле поле URL-адресу картинки (це робіть у тому випадку, якщо файл зберігається не на вашому комп'ютері, а в інтернеті).

Після того, як картинка додасться, натисніть « Створитиfavicon.ico!»та трохи зачекайте, генератор сформує іконку. Після цього завантажте зображення на комп'ютер. До речі, крім генератора на цьому сайті є і велика колекція favicon ico для вашого сайту.

2.3.2 Сервіс Favicon.cc

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

Тепер натисніть «Виберіть файл» і додайте файл, що завантажується. На його основі буде створено favicon ico для вашого сайту. До речі, вам може знадобитися функція розтягування зображення:

  • Keep dimensions – при зменшенні співвідношення сторін картинки залишаться такими ж
  • Shrink to square icon – сторони зображення будуть приведені до квадратного вигляду (малюнок може спотворитися).

Завантаживши файл, ви зможете відредагувати його в режимі online за допомогою генератора favicon. Коли результат, що вийшов, вас буде влаштовувати, завантажуйте фаву на свій комп'ютер.

3. Як додати favicon на блог WordPress

З тим, звідки можна завантажити готовий favicon для сайту або як зробити свій власний – ми розібралися. Тепер обговоримо, як додати фаву на блог Вордпрес.

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

Додається favicon.ico у два кроки.

КРОК ПЕРШИЙ

Насамперед вам потрібно знайти у вашій темі той рядок коду, який відповідає за виведення фавікона. Відкрийте для редагування файл Заголовок (header.php) і знайдіть такий (або схожий) рядок:

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

КРОК ДРУГИЙ

Тепер потрібно додати саму фавікон на ваш хостинг, саме в кореневу папку сайту (інакше, вона не відображатиметься). Заходьте на хостинг та закачуйте фаву в корінь сайту (ім'я файлу обов'язково favicon.ico, розміри обов'язково 16×16 пікселів).
Ось і все, скоро фавіконку проіндексують пошукові системи і вона буде красуватися в результатах видачі Яндекса. А ваш сайт матиме власну favicon.

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

Сьогодні хочу познайомити вас із сервісами зі створення фавікону для вашого сайту. Favicon – це скорочення англійських слів favorite та icon. Це зображення розміром 16 на 16 пікселів, яке зветься favicon і має розширення ico . Вона міститься в кореневу папку вашого сайту на хостингу. При завантаженні сайту браузер автоматично шукає цей файл, потім додає його в адресний рядок перед URL-адресою сторінки та в закладки, присвоюючи його вашому сайту. Ніякої практичної користі іконка веб-сайту не несе і служить тільки для його впізнавання.

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

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

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

Чи потрібно створити favicon для сайту? Розглянемо сервіси для створення фавікон онлайн

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

Наступний сервіс, який простий у використанні – . Робота в ньому приблизно схожа на попередній аналог. Єдине, що він англомовний і тут більше за рекламу. Але в цілому, дії щодо генерації досить схожі. Завантажуєте зображення, дивіться, редагуєте та зберігаєте.

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

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

Можна було б звичайно використовувати для створення іконки всіма улюбленим фотошопом. Але він не зберігає картинки з розширенням ico. Вірніше зберігає, але для цього необхідно розпакувати спеціальний плагін – icoformat.8bi встановити його в папку Plug-Ins\File Formats у папці Фотошоп. Це дозволить зберігати файли з потрібним розширенням. На мене, так це досить клопітно.

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

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

Як зробити так, щоб іконка стала фавіконом для сайту?

Необхідні такі кроки:

1 Переконайтеся, що файл називається .

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

3 Для цього беремо файл нашої теми header.php (можна його редагувати в адміністраторській панелі безпосередньо в WordPress, а можна завантажити його з сервера), відкриваємо його та прописуємо перед закриваючим тегомнаступний код:

/favicon.ico"/>

/favicon.ico"/>

4 Зберігаємо файл та переносимо назад на хостинг.

5 Чистимо кеш поточного браузера та все. Здобули результат.

До речі, не обов'язково, щоб фавікон розташовувався докорінно. Атрибут href ставить безпосередньо шлях до нього. Виходить так:

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

Тобто змінюємо type з image/x-icon на image/png або gif.

До речі, можна додати ще дещо. Ми створили та поставили фавікончик для сайту, а в адміністраторській панелі WordPress, залишився стояти за замовчуванням стандартний фавікончик. Щоб він змінився взагалі скрізь, потрібно у файл нашої теми function.php , вставити наступний код:

function sp_set_favicon() ( echo " add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");

function sp_set_favicon() (

echo ".get_bloginfo ("template_url") />

" ;

add_action ("admin_head", "sp_set_favicon");

add_action ("login_head", "sp_set_favicon");

add_action ("wp_head", "sp_set_favicon");

Тепер він відобразиться у всіх заголовках.

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

Дивіться відео, як створити favicon.ico та розмістити його на хостингу:

 

 
Це цікаво: