Секрети favicon.ico або як створити іконку для сайту в Photoshop

Наша взаимовыгодная связь https://banwar.org/

Ви хочете оригінальну і гарну іконку для вашого сайту? Зробіть її самі - в цьому вам допоможе ця стаття.

Favicon (скор. Від англ. FAVorites ICON - «значок для обраного») - це спеціальна стандартна або призначена для користувача іконка маленького розміру, яка знаходиться зліва від посилання (URL) в адресному рядку веб-браузера. Також такі іконки використовуються в закладках поруч з назвою сайту, у вкладках браузерів або як ярлик для web-сторінок на робочому столі або інших папках Windows. Під маленьким розміром мається на увазі 16 на 16 пікселів - стандартний розмір для іконок даного типу. Основна мета такої іконки - зробити дизайн вашого сайту цілісним і деталізованим.

Все, що вам необхідно зробити, щоб додати іконку на сайт - це помістити готовий «favicon» в форматі Windows Icon (.ico) в кореневу папку вашого сайту. Більшість сучасних сайтів, за винятком Internet Explorer (IE), підтримують використання іконок у форматі GIF (включаючи анімовані варіанти) і PNG (включаючи підтримку повної прозорості фону), але так як абсолютно всі браузери, IE в тому числі, розуміють формат .ico, має особливості, які не дубльовані в GIF і PNG, пропоную ознайомитися саме з їх створенням.


Системні вимоги
Так як ми будемо створювати іконки в "Photoshop", нам необхідно навчити програму розуміти розширення Windows Icon (ICO). Для цього нам буде потрібно спеціальний плагін експорту формату файлів .ico, який можна безкоштовно завантажити з Telegraphics . Плагін читає і записує ICO-файли в 1, 4, 8-бітних індексованих і 24-бітових RGB режимах, а так само читати і записувати 32-бітові "ХР" іконки (з 8-бітовим альфа-каналом). Щоб встановити плагін, вам необхідно на сайті розробників вибрати підходящий варіант системи, розпакувати скачаний архів і помістити в папку "x: \ Program Files \ Adobe \ Adobe Photoshop CS5.1 \ Plug-ins \ File Formats \" (х = буква вашого диска , на який встановлений Photoshop) файл з розширенням ".8BI", після чого запускаємо або перезапускаємо сам Photoshop.

Приступаємо до створення
Так як робоча зона розміром в 16х16 пікселів є недостатньо великий для зручної роботи з зображенням, краще почати ваш проект з розміром робочої зони хоча б 64х64 пікселя (краще використовувати якомога більші розміри при створенні іконок для більш зручного вираження творчих ідей, згодом зображення можна легко отмасштабовані зі збереженням пропорцій). Щоб задати необхідні розміри робочого поля необхідно вибрати в меню Photoshop пункт «File> New» або натиснути клавіші Ctrl + N.

Дизайн іконки
Якщо у вас вже є готовий логотип більшого розміру, спробуйте зменшити його до 16х16 пікселів і подивіться, як добре він виглядає. Якщо при таких розмірах логотип погано помітний і його графічна інформативність невисока, створіть поле 64х64 пікселя і зробіть найпростіший дизайн іконки, який буде містити основні кольори вашого сайту. Коли ви будете готові протестувати готовий дизайн - виберіть меню «Image> Image Size» або натисніть комбінацію клавіш «Alt + Ctrl + I» і задайте розмір 16х16, виставивши при цьому режим інтерполяції «Bicubic Sharper» (цей режим найкращий для зменшення зображення і дає можливість оцінити буде ваша іконка "розмитою" при зменшенні чи ні). У разі, коли зображення все-таки недостатньо чітке, поверніться до вихідного зображення і зробіть ваш малюнок більш чітким, насиченими і / або контрастним, після чого заново відмасштабуйте вашу іконку.

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

Збереження і завантаження отриманої іконки
Для збереження отриманого результату необхідно в меню вибрати пункт «File> Save As» або натисніть комбінацію клавіш «Shift + Ctrl + S» і задати обов'язкове ім'я файлу «favicon.ico». В меню «Format» необхідно вибрати Windows Icon (ICO) з меню, що випадає. Цей формат буде доступний в Photoshop, тільки якщо ви завантажили і правильно встановили необхідний плагін і задали правильний колірний режим при створенні робочого вікна (1, 4, 8-бітний індексований або 24-бітний RGB).

Наступним кроком буде розміщення нової іконки в кореневій папці вашого сайту. Для цього з'єднаєтеся з сервером, на якому знаходиться ваш сайт, і закачайте туди створений «favicon.ico». Цей файл необхідно обов'язково помістити в папку, в якій знаходиться домашня (index.html) сторінка, а не в папку з зображеннями або будь-яку іншу папку, так як стандартним місцем розташування цього файлу є саме коренева папка сайту. Якщо файл був правильно розміщений (а його назва точно «favicon.ico»), більшість браузерів автоматично розпізнають його.

Однак для деяких браузерів необхідно вказати пряме посилання на іконку вашого сайту безпосередньо в HTML-коді, а саме додати її в хедер кожної сторінки, на якій необхідно розмістити «favicon.ico»:

<Link rel = "Shortcut Icon" href = "/favicon.ico">

<Link rel = "Shortcut Icon" href = "/ favicon.ico">

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

<Link rel = "icon" href = "/favicon.ico" type = "image / x-icon">

<Link rel = "icon" href = "/ favicon.ico" type = "image / x-icon">

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

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

Для використання іконки в форматі GIF або PNG необхідно прописати наступні рядки:

<Link rel = "icon" href = "/favicon.gif" type = "image / gif">

<Link rel = "icon" href = "/ favicon.gif" type = "image / gif">

або

<Link rel = "icon" href = "/favicon.png" type = "image / png">

<Link rel = "icon" href = "/ favicon.png" type = "image / png">

Однак запам'ятайте, що обидва ці формату не підтримуються IE і не будуть в ньому працювати.

Мультіразмерний Favicon
Крім звичайного favicon розміром 16х16 пікселів, які використовуються для оформлення адресного рядка, існує його різновид з розмірами в 32 × 32 пікселя і 48 × 48 пікселів. Ці іконки дуже поширені в середовищі Windows. Наприклад, якщо ви хочете помістити ярлик на веб-сторінку на ваш робочий стіл, Windows автоматично спробує використовувати favicon як зображення для ярлика. Але стандартного розміру (16х16 пікселів) буде недостатньо для якісного відображення, так як стандартний розмір ярлика в середовищі Windows 48х48 пікселів - це значить, що ярлик буде розтягнутий до необхідних розмірів і стане непривабливим і практично нечитабельним.

Однак існує спосіб виправити цей недолік. Корисна властивість файлів .ico полягає в тому, що вони можуть містити в собі багато варіантів однієї і тієї ж іконки з різними розмірами і глибиною кольору (на зразок можливості .gif-файлів містити безліч фреймів). Тому якщо помістити в favicon.ico зображення відразу в декількох розмірах і з різною глибиною кольору, Windows зможе автоматично вибрати найбільш підходящі параметри для застосування до ярлику. Найбільш поширені розміри ярликів, які можуть бути використані, - 16 × 16, 24 × 24, 32 × 32 і 48 × 48 пікселів.

Створення мультіразмерной іконки не набагато складніше, ніж створення звичайного favicon розміром 16х16 пікселів. Необхідний плагін ми можемо знайти все на тому ж сайті Telegraphics , Він дозволить помістити кілька іконок в одному .ico-файлі. В принципі це навіть не плагін, а окрема програма, яку можна використовувати як в Windows (через командний рядок), так і в MacOS (за допомогою перетягування). Також у цієї програми існують аналоги, як наприклад: Sib Icon Studio (www.sibcode.com/icon-studio) і Any to Icon Convertor (www.aha-soft.com/anytoicon).

Що стосується кольору, ви могли помітити, що деякі іконки мають нерівності (як щербини) по краях, в той час як інші згладжують ці нерівності і виглядають дуже симпатично. Це можливо завдяки 32-бітної глибині кольору, яка відображає справжню прозорість, як і Photoshop. Ви можете створити 32-бітну версію іконки разом з 24-бітної (16 мільйонів кольорів, з підтримкою прозорості як в .gif-файлах), 16-бітну (256 квітів) і навіть 8-, 4- або 2-бітну версію, і помістити їх усіх в один ico-файл.

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

16 × 16, 16-біт (256) квітів
16 × 16, 32-bit colors
32 × 32, 16-біт (256) квітів
32 × 32, 32-bit colors
48 × 48, 16-біт (256) квітів
48 × 48, 32-bit colors

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

Рішення можливих проблем
загальні проблеми
У разі якщо після виконаних дій ваш «favicon» так і не з'явився, спробуйте кілька разів (близько 5) оновити вашу сторінку або очисти кеш браузера, або поставте "?" В кінці посилання (наприклад "http://diego.com.ua /? ") - це дія змусить думати браузер, що сторінка є новою і ще не була додана в кеш.

Ще одним способом вирішення цієї проблеми є перехід за прямим посиланням на ваш «favicon» (наприклад: http://diego.com.ua /favicon.ico), після чого браузер (IE) негайно відобразить і запам'ятає іконку.

Проблеми сумісності з браузерами
"Microsoft IE 6" (а також 7, 8 і 9) може не відображати "favicon" до тих пір, поки посилання на вашу сторінку не буде доданий в обране. У такому випадку спробуйте наступний варіант - затисніть ліву клавішу мишки на видимій частині "favicon" (зазвичай стандартна іконка IE), після чого "потрясіть" його і відпустіть. Дані дії приведуть до перезавантаження сторінки і оновленню іконки. Іншим способом вирішення даної проблеми є додавання наступного коду в секцію "" сторінок, на яких ви хочете бачити ваш "favicon":

<Link rel = "shortcut icon" href = "favicon.ico"> <link rel = "icon" type = "image / ico" href = "favicon.ico">

<Link rel = "shortcut icon" href = "favicon.ico"> <link rel = "icon" type = "image / ico" href = "favicon.ico">

"Safari" для MАС-систем не відображатиме оновлений "favicon" до тих пір поки не буде очищено кеш браузера. Однак натискання кнопки меню "Empty cache" не вирішить проблему, так як "Safari" зберігає іконки в окремій папці. Щоб очистити папку кешу іконок необхідно зайти в меню "Edit> Reset Safari" та поставити галочку навпроти "Remove all website icons". Альтернативним (ручним) способом є видалення вмісту наступної папки: "User> Library> Safari> Icons". Для Windows-версії "Safari" шлях трохи відрізняється: "C: \ Documents and Settings \ YourUserName \ Local Settings \ Application Data \ Apple Computer \ Safari", в цій папці необхідно видалити файл "WebpageIcons.db". Нагадую, що папка "Local Settings" і вкладені в неї папки приховано за замовчуванням, а значить для того, щоб в них потрапити, необхідно налаштувати відображення прихованих файлів і папок Windows. Після видалення вищевказаних фалів необхідно перезапустити "Safari" (в деяких випадках також необхідно перезавантажити комп'ютер).

Для вирішення аналогічної проблеми в "Mozilla FireFox" необхідно очистити кеш браузера і перезапустити програму.

У браузері "Opera" такої проблеми немає, тому після оновлення вашої іконки досить простого оновлення сторінки (можливо кілька разів).

Іншою проблемою в ОС "Windows" є оновлення ікон для Інтернет-сторінок (наприклад, при розміщенні іконки сторінки на робочому столі). Для примусового поновлення змінених іконок необхідно виконати наступні дії:
1. Натиснути правою кнопкою по Робочому столу;
2. Вибрати пункт меню "Властивості" (для "Windows XP") або "Персонализировать" (для "Windows Vista" або "Windows 7") і перейти на вкладку "Властивості Екрану";
3. Поміняти якість передачі кольору з 32-розрядної на 16-розрядний і натиснути кнопку "ОК" або "Застосувати";
4. Назад поміняти якість передачі кольору на 32-розрядно і натиснути кнопку "ОК" або "Застосувати".

Проблеми з плагіном "Photoshop" для роботи з іконками
Формат "Windows Icon" (ICO) буде недоступний, якщо:
1. Ви неправильно встановили плагін;
2. Ви неправильно визначили версію плагіна відповідну для вашої ОС;
3. Робоча область в "Photoshop" була створена не в 1, 4, 8-бітних індексованих або 24-бітових RGB режимах.

Також після установки плагіна необхідно перезавантажити сам "Photoshop" для вступу в дію зроблених змін.