Як створити фавікон, ярлик, іконку для сайту в форматі ico

Як створити файл favicon.ico і помістити іконку і ярлик на сайт, в форум або блог? FAQ

Дивно, за що тільки не візьмешся в області Веб, майже завжди створюється враження, що вступаєш на terra incognita.

Почасти це пов'язано з моєю дрімучістю, але чому я не зміг знайти в мережі нормальне керівництво на тему: «Як створити іконку і встановити її на сайт» ...

Найцікавіші ролики на Youtube

Часті питання (FAQ).

Що таке іконка і ярлик, що належать Веб сторінці, і якими вони бувають?

Коли ми відкриваємо сторінку сайту, що має іконку, то наш браузер викачує набір картинок, упакованих в файл у форматі ICO.

Часто, файл, в який упаковані іконка і ярлики, називається favicon.ico. Назва ця не обов'язкова, але бажана.

Якого розміру повинні бути зображення, які входять до складу файлу favicon.ico?

Зазвичай в файлі favicon.ico, використовуваного в Веб, всього три зображення розмірами: 16x16, 32x32, і 48x48 пікселів.

Кількість і параметри зображень входять до складу файлу ICO залежать від його призначення.

Наприклад, в комплект системних ярликів MAC ОС входять зображення таких розмірів: 16x16, 32x32, 48x48, 125х125, 256x256, 512х512 пікселів.

В ОС Windows використовується інший комплект, розмірами: 16x16, 32x32, 48x48, 256x256 пікселів.

Яке призначення зображень входять до складу файлу favicon.ico?

Призначення окремих зображень, які мені особисто вдалося ідентифікувати для Windows, наступне:

32x32 пікселя - ярлик, який можна розмістити на робочому столі.

48x48 пікселів - ярлик в файлового менеджера в режимі відображення "Ескізи сторінок".

48х48 пікселів - ярлик в файлового менеджера в режимі відображення "Плитка".

32х32 пікселя - ярлик в файлового менеджера в режимі відображення "Значки".

16х16 пікселів - ярлик в файлового менеджера в режимі відображення "Список" і "Таблиця".

Чому я не бачу на Робочому столі і в файлового менеджера ярлик збереженої посилання на Веб сторінку?

При звичайному способі збереження сторінки «Зберегти» (Save) або «Зберегти як» (Save As), зображення в ярлику буде відповідати зображенню ярлика браузера призначеного в операційній системі «За замовчуванням».

Як кілька зображень зберегти в одному файлі ICO?

Формат ICO є контейнером, в який можна упакувати декілька зображень. Якщо відкрити файл з розширенням ICO в Багатоформатна вюверів, то можна побачити всі ці зображення у вигляді багатосторінкового документа.

Природно, що всі спеціалізовані програми для створення іконок теж можуть працювати з кожним окремим зображенням включеним в файл формату ICO.

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

Я для цього використовував першу-ліпшу в мережі безкоштовну програму - IcoFX. До всього іншого, програма виявилася мультимовної.

У наведеному прикладі, я буду використовувати саме цю програму, щоб створити іконку в форматі ICO (точніше, створити іконку і кілька ярликів).

* Маленька довідка. На сьогоднішній день, остання версія програми IcoFX не підтримує створення ярликів розміром понад 254х254 пікселів. Але, це може мати значення тільки при створенні великих системних ярликів (512х512px.) Для останніх версій MAC ОС.

Деякі браузери, наприклад Firefox, можуть показувати анімовані ікони.

Щоб анімовану іконку побачив браузер, потрібно додатково розмістити на хості файл у форматі GIF-анімації і прописати відповідний код в цільової Веб сторінці.

Як анімовані ікони відображаються в різних браузерах?

Internet Explorer не побачить файл GIF-анімації і замість нього покаже іконку з файлу в форматі ICO.

Для того щоб іконка, створена в форматі GIF-анімації, показувалася у всіх браузерах однаково, слід перший і останній кадр GIF-анімації також робити однаковими.

Як створити ескіз для іконки і ярликів?

Єдине непонятка. яка кинулася мені в очі, так це інструмент стирання. Щоб стерти непотрібні пікселі (оголити прозорість), потрібно використовувати інструмент Selection і клавішу Delete.

Який розмір і формат вихідних зображень для іконок?

Початкове зображення для іконок і ярликів краще вибрати розміром не менше 256х256 пікселів.

У програму IcoFX можна завантажити зображення в форматах: ico, bmp, jpg, gif, cur, png, icns, jp2. Потім можна згенерувати зображення необхідних вам розмірів і зберегти їх у вигляді файлу з розширенням ICO.

Зображення, що представляє собою GIF-анімацію, можна також спочатку створити в розмірі 256х256 пікселів, а потім зменшити до розміру іконки 16х16 пікселів в тій же програмі, де воно створювалася.

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

Намалювати іконку відразу в розмірі 16х16 пікселів досить складно. Мої спроби в цьому напрямку не увінчалися успіхом.

На зображенні ілюстрація того, як змінюється зображення при ресайз з 256 до 16 пікселів.

Як підготувати зображення для програми IcoFX щоб зберегти прозорість?

Для того щоб зберегти прозорість в програмі Photoshop, потрібно, при збереженні Save For Web, вибрати формат GIF або PNG і поставити галочку Transparency.

(Програма IcoFX розуміє файли і в форматі BMP з Альфа каналом, що також дозволяє зберегти прозорість.)

На зображенні дві іконки на робочому столі, зі збереженою прозорістю і без.

Як створити і відредагувати GIF-анімовану картинку в програмі Photoshop?

В останніх версіях програми Adobe Photoshop немає вбудованої програми Image Ready, однак функція роботи з GIF-анімацією збереглася.

Для створення GIF-анімації досить відкрити палітру Window> Animation.

А ось відкрити зображення в форматі GIF-анімації для редагування трішки складніше.

Для того щоб відкрити файл з GIF-анімацією, потрібно спочатку вибрати команду File> Import> Video Frames To Layers.

Потім у віконці Load ввести повну назву (з розширенням) цільового файлу.

При цьому потрібно мати на увазі, що сам цільової файл, в віконці Load, видно не буде. Тому, точна назва файлу краще скопіювати, наприклад, з вікна Провідника, де його видно буде.

Можна також замість назви файлу ввести "*" (зірочку), і тоді всі файли почнуть відображатися у вікні вибору.

У вікні Video Frames To Layers нічого міняти не потрібно.

Тепер залишається тільки скористатися палітрою Animation, щоб відредагувати анімований GIF.

Як створити файл формату ICO в програмі IcoFX?

На скріншотах ілюстрація найкоротшого шляху при створенні файлу в форматі ICO в програмі IcoFX.

Коли вихідне зображення є, то його можна завантажити в програму IcoFX по команді File> Import Image (Ctrl + M).

Вибираємо вихідне зображення. Я використовував створене в Photoshop-е зображення у форматі PNG (256 кольорів) розміром 256х256 пікселів зі збереженою прозорістю.

Моє зображення має розмір 256х256 пікселів і 256 кольорів, тому я і вибираю ці значення.

Додаємо нове зображення.

Вибираємо параметри. Ставимо птаха в чекбокс "Створити нове зображення з обраного зображення" і вибираємо розмір 48х48 пікселів.

Знову додаємо нове зображення.

Вибираємо вихідне зображення розміром 256х256 пікселів і нове розміром 32х32 пікселя.

Додаємо ще одне зображення в комплект.

Цього разу вибираємо розмір нового зображення рівним 16х16 пікселів, а вихідне зображення залишаємо колишнім - 256х256 пікселів.

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

Зберігаємо результат наших непосильних праць.

Після натискання OK в папці повинен з'явитися файл favicon.ico.

Який HTML код необхідно прописати, щоб браузер почав показувати іконку?

Я слабо розбираюся в коді, але те, що тут написано - перевірено в чотирьох найпопулярніших браузерах: IE 8, Opera 9, Firefox 3, Chrome 2.

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

Кожна сторінка сайту може мати свою індивідуальну іконку і ярлики, якщо це необхідно.

Щоб іконка відображалась як ярлика на Робочому столі і файловим менеджером, потрібно вставити в сторінку наступний код:

Щоб браузер міг показати анімовану іконку, потрібно вставити наступний код:

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

Це пов'язано з тим, що більшості браузерів досить вказати на анімовану іконку, а Internet Explorer, хоча і не бачить favicon.gif. але показує іконку по команді rel = "shortcut icon".

* Favicon - можна замінити довільним назвою (може стати в нагоді при присвоєнні індивідуальних ярликів окремим сторінкам в межах одного сайту).

А що якщо не вставляти ніякої код, а іконку розмістити?

На жаль, інші браузери цей файл просто так не помітять.

Чому в браузері іконка відображається, а ярлик на Робочому столі і в Провіднику - ні?

Якщо для демонстрації іконки використовувати код:

Те, щоб Internet Explorer міг додавати до заслання ярлики при перетягуванні, потрібно додати код:

Як будуть відображатися іконки в браузерах, якщо іконок відразу дві - в форматі GIF і ICO?

Якщо в Веб сторінку вставлений код:

Internet Explorer індиферентний до GIF-у і з самого початку буде показувати іконку в форматі ICO.

Чому браузер не показує вперше встановлену або оновлену іконку?

Відомо, що браузери кешують зображення для збільшення швидкості завантаження сторінки і зниження обсягу трафіку. З цієї причини, щоб побачити іконку на одного разу завантаженої сторінці, потрібно видалити зображення цієї ікони з кешу браузера.

Якщо очищення кеша і перезавантаження сторінки не дали результату, то слід спробувати разом з кешем очистити і інші тимчасові дані і перезавантажити вже сам браузер.

Як очистити кеш популярних браузерів, щоб побачити нову іконку?

Internet Explorer - Сервіс> Властивості Оглядача> Загальні> Видалити> Очистити>

> Тимчасові файли Інтернету.

Firefox - Інструменти> Особисті Дані>

> Очистити Кеш.

Інструменти> Видалити особисті дані> Більш докладні параметри>

> Видалити час відвідування закладок

> Очистити кеш.

Де конкретно зберігаються іконки в кеші різних браузерів?

C: \ Documents and Settings \ Ім'я користувача \ Local Settings \ Temporary Internet Files

C: \ Documents and Settings \ Ім'я користувача \ Local Settings \ Application Data \ Mozilla \ Firefox \ Profiles \ Цифри і букви .default \ Cache

Окремі файли можна розглянути в Файл-менеджері.

C: \ Documents and Settings \ Ім'я користувача \ Local Settings \ Application Data \ Opera \ Opera \ profile \ images

C: \ Documents and Settings \ Ім'я користувача \ Local Settings \ Application Data \ Google \ Chrome \ User Data \ Default \ Cache

Окремі файли можна розглянути в Файл-менеджері.

Подивитися на кешований зображення іконки можна відкривши посилання (тільки без приставки view-cache :).

Відображення іконок в популярних CMS (двигунах).

WordPress - починає демонструвати іконки відразу після додавання коду і закачування іконки на хост. При використанні кеша потрібно його очистити.

Для відображення потрібно очистити кеш форуму.

Приклад вставки коду:

(Тут всякий різний код, який чіпати не потрібно).

Приклад розміщення файлів на хостингу:

Файли favicon.ico і favicon.gif помішані в кореневий каталог сайту.

Відображення анімованих ікон в пошукових машинах.

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

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

Так що, довелося поки прибрати з кореня анімовану іконку в форматі GIF і відповідний запис у Хайдер CMC движків. Крім цього, додав в Хайдер код:

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

Шкода, що Yandex НЕ берет приклад зі старшого брата!

Oksana писала: ... коли пишу статтю в консолі ...

Я в це не вірю, але якщо раптом ... Те, Ви б краще за писанину в консолі хвилювалися, а не за фавікон, якщо, звичайно, ви серйозно так робите. WP тиражує копії, які збирає в базі даних і вона розбухає. Якщо ж заблокувати створення автоматичних копій, то ви зможете в будь-який момент втратити все те, що набрали. Чим Word поганий, вона обидві мови розуміє ...

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