Як зробити favicon

Favicon - це невеликий значок, який можна побачити в адресному рядку браузера поруч з URL інтернет-сайту. Ці ж значки з'являються в закладках після додавання туди сайту або на вкладках браузера, де зафіксовані найбільш відвідувані користувачем сторінки. Крім іншого, favicon стає іконкою сайту на робочому столі.

Дивно, що при такій популярності, лише небагато знають, як правильно створити favicon. На заповнення цієї прогалини спрямована ця стаття.

У мережі Інтернет існує безліч ресурсів, за допомогою яких можна зробити favicon в режимі онлайн. До таких належать, насамперед:

• https://favicon.cc/

Іншим способом створення favicon є програма Фотошоп / Photoshop. У цьому випадку, нам знадобиться саме програмне забезпечення, сайт, для якого створюється favicon і особливий плагін, мова про який піде трохи пізніше. Розмір стандартного зображення не перевищує рамки 16х16 пікселів.

Перед початком викачуємо собі на комп'ютер плагін для програми Photoshop, який призначений для створення малюнків у форматі .ico. Зробити це можна за адресою:

• https://telegraphics.com.au/sw/files/ICOFormat-1.6f9-win.zip

На той випадок якщо посилання зміниться то тут:

• https://telegraphics.com.au/sw/product/ICOFormat (посилання праворуч по середині сторінки)

Створення favicon

Початковим етапом створення фавікона є вибір нескладного малюнка. Для прикладу розглянемо картинку розміром 500х500 пікселів. В меню Фотошопа слідуємо по шляху File> New і відкриваємо вибране зображення. Відредагуємо майбутній favicon в стилі нашого сайту, враховуючи його колірну і дизайнерську концепцію.

Після внесення всіх необхідних змін, слід зберегти отриманий фавікон в розмірі 16х16 пікселів. Це робиться таким чином: у розділі Image вибираємо рубрику Image Size і змінюємо там розмір зображення. Підсумкова картинка вийде дуже маленькою, це нам і потрібно.

Далі потрібно зберегти всі зміни. Для цього натискаємо кнопку File і вибираємо Save as a Web. Якщо плагін був встановлений коректно, то він автоматично перейде у формат Windows в новому вікні. У налаштуваннях більшості Інтернет-браузерів за замовчуванням стоїть опція, приймаюча значки з розширенням тільки ico. Тому, ми повинні враховувати це у своїй роботі і встановлювати на свій сайт тільки такі фавікона.

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

У розділі «File» - «Save as a Web» збережіть відредаговане зображення, а в новому вікні вручну, виберіть режим Windows з розширенням .jpg. Файл перетвориться в «favicon.jpg». далі на догоду веб-браузерів ми повинні змінити розширення на .ico. Для цього достатньо просто перейменувати файл: «favicon.ico» замість «favicon.jpg». в цьому випадку пам'ятайте, що при спробі завантажити файл на сайт, система задасть Вам питання «Are you sure you want to change the extension from« .jpg »to« .ico »?», правильну відповідь на який говорить «Use .ico» .

Завантаження файлу favicon.ico

Фавікон завантажується на сервер сайту. Адміністратор повинен зберегти його в коневую директорію, в те місце, де зберігатиметься файл «Index». Дуже важливо не допустити розміщення в каталозі або інших папках. Якщо все було зроблено коректно, і ім'я файлу звучить як «favicon.ico», веб-браузер знайде його і автоматично виведе в адресний рядок. Для підстраховки можна прописати HTML-код після тега «head».

Тестування.

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

Усунення неполадок.

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

Браузер «Microsoft IE 6» для «Windows» не відображує фавікон. Відомо, що ця програма не відображає іконку до тих пір, поки сайт бракуватиме в розділі «Вибрані». Вирішити це можна і по-іншому. Перейдіть до адресному рядку, клікніть на існуючу іконку, а після цього на «jiggle». Тепер обновіть сторінку, все має працювати.

При таких проблемах з «FireFox», потрібно очищення кеша і перезавантаження браузера.

«Опера» також потребує перезавантаження.

Трохи складніше справа йде з браузером

У «Опера» просто обновіть сторінку. «Internet Explorer 7». Тут слід набрати код

Після цієї дії, сайт повинен працювати коректно.

Удачі!