Програма для створення favicon. Універсальний спосіб створення фавіконів. Як відбувається процес створення іконки у Логастері

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

Що таке favicon?

Поняття фавікон досить просте та утворене від двох слів на латиниці (власне, як і все в інтернеті) – favorites icon. Це, у свою чергу, можна перекласти як значок або значок. Сенс може бути таким; улюблена іконка чи обрана. Чому така назва? Так все просто, favorites - це просто назва закладок у браузері, відповідно назву можна трактувати як картинка для закладки або вкладки браузера. Адже ви не могли не помітити, що при відкритті сайту або додаванні його в закладки, ми бачимо не тільки його назву, але і картинку, яка і називається фавіконом. Сподіваюся, зміг пояснити, що то за звір такий?

Навіщо може знадобитися фавікон?

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

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

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

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

Відмінності звичайних зображень від іконок невеликі, але є. Картинка має бути простою (складні графічні елементи складно буде побачити), розміром 16×16 пікселів та обов'язково у форматі ico. Можна звичайно використовувати і формати png або gif, але такі зображення будуть відображатися не у всіх браузерах, тому найкращий варіант використовувати формат ico.

Розповідати кожен крок про те, як зробити цей значок, я не бачу сенсу, тому що з цим впорається кожен. Головне враховуйте вимоги до зображень і все вийде. Якщо коротко, то скачайте чи намалюйте зображення і зробіть за допомогою онлайн-генераторів, фавікон. Онлайн-генератори можна знайти, набравши в пошуку Google або Яндекс — favicon. Або ось посилання на сервіс, за допомогою якого ви зможете намалювати з нуля або зробити з готового зображення фавікон: http://favicon.ru/

Як підключити фавікон до сайту?

Добре, значок готовий, як тепер зробити, щоб браузери почали показувати favicon для сайту?

Після використання сервісу завантажте готову іконку для свого блогу на комп'ютер. І завантажте картинку, за допомогою ftp-клієнта в кореневу папку блогу (public_html/site/ваш_файл_у_форматі_ico) або в будь-яку іншу. Але найкраще в кореневу папку просто так простіше, при складанні шляху до файлу.

Отже, файл завантажено, що далі? Тепер можна перевірити, якщо ви сумніваєтеся, що файл завантажений в кореневу папку: ваш_site/favicon.ico. Якщо файл завантажено до кореневої папки, то він відобразиться на цю адресу. Далі потрібно прописати для кожної сторінки ресурсу між тегами інаступний код:

А якщо значок в іншій папці, то має бути так:

Цей код вважається загальноприйнятим для багатьох інтернет-ресурсів і працюватиме на будь-якому движку. Але можна для різних двигунів, прописати його по-різному. Наприклад, для wordpress, цей код буде виглядати так:

/favicon.ico" />

У цьому варіанті значок повинен знаходитися в папці з шаблоном. Наприклад (public_html/site/wp-content/themes/ваша-тема/favicon.ico).

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

На цьому все. Якщо, що не зрозуміло – питайте – розберемося. До нових зустрічей!

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

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

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

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

Як створити Favicon онлайн і де можна завантажити їхню колекцію

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

1. Faviсon.cc- Досить-таки зручний онлайн-генератор фавіконів. Використовуючи його, ви можете, наприклад, створити свою іконку з нуля (повний ексклюзив), намалювавши її попіксельно. Для цього вам потрібно буде натиснути у лівій частині вікна сервісу кнопку «Create New Favcon».

   

   У центрі сторінки генератора розташована область, де кожен квадратик є пікселем вашої майбутньої фавіконки. Ваше завдання полягає у зафарбовуванні різними кольорами цих квадратиків. Для зафарбовування одного квадратика кольором потрібно поставити галочку в правій частині вікна сервісу в полі Color Picker, вибрати на розташованій там же палітрі потрібний колір і клацнути по потрібному квадратику. Щоб видалити неправильне забарвлення, поставте галочку в поле «transparent» і клацніть по квадратику, внаслідок чого він стане безбарвним (прозорим).

   Для переміщення пікселя по холсту генератора вам потрібно буде поставити галочку в поле «move». Результати своїх праць у реальному масштабі ви зможете спостерігати в області «Preview» під полотном. Якщо створений вами Фавікон вам підходить, натисніть кнопку «Download» для його збереження до себе на комп'ютер. В результаті ви отримаєте графічний файл, який зможете завантажити і завантажити на сервер хостингу.

   Тепер ви знаєте, як зробити міні-логотип для свого сайту з нуля. Але якщо ви не маєте графічних талантів, то можете на сервіс онлайн генератора завантажити будь-яку картинку для майбутнього фавікона, яка служитиме болванкою. Картинка може бути абсолютно будь-якого розміру та формату. Для завантаження файлу значка на онлайн-сервіс вам потрібно буде натиснути в лівій частині вікна сервісу на кнопку «Import Image».

   

   У вікні, натиснувши на кнопку «Огляд», знайдіть на своєму комп'ютері відповідне зображення. Потім виберіть, що робити із співвідношенням сторін вашої картинки при перетворенні його у формат 16 на 16 (квадрат). Це актуально, якщо зображення, що завантажується вами, не квадратне. В цьому випадку можливі два варіанти: залишити співвідношення сторін незмінним (Keep dimensions), або перетворити картинку до квадратного вигляду (Shrink to square icon). У другому випадку зображення майбутньої фавіконки буде спотворене однією з осей.

   Для завантаження в online generator і перетворення вашого зображення потрібно буде натиснути на кнопку «Upload». Створена з нього Favicon.ico буде доступна до редагування так само, як і намальована вами. Коли закінчите чаклувати над шедевром, натисніть кнопку «Download» для того, щоб скачати його до себе на комп'ютер.

   На цьому онлайн сервісі також є можливість використовувати колекції фавіконів, створені іншими користувачами та викладені в загальний доступ. Для того, щоб подивитися наявні в галереї експонати, вам потрібно буде натиснути в лівій частині вікна або кнопку «Latest Favicons» для перегляду колекцій відсортованих за датою створення, або кнопку «Top Rated Favicons» для перегляду галерей відсортованих за рейтингом.

2. Favicon.ru— колись цей сервіс був значно простішим за описаний вище онлайн генератор, але останнім часом він став практично його аналогом, але тільки російською мовою. Favicon.ru дозволяє не тільки перетворювати будь-яке зображення (на комп'ютері або в інтернеті) у формат ICO з розміром 16 на 16 пікселів, але й дає можливість намалювати його з нуля попіксельно.

   

   Цей варіант online favicon generator примітний, мабуть, лише тим, що вітчизняний. Тому він і потрапив до цієї статті. Отже, для роботи з ним вам потрібно на головній сторінці вгорі натиснути кнопку «Виберіть файл» і вказати шлях до потрібного зображення на вашому комп'ютері. Завантажене та перетворене на формат Favicon.ico зображення можна буде підкоригувати, а потім зберегти до себе на комп'ютер. Все просто та зручно.

3. Logaster.ru— це онлайн генератор логотипів, але, крім логотипів, він ще створює і фавікон. На відміну від інших сервісів, вам не потрібно малювати дизайн фавікона або конвертувати її з логотипу.

   

   Для того, щоб створити фавікон, спочатку необхідно ввести назву сайту або компанії та вибрати вид діяльності. Сервіс запропонує готові до використання кілька десятків шаблонів фавікон. Докладніше, як створити фавікон, можна прочитати . Після створення Favicon.ico, ви можете завантажити файл на комп'ютер у форматі ICO або PNG.

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

Підбірка онлайн генераторів, колекції та галереї фавіконів

Якщо вам з якихось причин не сподобалися описані вище favicon generator, то можу запропонувати спробувати щастя на одному з наступних безкоштовних онлайн-сервісів:

1. FaviconGenerator — дозволяє перетворити на потрібний формат фавікон будь-яке завантажене з вашого комп'ютера зображення (завантажувати можна картинки).
2. AntiFavicon – досить цікавий Favicon Generator. На ньому ви можете створити фавікон із написом. Текст напису вам потрібно буде ввести в поля "Top text" і "Bottom tex", а колірну гаму - налаштувати в області "Colors".
3. FavIcon from Pics – ще один простий онлайн сервіс – вказуєте шлях до картинки на своєму комп'ютері, перетворюєте та завантажуєте результуючий файл у форматі ICO та GIF.
4. Iconj - примітно те, що створену іконку ви можете або завантажити, або залишити на сервісі і отримати на цей файл посилання
5. DeGraeve - досить потужний Favicon Generator, по функціоналу схожий на розглянутий раніше Faviсon.cc. Тут також можна зробити все або з нуля, або завантажити зображення, яке можна підкоригувати і завантажити вже у форматі ICO відповідного розміру.
6. Generator дозволяє як генерувати фавікон із завантаженого зображення, так і створити її з нуля в спеціальному редакторі.
7. Онлайн редактор іконок favicon.ico — ну як би все при ньому — і створення фавіконів з нуля, і доопрацювання вже наявного зображення.
8. Online Favicon – дуже функціональний інструмент для створення та редагування міні-логотипів
9. Free Favicon Generator — на випадок, якщо нічого з запропонованого списку вас не влаштує.
10. Фавікон-генератор - простенько і зі смаком.

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

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

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

1. Iconj – досить велика колекція значків, розроблених іншими людьми та викладених у спільний доступ
2. Favicon.cc - 55 тисяч різних варіантів на всі випадки життя. Є також анімовані фавікони, які правда будуть видні лише у браузері FireFox
3. The Favicon Gallery — ще трохи підходящих за розміром іконок

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

Як встановити Favicon на сайт та прописати шлях до нього

Ваш браузер та пошуковий робот Яндекса будуть шукати фавікон насамперед у кореневій папці вашого сайту. Тому можна просто підключитися до сайту FTP і завантажити в його кореневу директорію (зазвичай це папки public_htm або htdocs) ваш файлик Favicon.ico (краще його назву писати з маленької літери). Відкрийте тепер ваш ресурс у якомусь браузері та подивіться, чи не змінилася піктограма на вкладці. Змінилася? Ні? Ну нічого страшного.

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

Відкрийте вихідний код будь-якої сторінки вашого сайту. Щоб переглянути її вихідний код, достатньо буде клацнути правою кнопкою миші по сторінці і вибрати відповідний пункт контекстного меню (наприклад, «Вихідний код» у старій Opera, або «Вихідний код сторінки» в Мазила Фаєрфокс, або «Перегляд коду сторінки» в Google Chrome , або «Перегляд HTML-коду» в IE) або натиснути клавіші Ctrl+U. Тепер пошукайте у верхній частині коду сторінки рядок, що задає шлях favicon.ico.

Вона може виглядати приблизно так:

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

У Joomla Favicon зазвичай живе в папці з використовуваним вами шаблоном (шлях до неї в Joomla 1.5 прописувався у файлі index.php з каталогу цього ж шаблону, а в Joomla 3 все стало дещо складніше). Тобто. для зміни фавікона в Джумлі достатньо буде пройти цим шляхом і залити туди свій файлик favicon.ico, а на питання про заміну відповісти ствердно:

/templates/папка_з_використовуваним_шаблоном_оформлення/favicon.ico

Файлик favicon в WordPressза замовчуванням теж може лежати в папці з темою, що використовується вами (там же і задається шлях до нього):

/wp-content/themes/Папка_з_використовуваною_вами_темою_оформлення/favicon.ico

Загалом, якщо хочете задати або змінити шлях до вашого фавікона, який зрозуміли б і браузери, і пошуковий робот Яндекса, то вам потрібно буде прописати у відповідному файлі шаблону Joomla, WordPress або будь-якого іншого движка, між тегами, що відкривають і закривають HEAD, Наступні рядки коду:

В якому файлі шаблону потрібно прописати ці рядки, залежить від движка вашого сайту. Наприклад, в у WordPressвам потрібно відкрити на редагування файл header.php : wp-content/themes/Папка_з вашою темою оформлення. Відкриваєте header.php в редакторі і на самому його початку знаходьте тег HEAD, що відкриває Html. У будь-якому місці за ним, але до HEAD, що закриває, прописуєте одну з наведених вище рядків коду із зазначенням шляху до вашого графічного файлу міні-логотипу.

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

Ось і вся різниця між анімованими favicon та звичайними. Але слід врахувати, що працюватиме анімована іконка тільки в FireFox, в інших браузерах вона буде статичною. Яндекс же, при завантаженні анімованого фавікона, перетворює його в статичний формат PNG. Але, на мою думку, овчинка вичинки не варто — встановлювати замість звичайного міні-логотипу для сайту анімований не має сенсу. Але це тільки моє ІМХО.

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

Онлайн FTP клієнт Net2ftp та Google Alerts - корисний сервіс для вебмайстрів
Аналіз сайту у безкоштовних онлайн сервісах Pr-cy, Cy-pr, Be1, Xseo та інших.
Іконки, значки, фони, картинки та логотипи для сайту (онлайн-сервіси IconFinder, Freepik, PSDGraphics та інші)
Юзабіліті - як зробити свій сайт зручним для відвідувачів та спробувати їх утримати якнайдовше за читанням ваших статей
MegaIndex Tools - набір інструментів для вебмайстрів та оптимізаторів
Як перевірити кроссбраузерність верстки сайту в Browsershots та налаштувати відправку пінгу при появі нових матеріалів
Http - що це таке, як переглянути заголовки та перевірити код відповідей сервера, що означають коди 200, 301, 302, 404 та 500
Кросспостинг – що це таке і як його правильно проводити

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

Створити значок для власного ресурсу досить просто: ви знаходите відповідну картинку або малюєте її самостійно, використовуючи графічний редактор, а потім стискаєте зображення до потрібного розміру, зазвичай, 16×16 пікселів. Отриманий результат зберігаєте файл favicon.ico і поміщаєте в кореневу папку сайту. Але і цю процедуру можна спростити за допомогою одного з Favicon-генераторів, доступних в мережі.

Веб-редактори іконок здебільшого пропонують усі необхідні інструменти для створення піктограм Favicon. При цьому необов'язково малювати картинку з нуля можна скористатися вже готовим зображенням.

Спосіб 1: Favicon.by

Російськомовний онлайн-генератор фавіконок: простий та наочний. Дозволяє намалювати значок самостійно, користуючись вбудованим полотном 16×16 та мінімальним переліком інструментів, таких як олівець, гумка, піпетка та заливка. Є палітра з усіма RGB-квітами та підтримкою прозорості.

За бажанням ви можете завантажити в генератор готове зображення з комп'ютера або стороннього веб-ресурсу. Імпортована картинка також буде поміщена на полотно та стане доступною для редагування.

На виході ви отримуєте графічний файл ICO з назвою favicon і роздільною здатністю 16×16 пікселів. Цей значок вже готовий для використання як іконки вашого сайту.

Спосіб 2: X-Icon Editor

Браузерний HTML5-додаток, що дозволяє створювати деталізовані значки розміром до 64×64 пікселів. На відміну від попереднього сервісу X-Icon Editor має більше інструментів для малювання і кожен з них може бути гнучко налаштований.

Як і Favicon.by, тут ви можете завантажити готову картинку на сайт і конвертувати її у фавіконку, при необхідності належним чином відредагувавши.

Якщо ви хочете зберегти деталі зображення, яке мають намір перетворити на фавіконку, X-Icon Editor чудово для цього підійде. Саме можливість генерації значків з роздільною здатністю 64х64 пікселів і є головною перевагою цього сервісу.

Favicon (Favorite Icon) - це невелика іконка (зображення, картинка) у спеціальному форматі, яка відображається в адресному рядку браузера при перегляді сайту, вкладці браузера або в його закладках ("Вибраному").

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

Навіщо потрібний favicon для сайту?

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

Що краще зобразити на фавікон?

• Іконка має відповідати тематиці сайту.
• бренд, якщо у Вас сайт пов'язаний із цим брендом. При цьому на різних сторінках можна відображати різні бренди;
• Застосовуйте фавікон, на який хочеться натиснути, це підвищить клікабельність при перегляді в пошуку Яндекса, Гугла;
• Зробіть кілька дизайнів фавіконок для різних розділів вашого сайту.
• Зробіть кілька дизайнів фавіконок для різних подій (наприклад, Нового Року, Дня Святого Валентина або Дня космонавтики, :).

Розмістіть отриманий файл у корені вашого сайту, де знаходиться основний індексний файл(index.php). Для вказівки браузеру місцезнаходження іконки сайту (favicon) у секції заголовка сторінки (head) вставте наступний рядок:

Як зробити анімований favicon?

Формат ICO не підтримує анімацію. Але сучасні браузери дають змогу використовувати формат GIF для мініатюр. Можна вказати для сучасних браузерів один анімований файл (favicon.gif), а для древніх, типу Intertet Explorer, інший (favicon.ico). Для цього в секцію head внесіть наступні два рядки:

Звичайно попередньо потрібно помістити обидва файли в кореневу папку сайту.

Як бути, якщо заборонено показ зображень у браузері?

Якщо зробити favicon з впровадженим зображенням у код сторінки:

То іконка буде відображатися у браузері навіть тоді, коли картинки будуть відключені. .

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

Не всі вебмайстри мають favicon.ico в корені сайту. Для отримання адреси favicon використовуйте наступний скрипт:

]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; if (strpos($favicon, "://")===false) $favicon = $url. "/" . ltrim($favicon, "/"); ) ) ?>

Пошукові системи Google, Яндекс та favicon

Робот пошукових систем кешує іконки сайтів. Закешовані іконки доступні за такими запитами:

Крім цього, Яндекс може зробити Вам "спрайт" з іконок різних сайтів:

Іконки для iPhone та iPad

Навіть якщо Ви не вказуєте link-посилання на картинку iPhone все одно буде шукати в кореневій папці сайту файл з ім'ям apple-touch-icon.png і якщо знайде, то Візьме з нього картинку, закруглить по кутах і на неї буде накладений відблиск автоматично самим пристроєм. Щоб уникнути цього, замість apple-touch-icon.png слід написати apple-touch-icon-precomposed.png власники айфонів і точок, т.к. для них ми робимо красиву іконку розміром 57x57 (можна до речі і більше, але це стандартний розмір іконки на ланч-скрині), підключаючи її так:

Як динамічно змінювати favicon?

Якщо Ви спробуєте змінити значення якості тега через DOM, то Ви не проймете бажаний результат. Щоб динамічно змінити іконку сторінки, потрібно спочатку видалити тег link зі старою іконкою із заголовка сторінки, а потім додати його з новим вмістом. Це робиться так: // Посилання на файл нової іконки var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // Знайти та видалити стару іконку з тега HEAD var links = head.getElementsByTagName("link"); for (var i = 0; i< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);

HTML5 та favicon

HTML5 був доданий атрибут sizes, що дозволяє оголосити кілька різних версій однієї і тієї ж іконки, і це можуть бути PNG файли:

Як оголосити плитку для планшетів на Windows 8?

Оголошення для Windows 8.0 виглядає якось так:

Windows 8.1 та IE 11 очікують кілька версій зображення, оголошених у browserconfig.xml. Наприклад:

Можна не оголошувати, якщо ім'я файлу не змінювати:

#2b5797

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

Фавікони найпопулярніших сайтів

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

Відеоверсія:

Яким має бути фавікон

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

• Є чітким та зрозумілим
• Зроблений у високій якості
• Передає зміст вашого сайту
• Має загальну стилістику з вашим сайтом
• Виділяється на фоні значків інших сайтів

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

Яких розмірів бувають значки сайтів

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

• 16*16px - стандартні розміри фавіконів, що підходять для більшості браузерів та пристроїв
• 32*32px - використовуються в деяких випадках у Internet Explorerі Safari
• 57 * 57px - використовуються при відображенні на iPhone
• 72*72px - використовуються при відображенні на iPad
• 114*114px - використовуються при відображенні на ретину дисплеях (57*2=114)
• 144*144px - використовуються при відображенні на ретину дисплеях iPad (72*2=144)

Якого формату мають бути фавікони

Раніше браузери сприймали фавікони лише у форматі "ico". Нині вони навчилися розуміти й інші формати, зокрема й "png". У нашому випадку ми вб'ємо 2-х зайців одним пострілом. Спочатку ми створимо фавікон у форматі "png", а потім конвертуємо його в "ico".

Декілька способів створення фавіконів

На сьогодні існує два основних способи створення фавіконів:

1. Через спеціальні онлайн-сервіси
2. Створення самостійно через спеціальні програми типу Photoshop та Adobe Illustrator

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

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

Створюємо фавікон

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

Підбираємо зображення

Брати зображення Ви можете звідки завгодно. Наприклад, через той самий яндекс картинки. Головна умова – щоб зображення було просте, без тіней та обсягів. Це пов'язано з тим, що при її зменшенні до розмірів в 16 пікселів вона не матиме великої деталізації. Через зайві обсяги і тіні картинка може змаститися.

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

Відповідне зображення в google images

Далі, ми відкриваємо це зображення за допомогою Photoshop. Дуже важливо, щоб фавікон був із прозорим фоном. У нашому випадку це негаразд. Для видалення заднього фону ми використовуємо інструмент "Чарівна паличка". Суть її роботи дуже проста. За допомогою цього інструменту ми можемо виділяти області на зображенні того самого кольору. Оскільки фон зображення чітко контрастує з самим колесом, зробити це буде дуже легко. Клікнувши один раз, ми виділяємо одноколірну область. Натиснувши клавіші CTRL+Deleteми вилучаємо цю область.

Видаляємо фон нашого колеса

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

Створюємо фавікон у 2-х різних розмірах

Я пропоную зробити 2 фавікон розмірами 64px і 16px. Для початку нам потрібно створити піктограму більшого розміру (64px). Для цього ми натискаємо клавіші CTRL+N. У вікні ми вибираємо висоту і ширину зображення в 64px.

Задаємо розміри майбутнього фавікона

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

Переносимо колесо у нове зображення

Після переміщення колеса в нове зображення ми бачимо, що вони не підходять за розміром. Нам потрібно зменшити колесо до розмірів 64 px. Для цього ми затискаємо клавішу SHIFTі клацнувши по діагональній точці зображення зменшуємо її. Ось ми створили перший фавікон для нашого сайту. Нагадую, що він у нас розміром 64*64px. Тепер нам залишається зберегти її, вибравши функцію "Зберегти для веб" у вкладці "Файл". Ми вибираємо формат PNG-24та папку images. Сам фавікон називаємо також, лише латинськими літерами - "favicon".

Зберігаємо фавікон

Чудово. Тепер нам залишається створити фавікон меншого розміру. Для цього ми натискаємо на вкладці "Зображення" і вибираємо функцію "Розмір зображення". Тут ми задаємо ширину та висоту в 16px. Тепер нам залишається зберегти це зображення для Інтернету. Її ми можемо назвати "favicon-2".

Отже, ось ми і створили 2 фавікони для нашого сайту у форматі "png". Ми створили спочатку варіант з розміром 64px для того, щоб потім легко зменшити її до розмірів 16px. Якщо спочатку створити варіант із 16px, то збільшити її до 64px без втрати якості не вийде. Тому, майте це на увазі, щоб не робити подвійну роботу.

Встановлюємо фавікон на сайт

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

Якщо у нас фавікон у форматі " ico"то ми замість " png"прописуємо " ico". Наприклад:

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

Конвертуємо значок для сайту у формат "ico"

Сучасні браузери без проблем можуть розпізнавати та відображати фавікони у форматі "png". Однак, у Вас може виникнути потреба конвертувати її у формат "ico". Однією з переваг даного формату є збереження всіх розмірів фавіконів в одному файлі. Погодьтеся, це дуже зручно. Отже, для конвертації наших значків ми скористаємося класним сервісом – xiconeditor.com. Працювати із ним дуже просто. Все відбувається 4 кроки:
1. Для початку нам потрібно завантажити наші фавікони. Для цього ми клацаємо по кнопці "Імпорт".

Завантаження фавіконів у сервісі xiconeditor.com

3. За бажання можна натиснути кнопку "Preview"і подивитися, як вони будуть відображатися. Для завантаження наших фавіконів у форматі "ico"ми клацаємо по кнопці "Export".

Отже, ось ми і навчилися створювати фавікони в "png"та конвертувати їх у формат "ico". Я спеціально не розглядав детальну обробку зображення у фотошопі, тому що для багатьох це зайве. При необхідності, ви, звичайно, можете додатково покращити якість фавікона попрацювавши з пікселями у фотошопі. Я ж постарався викласти все необхідне і у спрощеній формі. І на цьому маю все. Сподіваюся, цей урок виявився для вас корисним. Якщо це так:

1. Зробіть репост цієї статті у соціальних мережах, щоб більше людей отримали від неї користь;
2. Підписуйтесь на мою розсилку, щоб не пропустити корисні та цікаві публікації на блозі.

На цьому я з Вами не прощаюсь. Дякуємо за увагу і до зустрічі у наступних публікаціях!