Іконка сайту.
- Що таке іконка сайту? Для початку розберемося, що таке ікона сайту і де ми її можемо спостерігати....
- Як самостійно виготовити файл favicon.ico?
Що таке іконка сайту?
Для початку розберемося, що таке ікона сайту і де ми її можемо спостерігати. Іконка сайту це невелике зображення 16х16 пікселів в форматі ico. яке можна побачити в адресному рядку, "закладках", "обраному" "історії", заголовках сторінок в браузерах,
а також в результатах пошуку пошукової системи Яндекс
Іконки сайтів так само можна побачити в деяких каталогах сайтів, сервісах аналітики і статистики сайтів, RSS стрічках .. і інших місцях безкрайніх просторів мережі Інтернет.
Основне призначення піктограми це виділення Вашого сайту з маси інших ресурсів. Красива іконка робить сайт унікальним, оригінальним, привертає увагу користувачів, а так само робить сайт більш запам'ятовується, так що поставтеся до створення іконки сайту належним чином, вже чого точно не варто робити, так це нехтувати створенням іконки зовсім, тим самим, дозволяючи браузерам ліпити навпаки Вашого сайту свою стандартну, нудну піктограму.
Як підключити іконку до свого сайту?
Для того щоб вказати іконку для сторінки сайту необхідно пов'язати цю сторінку з підключається зображенням - іконкою, за допомогою тега <link>.
Нагадаю, тег <link> має атрибути:
- href - Шлях до файлу.
- rel - Визначає відносини між поточним документом і файлом, на який робиться посилання.
- shortcut icon - Визначає, що підключається файл є іконкою.
- stylesheet - Визначає, що підключається файл містить таблицю стилів.
- application / rss + xml - Файл в форматі XML для опису стрічки новин.
- type - MIME тип даних підключається файлу.
І пишеться в голові документа між тегами <head> </ head> отже вся запис разом набуває такого вигляду:
<Head>
<link rel = "shortcut icon" href = "favicon.ico" type = "image / x-icon">
</ Head>
Де favicon.ico назва іконки лежить в кореневій папці сайту.
До речі іконку для сайту прийнято називати саме favicon.ico і розташовувати в кореневій папці поруч з головною сторінкою сайту, справа в тому що якщо іконка буде називатися favicon.ico і лежати в корені сайту то для більшості браузерів цього вже цілком вистачить щоб відображати Вашу піктограму " за замовчуванням "навіть без рядка:
<link rel = "shortcut icon" href = "favicon.ico" type = "image / x-icon">Однак все ж краще зв'язуйте іконку зі сторінкою сайту тегом <link>
приклад:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Title> Іконка сайту </ title>
<link rel = "shortcut icon" href = "../ graphics / favicon.ico" type = "image / x-icon">
</ Head>
<Body>
<H1> Моя улюблена сторінка! </ H1>
<P> Ця сторінка використовує індивідуальну іконку у вигляді сердечка. </ P>
</ Body>
</ Html>
У цьому прикладі на сторінку ми підключаємо іконку, яка лежить на рівень вище від документа в папці graphics. Таким способом кожної окремої сторінці сайту можна призначити свою власну піктограму.
Як самостійно виготовити файл favicon.ico?
Спосіб перший:
Знайти в Інтернеті готову відповідну іконку в колекціях іконок ..
Спосіб другий:
Виготовити іконку з допомогою будь-якого онлайн сервісу. Найбільш популярним сервісом, що створює іконки для сайту, в російськомовному Інтернеті, є ресурс www.favicon.ru
Все просто заходите на даний ресурс, завантажуєте велику розміром зображення (бажано квадратний) тільки вагою не більше 300кб .. ну наприклад логотип сайту, тиснете кнопку "Створити favicon.ico" на виході завантажуєте зменшену копію цього зображення 16х16 (а так само за бажанням 32х32 і 48х48) пікселів в форматі ico. Досить зручний ресурс дозволяє швидко створювати іконки прийнятної якості.
Ну і третій спосіб:
Найкраще, звичайно, намалювати іконку самостійно, в якій кожен піксель буде саме таким яким Ви бажаєте його бачити. Однак більшість популярних графічних редакторів типу фотошопа не бажають зберігати зображення у форматі ico .. Але не біда !! В Інтернеті гуляє маса редакторів іконок хороших і не дуже, платних і безкоштовних, функціонально простеньких і моторошно наворочених.
Особисто я користуюсь не сильно хитрою програмою - редактором іконок, але користуюся їй не так, як задумували автори .. Я спочатку малюю іконку в звичному мені фотошопі, зберігаю її в форматі jpg, потім відкриваю це зображення за допомогою цієї нехитрої програми і зберігаю його ж вже в форматі ico. Коротше використовую програму в якості "конвертора", а не графічного редактора .. програмка називається IcoFX втім, як уже сказано вище існує купа інших програм, так що не варто зупинятися саме на цій !! Це я до неї призвичаївся, а Ви, може бути, знайдете, що ні будь зручніше для себе.
Що таке іконка сайту?
Ico?
Що таке іконка сайту?
Як підключити іконку до свого сайту?
Ico?
