Розмір фавікона для сайту
У веб-дизайні, як ви напевно знаєте, важлива кожна деталь. Людина, який перейшов на ваш ресурс, не бачить кожен з елементів окремо, а сприймає весь образ пакетом, що складається з інших дрібних деталей. Таким чином, якщо ви втрачаєте щось в процесі розробки свого ресурсу, ця деталь в подальшому може зіпсувати весь комплекс, всю композицію.
Содержание
Такий дрібницею може стати, наприклад, фон кнопки, неправильно підібраний шрифт якогось невеликого елемента і навіть фавікон. І справді, подивіться самі-великі, відомі сайти мають індивідуальну іконку, яка позначає його в розділі "Закладки" в браузері користувача. Без неї розробникам ресурсу не вдалося б створити ту композицію, до якої вони прагнули спочатку.
Тому і ви, створюючи дизайн для свого сайту, повинні подбати про таку деталь, як фавікон. У цій статті ми розповімо про те, як підбирати його під загальний стиль ресурсу, а також про те, які розміри повинні бути у цього зображення.
іконка сайту
Спершу визначимося, що ж являє собою цей елемент. Прямо зараз погляньте на назву вкладки вашого браузера. Як бачите, зліва від нього є маленьке зображення, що позначає спрощену версію логотипу ресурсу. Така ж картинка є і біля назви сайту, відображеного в результатах пошукової видачі. Саме на неї орієнтується користувач, коли бачить титул.
Багато веб-майстри розуміють, що така картинка потрібна - але мало хто знає, який розмір фавікона для сайту буде найбільш підходящим. Тому в цій статті ми не тільки дамо інформацію про те, як робити таку іконку і яким чином можна встановити її на ваш ресурс, а й розповімо про розміри зображення.
призначення фавікона
Отже, картинка біля заголовка сайту служить для ідентифікації. Це її первісне призначення: висловити сайт, назаніе якого ми бачимо, і виділити його в очах інших. Робиться це максимально просто за рахунок використання графіки: ми інтуїтивно сприймаємо інформацію в картинках набагато швидше і легше, ніж в текстовому форматі. Фавікона сприяють нам у цьому. Але не варто забувати, що розмір фавікона мінімальний в очах користувача. Це не логотип в "шапці" сайту, який може містити додаткові відомості у вигляді написів, якихось уточнень або контактної інформації. Все, що може бути зображено в іконці біля назви, має максимально підходити під розмір фавікона. А він, як вже було зазначено, просто мініатюрний (всього 16 на 16 пікселів).
Як підібрати фавікон?
Так яким же чином веб-майстер може розробити іконку для свого сайту? Слід зауважити, що просто стиснути логотип сайту, частіше за все, не вийде. На емблемах, які ставлять у вигляді лого того чи іншого ресурсу, часто видно різні елементи, які не завжди будуть коректно відображатися в мініатюрному вигляді. Краще відразу ж відмовитися від такої затії.
Зрозуміло, розмір фавікона не дозволяє говорити і про те, щоб просто вставити туди напис. Будь-який текст буде просто непомітний при такому дозволі. Потрібно розробити нову іконку, яка б передавала стиль сайту. Для пошуку рішень, знову ж таки, давайте звернемося до найбільших майданчиків.
Багато хто використовує у вигляді фавікона стилізовану першу букву назви сервісу. Так надходять, наприклад, Bing, Yahoo, Yandex, Wikipedia, Google. Є й інший підхід - якщо у вас коротке ім`я сайту, можете встановити його в якості фону своєї ікони. Щоб розмір фавікона (в пікселях він досягає, повторю, 16 на 16 точок) дозволяв коректно показувати цей напис, вона повинна бути не довше 3 букв. Так надходить, наприклад, сервіс Aol.
Як створити фавікон?
Зробити іконку для назви сайту можна кількома способами. Звичайно ж, найпростіший - це робота з різними готовими рішеннями. Може йтися про якісь сервісах або програмах, які дозволяють з повноцінного зображення зробити іконку шляхом зменшення його. Однак, я б рекомендував зайнятися розробкою такого логотипу власними силами. Це, по-перше, дасть можливість чогось научіться- а по-друге, надасть більшу кількість інструментів. Все, що вам потрібно буде вміти для цього -що малювати, а також знати, якого розміру фавікон повинен бути в кінцевому варіанті. Про розмір іконки для сайту ми поговоримо трохи пізніше, а поки відзначимо деякі тонкощі роботи з такими зображеннями. Зокрема, не згадуючи розмір фавікона для сайту, слід уточнити формат такого зображення. Як відзначають досвідчені дизайнери, картинка повинна бути збережена у вигляді .jpg (24-бітному), або ж як файл.ICO.
Провести збереження картинки можна, наприклад, за допомогою Photoshop, де і буде малюватися емблема.
розміри фавікона
Отже, тепер поговоримо про те, наскільки великою має бути картинка, яку ми бачимо поруч з назвою сайту в пошуковій видачі. За замовчуванням, як уже говорилося, її розмір складає всього 16 пікселів (по кожній зі сторін). Однак якщо ви спробуєте редагувати це зображення в "фотошопі", Самі переконаєтеся в тому, наскільки це незручно. Тому рекомендуємо працювати зі збільшеною картинкою, яку в подальшому можна буде просто стиснути по краях і зберегти в необхідному форматі.
мультиплатформеність
Однак говорячи про те, якого розміру фавікон повинен бути на вашому сайті, потрібно пам`ятати ще одну річ. Не всі платформи відображають картинку ресурсу однаково. Наприклад, пристрої з Retina-дисплеєм "бачать" ваш фавікон в розмірі 32 на 32 пікселів. А в Safari і на новій платформі Windows, і зовсім, ці іконки досягають розміру 64 пікселів.
Тому рекомендуємо зберегти різні версії іконки і надалі просто передбачити її зміна в залежності від платформи користувача. Ще один цікавий момент - можна спробувати завантажити іконку в найбільшому форматі, розраховуючи на те, що вона буде "стискатися" в залежності від браузера.
сторонні редактори
Звичайно, добре, якщо ви розбираєтеся в Photoshop і знаєте, який розмір фавікона повинен бути і як його досягти, зберігаючи своє зображення. Однак є маса новачків, які просто не стикалися з графічними редакторами настільки щільно раніше, тому не можуть так просто намалювати потрібне зображення. Щоб допомогти таким вебмастерам, існують різні сервіси, що дозволяють в автоматичному режимі робити цікаву для вас іконку. Багато з них навіть безкоштовні, що і зовсім не вимагає ніяких вкладень з боку користувача.
Для роботи іноді потрібно лише зареєструватися, але, як ви розумієте, робиться це одного разу - адже не так часто компанії змінюють фавікон. Погляньте хоча б на Google, який кожен день змінює логотип, але не чіпає іконку.
Як встановити фавікон?
Взагалі, налаштувати свій сайт таким чином, щоб на ньому коректно відображався потрібне вам зображення, дуже просто. Досить виконати ряд нескладних дій, які дозволять пошуковим системам, а також простим браузерам зчитувати інформацію.
Для цього отримане зображення необхідно зберегти з ім`ям favicon.ico і помістити в корінь свого ресурсу. Все, тепер ваше зображення стане розпізнаватися автоматично, і по подію деякого часу воно буде прив`язано до вашого сайту.
Крім такої прив`язки можна додати ще одну сходинку, яка буде "підказувати", Де знаходиться ваша іконка. Виглядає він у такий спосіб:
Встановити код слід в шапку сайту.
висновки
Отже, прочитавши нашу статтю, ви розібралися з тим, якого розміру має бути фавікон для сайту і що це взагалі таке. Також, я думаю, ви зрозуміли, що пошук підходящої іконки для вашого ресурсу - це необхідність, адже це відіграє вам на руку як з точки зору підвищення впізнаваності, так і в плані якогось додаткового виділення серед ваших конкурентів. По крайней мере, найбільші сайти надходять таким же чином, що можна брати в якості яскравого прикладу. Та й потім, зусиль це особливих не викликає - зробивши фавікон раз і встановивши його правильно на свій сайт, ви можете забути про нього на наступні кілька місяців.
Тому сміливо експериментуйте, придумуйте щось нове, намагайтеся - і все вийде!
