Свій значок для сайту
Отже, що таке значок веб-сайту і для чого він потрібен? Для цього нам доведеться повернутися в минуле і згадати історію. Раніше всі браузери позначали веб-сторінки однаковими значками, наприклад, в Internet Explorer це буква «e», яку оперізує орбіта на тлі аркуша паперу, а у Firefox на значку зображена вогненна лисиця, яка обіймає земну кулю. Але, кожен володів сайту хоче використовувати свій власний значок, щоб візуально відрізнятися від інших сайтів в інтернеті. І така можливість з'явилася в сучасних браузерах. Більш того, для кожної сторінки можна призначити окремий значок. Однак, до цього часу, деякі веб-майстри не користуються цією можливістю.
Як встановити значок для своєї сторінки
Щоб вказати значок, відповідний сторінці, досить прописати в розділі HEAD сторінки наступне:
Слово type служить для вказівки MIME-типу. В даному випадку «image / x-icon» означає формат файлу, що містить значок в форматі Microsoft Windows. Такі значки розуміють практично всі браузери, здатні відображати значки сайтів. Якщо на сторінку підключений значок іншого типу, і браузер не вміє відображати значки зазначеного типу, то він не стане і намагатися завантажувати значок з Мережі.
Тепер поговоримо про особливу роль файлу favicon.ico. Слово Favicon ( «значок для Вибраного»; походить від слів «Favorites Icon». Позначають значки для папки з закладками або вибраних посилань) виникло завдяки Internet Explorer. Більшість браузерів, якщо не знаходять жодного тега link. який відповідав би значку, то вважають, що у Сторінка наразі не має власного значка, і тому використовують для неї стандартний значок сторінки (свій для кожного браузера, про що вже говорилося вище). Але Internet Explorer додатково намагається знайти в корені сайту файл з кодовим ім'ям favicon.ico. щоб використовувати цей значок. Деякі веб-майстри вирішили взагалі відмовитися від тега link. просто помістивши значок favicon.ico в корінь сайту.
Насправді вони зробили необачний вчинок, оскільки використання тега link дає наступні переваги:
- файл із позначкою можна назвати як завгодно, а не тільки favicon.ico
- можна призначити багато різних значків кількох розділів сайту, а не тільки один і тільки всьому сайту відразу
- якщо значок не прописаний в
- , то його не побачать інші браузери (Firefox, Netscape, Konqueror, Opera)
Примітка: До речі, виходячи з вищесказаного, рекомендація розміщувати файл з ім'ям favicon.ico в корені веб-сайту з подальшою вказівкою на нього в тезі link виглядає необачно, оскільки, якщо потім виникне потреба скасувати для однієї зі сторінок вказівку нестандартного значка, то просто прибрати відповідний link буде недостатньо: Internet Explorer продовжить як і раніше успішно знаходити favicon.ico в корені сайту. В цьому випадку доведеться перейменовувати файл favicon.ico і змінювати код у всіх інших сторінок веб-сайту, а не тільки тієї однієї, для якої захочеться скасувати вказівку значка.
Тому, свої значки бажано не називати стандартним ім'ям favicon.ico. Крім усього іншого, воно ще й погано відповідає зовнішньому вигляду значка, описуючи одне лише його призначення.
Тепер поговоримо про формат значків ICO. ICO-файл містить один або кілька значків, розмір і кольоровість кожного з яких задається окремо. Дані значків зберігаються в стислому вигляді, тобто колір кожної точки значка кодується незалежно, і обсяг файлу тому виходить досить-таки великим.
Розмір значка може бути будь-яким, але тоді вид значка буде додатково спотворений при розтягуванні або стисненні в момент приведення до одного зі стандартних розмірів.
Значки бувають або в природному кольорі (True Color), або з фіксованою палітрою (з двохсот п'ятдесяти шести, шістнадцяти, або всього з двох кольорів).
Mozilla Firefox і IE8 підтримують відкриття декількох закладок в одному вікні, відображаючи значки веб-сайтів на корінцях таких закладок. Це надзвичайно зручно, оскільки дозволяє швидко орієнтуватися при виборі закладки.
Якщо стоїть вибір між збереженням значка 16 × 16 або в природному кольорі (True Color), або в форматі з фіксованою 256-кольоровий палітрою, то який вибір слід зробити і чому? Слід вибрати природний колір, оскільки в даному випадку саме це дозволить скоротити обсяг файлу.
На жаль, таке використання значків сайту побудовано на тісну інтеграцію браузера і операційної системи, тому воно починається тільки в тому випадку, якщо ярлик (URL-файл) було створено перетягуванням з Internet Explorer. Який розмір буде використаний - 32 × 32 або 48 × 48? Це залежить від налаштувань властивостей екрану - вкладка «Ефекти», група «Параметри відображення», пункт «Використовувати великі значки». Якщо цей пункт включений, то 48 × 48, інакше 32 × 32. Використання значків розміром 48 × 48 популярно на дисплеях поліпшеною роздільної здатності, де значки 32 × 32 вже занадто дрібні.
Якщо у файлі значка не відображається, спробуйте відповідне необхідному системі розміром, то буде вибрано найбільш підходяще з них, а потім розтягнуто (або стисло). Такі значки виглядають розмазали, що досить-таки негарно (тим більше це вірно для тих значків, деяка частина зображення яких прозора, і крізь неї просвічує фон робочого столу).
Виходячи з вищенаведених міркувань, в кожному з ваших ICO-файлів повинна бути присутньою принаймні три значка: один 16 × 16, один 32 × 32, і один 48 × 48. Тоді і значки всіх розмірів будуть в наявності, і вид їх не виявиться спотворений.
Додаткові можливості
Чи можна зробити так, щоб значок був анімованим GIF там, де це можливо, а в інших браузерах залишався нерухомим ICO-зображенням? Такий ефект буде досягнутий, якщо вказати два link-тега поспіль, один за іншим:
Браузер завжди бере останній із зазначених значків - за тієї умови, що розуміє тип значка. Таким чином, розуміють GIF візьмуть GIF, інші візьмуть ICO.
Цей трюк працює і зі значками нестандартних форматів - таких, як MNG. Такі значки треба завжди вказувати останніми - а перед ними приводити, як мінімум, ICO-версію.
ICO-версія повинна вказуватися завжди, оскільки значки інших MIME-типів не придатні для оформлення ярликів Microsoft Windows (URL-файлів), а це необхідно і на робочому столі, і в інших папках.
Значки для iPhone, iPad
У зв'язку з популярністю пристроїв від компанії Apple стала актуальною створення значків для iPad і iPhone. Коли користувач в Safari вибирає команду Додати в «Додому» на робочому столі пристрою з'являється значок. Для цієї мети необхідно створити картинку у форматі PNG з розмірами 72 × 72 пікселів для iPad і 114 × 114 пікселів для iPhone 4. Після цього необхідно прописати:
Цікаво відзначити, що при цьому із позначкою відбудуться деякі зміни: з'являться закруглені куточки, невелика падаюча тінь від значка, і скляний ефект.
Якщо ви не хочете подібних ефектів для свого значка, то використовуйте інший запис:
З появою HTML5 стало можливим використовувати новий атрибут sizes. І тепер можна зустріти такий запис.
У цьому прикладі використовується значок розміром 32 на 32. Іноді створюється цілий список подібних записів для різних розмірів, які можуть використовуватися різними браузерами.
Програми для створення ICO-файлів
Не забувайте про те, що фіксована палітра не зобов'язана складатися з системних кольорів. Тому значки 32 × 32 і 48 × 48 м слід зберігати, принаймні, в 256-кольоровий палітрі, оскільки в True Color вони будуть займати занадто багато місця, а грамотний підбір палітри здатний зробити обмеженість кількості квітів практично непомітною.
Також ви можете скористатися різними онлайн-сервісами, які дозволяють завантажити на сайт потрібний значок або PNG-файл і отримати готовий значок для вашого веб-сайту:
www.favicon.cc/
www.favico.com
FavIcon Generator
Genfavicon