Іконки для сайтів - теорія і практика
У цій статті ми розповімо все про іконки для веб-сайтів.
Що ж це таке взагалі - іконка для веб-сайту і навіщо ці іконки взагалі потрібні?
Перш за все, давайте почнемо з того, що відзначимо одну важливу деталь - інтерфейс будь-який з сучасних операційних систем влаштований так, що будь-який об'єкт так чи інакше представлений у вигляді якогось значка - ми постійно натискаємо на ярлики, кнопки і менюшки.
Іншими словами, кожному типу об'єктів присвоєно якийсь певний тип зображення. Погодьтеся, це дуже зручно - бо, якщо ми, припустимо, хочемо відшукати в достатку піктограм один єдиний файл допомоги (help), то переплутати його з будь-яким іншим файлом вже не вдасться, тому що тільки файлів допомоги відповідає зображення книжки і знака питання.
Ну, а тепер давайте повернемося до наших баранів - отже, іконки для веб-сайтів.
Давним-давно, браузери позначали всі файли сторінки одними і тими ж значками - наприклад, в Internet Explorer це була рядкова латинська буква "е" (тобто емблема Експлорера). Був ще такий браузер, як Netscape - там, для кожної сторінки, використовувалася заголовна буква "n". Але вже в другій половині 90-х якийсь розробник зметикував - а чому б не дати волю веб-майстрам? Нехай вони самі призначають іконки для своїх сайтів, а браузери будуть їх справно відображати!
З тих самих пір і з'явилася можливість для кожного окремого сайту призначати свою особливу іконку. Більш того, іконку стало можливо використовувати навіть для кожної сторінки окремо!
Як же прописати іконку для веб-сторінки? Все дуже просто - достатньо прописати тільки наступний тег:
[Link rel = "shortcut icon" href = "url іконки" type = "image / x-icon"]
Цей тег необхідно размесить в заголовку сторінки - між тегами [head] і [/ head]. Ну а url іконки - це те місце де лежить сама ікона.
Давайте ж тепер більш детально розглянемо цей код.
Яку функцію виконує rel в тезі [link]?
Тег [link] вказує на зв'язок між сторінкою на якій він розміщений і тими об'єктами, на які він вказує. Таким чином, rel = "shortcut icon" задає зв'язок між сторінкою та іконкою.
Робити такий покажчик необхідно, тому що за допомогоюУ нашому випадку image / x-icon вказує на те, що файл знаходиться в форматі Microsoft Windows. Значки такого типу розпізнаються всіма браузерами. type в тезі [link] слід вказувати на кожній веб-сторінці.
Кілька слів, про ту роль, яку відіграє файл favicon.ico.
Всі браузери так влаштовані, що в разі, якщо вони не можуть знайти жодного тега [link]. який посилається на встановлену веб-майстром іконку, то відразу ж встановлюють для сторінки свою стандартну піктограммка. Але, перш ніж це зробити, браузер додатково перевіряє корінь сайту на наявність favicon.ico - і якщо знаходить цей файл, то бере іконку звідти.
Багато веб-майстри так і роблять - просто не прописують тег [link]. Знову ж правильним таке рішення можна назвати тільки частково. Справа в тому, що використовуючи тег [link] можна непогано прикрасити свій сайт різними піктограмкамі (в залежності, припустимо, від розділу на якому знаходиться користувач).
Тепер поговоримо про формати іконок для сайтів, які використовуються в середовищі Microsoft Windows.
ICO-файл Microsoft Windows може містити один або кілька різних іконок - їх розмір і кольоровість задається окремо. Всі дані щодо цих іконок зберігаються не в заархівує - колір кожної окремо взятої точки кодується окремо і таким чином сам файл виходить досить об'ємним за розміром.
В принципі, розмір іконки може бути будь-яким, але під час приведення її до стандартних розмірів, браузер її, відповідно, спотворить. Ну, а це не є добре. Отже, треба завжди притримувати одного і того ж розміру. Іконки можуть бути або в природному кольорі (True Color), або з фіксованою палітрою (з двохсот п'ятдесяти шести, шістнадцяти, або навіть з двох кольорів). Всі нинішні користувачі Інтернету мають сучасні моніторами, які здатні сприймати природний колір - тому використання фіксованої палітри в іконах для сайтів диктується одним лише єдиним бажанням - якомога сильніше зменшити розмір файлу, і тим прискорити його завантаження.
Зменшення обсягу файлу з іконками - це дуже потрібна процедура. Адже якщо зберегти в такому файлі кілька іконок великого розміру (+ ще й в природному кольорі!), То обсяг файлу може виявитися навіть більше, ніж обсяг тієї сторінки до якої значок приписаний. Як ви розумієте, це вже перебір.
Тому, простіше і економніше безпосередньо і відразу задати природний колір кожної з цих точок, ніж спочатку виділити для кожної з них окремий номер в палітрі з двохсот п'ятдесяти шести кольорів, і тільки потім вказати природний колір, відповідний кожному з фіксованих кольорів палітри.
Втім, це міркування справедливо тільки для невеликої іконки 16x16; якби мова зайшла про таких розмірах як 32x32 і 48x48, де точок у багато разів більше, то тоді, навпаки, саме використання фіксованого палітри дало б істотне (в кілька разів) зменшення обсягу файлу.
Тепер, під кінець, трохи про те, навіщо потрібні іконки розміром 32x32 і 48x48?
Справа в тому, що поряд зі стандартними іконками, які відображаються в браузері, існують і інші можливі способи відображення іконок - наприклад, на робочому столі. Більш того, меню "Пуск" теж використовує ці нестандартні розміри.
Ну і на завершення про софт, за допомогою якого можна створювати іконки на будь-який смак.
На власному досвіді можемо вас запевнити, що найбільш професійні іконки виходять тільки в тому випадку, коли ви користуєтеся професійними програмами, які спеціально призначені для створення і збереження іконок. Ми не будемо піарити ніяку з програм - виберете її самі! Для цього достатньо всього лише запитати гугл.
До речі, за досить таки тривалий час існування Інтернету, людство встигло намалювати надзвичайно багато іконок. Всі вони доступні для вільного скачування з спеціалізованих порталів - їх ви теж без праці знайдете!