Як зробити фавиконку для сайту з допомогою GIMP

16

Від автора: раніше фавиконам не приділялася така увага, і тільки останнім часом з’явилося безліч способів їх створення, сам підхід до створення фавикона сильно ускладнився. А це означає, що для створення просунутих і сучасних превью зображень можна використовувати такі інструменти, як Real Favicon Generator. Даний генератор все зробить за вас; а в цій статті мова піде про створення більш простих фавиконов. В тому числі ми дізнаємося, як зробити фавиконку для сайту.

Як я раніше говорив, фавиконы з простих зображень 16х16 пікселів перетворилися в многомасштабные і багатоцільові. У цьому уроці ви навчитеся створювати сучасні, багатошарові фавиконы… але перш ніж почати, давайте обговоримо деталі:

Ви можете зіткнутися з тим, що многомасштабные фавиконы не працюють в старих браузерах, в тому числі в Firefox 5 і нижче. Якщо велика частка ваших користувачів використовує застарілі браузери, то вам краще зупинитися на звичайних фавиконах.

Нижче в статті ви побачите, що многомасштабные іконки сайтів створюються шляхом додавання нових шарів у файлі .ico; так само як і в PhotoShop файлі .psd, а з додаванням нових шарів, збільшиться і розмір файлу. Цілком може статися так, що з файлом більше ніж 50к буде неможливо працювати, він буде гальмувати сторінку. Постарайтеся не перевищувати вага файлу .ico і тримайте його в межах до 20Кб; Якщо ж ви не вклалися у відведені цифри, моя порада – видаліть самі верхні шари з найбільшими дозволами.

Наскільки мені відомо, єдиним кросплатформним інструментом для створення багатомасштабних іконок для сайту є GIMP. Інструкція по установці на Mac OS X додається нижче; якщо ж ви на Windows, то доведеться пошукати самим.

Крок 1: Створення основного зображення з високою роздільною здатністю

Як зробити фавиконку для сайту з допомогою GIMP

Для створення основного зображення з найбільшим дозволом можете використовувати будь-який інструмент, який побажаєте потрібне: я пропоную використовувати зображення приблизно 256х256 пікселів. Пам’ятайте про те, що створене вами зображення буде зменшено до 16х16 пікселів в самій маленькій версії, так що зображення повинно бути простим, зрозумілим і чітким.

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

Крок 2: Збережіть шари фавикона в PNG

Зменшіть розмір зображення до необхідного і збережіть його; я пропоную зробити так:

Як зробити фавиконку для сайту з допомогою GIMP

Почніть з найбільшого дозволу і йдіть вниз, зберігаючи кожна з них в окремий файл. Іконки apple-touch-icon-precomposed.png і facebook.png далі задіяні не будуть: це резервні іконки для мобільних пристроїв і соціальних мереж, докладніше про це в наступних статтях.

Можете спробувати оптимізувати отримані PNG файли будь-яким відомим способом: як варіант – альфа прозорість.

Крок 3: Виберіть GIMP

GIMP (GNU Image Manipulation Program) – безкоштовний графічний редактор з відкритим вихідним кодом, альтернатива Photoshop. Розроблений для X window System, так що необхідно подбати про підтримку. На щастя, якщо ви користуєтеся OS X 10.5 (Леопард) або вище, то дана система вже встановлена за замовчуванням; тим же, хто використовує більш ранні версії, доведеться встановити X11 на OS X самостійно.

Скачайте відповідну версію GIMP для OS X, встановіть і запустіть її. (для першого запуску буде потрібно кілька хвилин, так як потрібно спочатку запустити X11).

Крок 4: натисніть на іконку з найбільшим дозволом і імпортуйте в неї все PNG файли за допомогою «Open As Layers»

Як зробити фавиконку для сайту з допомогою GIMP

Інтерфейс в GIMP разюче відрізняється від стандартного Mac OS X або Windows: наприклад, рядок основного меню розташоване у верхній частині вікна GIMP, а не у верхній частині екрана. Відкрийте іконку розміром 64х64. Якщо буде запропоновано встановити поточний колірний профіль, виберіть RGB.

Потім клацніть правою кнопкою миші у вікні програми по картинці і виберіть File / Open as Layers… і так вибирайте інші фавиконы від великого до меншого.

Крок 5: Збережіть фавикон

Для цього натисніть File / Save As… пропишіть ім’я файлу (favicon.ico). Можете вибрати опцію стиснення PNG.

Як зробити фавиконку для сайту з допомогою GIMP

Крок 6: Вставити іконку в веб-сторінку

Додайте код нижче в хедер кожної сторінки, на якій ви хочете в якості іконки сайту використовувати наше зображення:

«Ухти, а це не схоже на звичайну вставку фавикона на сторінку!»

Так і є. По-перше, ми не використовуємо короткий значення для атрибуту rel, яке було розроблено спеціально для IE і було неофіційним. По-друге, всі верстви збудовані списком. По-третє, ми даємо зрозуміти IE, які дозволи використовуються з допомогою атрибута sizes.

Насправді, можна взагалі не вказувати цю рядок: до тих пір, поки ім’я вашого файлу favicon.ico і він розташований в корені сайту (тобто разом із index). Браузери автоматично підставлять зображення. Рядок просто підказує браузеру, що потрібно спочатку завантажити сам фавикон та інформацію про дозволи, а тільки потім інший контент. В іншому випадку все буде навпаки.

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