Створення favicon.ico

135

Создаем favicon

Інструкція по створенню і розміщенню фавикона

Вітаю всіх!

При створенні сайтів або їх SEO оптимізації, доводиться спілкуватися з людьми різного рівня комп’ютерної грамотності. Ось після одного такого спілкування я вирішив написати статтю, докладно описує всі етапи зі створення фавикона – “..картинки вгорі, там, де назви пишуться..”.
Фавикон (favicon) – це маленька спеціальна іконка, яка відображається у вкладках браузера і знаходиться зліва від заголовка (Title) сторінки. Як фавикона, найчастіше, використовують логотип сайту, зменшений до 16 на 16 пікселів. Нижче наведено приклад сайту, який має фавикон і той, який не має.

Образец сайта с фавиконом и без
Коли хтось додає ваш сайт в закладки, то у нього з’являється іконка (favicon) з назвою сторінки в списку закладок. Це ефективний спосіб виділитися і додати вашому сайту хороший, професійний образ.
Якщо ви досі не надавали цьому особливого значення і ваш сайт не має фавикона, то це просте керівництво допоможе вам створити і розмістити його. Насправді, навіть якщо ви не розбираєтеся в технологіях, створити свій власний значок favicon набагато простіше, ніж ви думаєте.

Керівництво по створенню фавикона

Крок 1: Створюємо свій образ
Якщо у вас вже є логотип або зображення, яке представляє ваш сайт, просто відкрийте цей файл зображення в графічному редакторі, наприклад Adobe Photoshop або Fireworks. Якщо у вас ще немає такого редактора на комп’ютері, є й інші варіанти, такі як редактор онлайн pixlr.com.
Якщо навколо вашого логотипу є багато білого простору, не забудьте обрізати його, а потім вже зменшити до необхідного розміру 16 на 16 пікселів (як я зробив розмір 32 Х 32 і нормально вийшло). Якщо логотип дуже складний по дизайну, і не хоче відображатися в розмірі 16 на 16 пікселів, його можна спростити, або навіть використовувати інше зображення, вдалий про змістом і дизайну, до вашого сайту в цілому. У цьому випадку постарайтеся включити в фавикон основні кольору вашого сайту. Але все ж, краще використовувати логотип сайту.
Після того як ви зменшили розмір зображення до 16 на 16 пікселів, збережіть файл у форматі JPG, PNG, GIF,BMP, або TIF.

Рекомендую до прочитання: Що таке рерайт тексту і як його зробити

Крок 2: перетворити зображення
Тепер необхідно перетворити зображення в файл ICO. Є кілька інструментів, які можна використовувати для досягнення цієї мети. Хороший, безкоштовний генератор всіляких іконок доступний за адресою prodraw.net . Просто завантажте зображення, виділіть розмір значків, і все. Ви можете завантажити новий файл з розширенням .ICO. Але, природно є шлях значно легше:
Просто виділяємо файл, натискаємо правою кнопкою миші, вибираємо перейменувати і міняємо дозвіл JPG, PNG, GIF, BMP, або TIF на ICO (для цього у вас повинна бути активована функція “Показувати розширення файлів” Пуск ->> Панель управління ->> властивості папки ->> Вид ->> зняти галочку в пункті “Приховувати розширення для зареєстрованих типів файлів”).

Крок 3: Завантажте зображення
Тепер, коли у вас є свій файл favicon.ico, вам треба завантажити його в кореневий каталог вашого сайту. Зображення повинно бути видимим, коли ви переходите за адресою http://ваш сайт/favicon.ico після його завантаження (звичайно замінивши “ваш сайт” дійсним ім’ям домену). Не завантажуйте фавикон в папку з зображеннями, таку як: http://ваш сайт/images/favicon.ico !!!

Крок 4: Додавання коду
Більшість сучасних браузерів автоматично визначають наявність фавикона в кореневому каталозі і показують його у вкладці браузера. Тому, особливого сенсу в додаванні коду на ваші сторінки немає, але якщо дуже хочеться, то можна додати прості рядки коду в розділ , щоб всі, без винятку, браузери відображали ваш фавикон належним чином. Нижче наведено код, який вам потрібно додати.

*

* – При копіюванні коду не забуваємо видаляти пробіл після

Майте на увазі, що в розділі вашого веб-сайту будуть і інші елементи, такі як заголовок та мета опису, а також посилання на файли CSS. Наведений вище код можна додати в будь-якому місці між .

Рекомендую до прочитання: Розкрутка веб-ресурсу. Навіщо вона потрібна?

Ну ось в принципі і все, що я хотів з цього приводу сказати.

P. S.

Лайкаем, оцінюємо, твиттим-ретвиттим, репостим і т. д. Взагалі робимо все, що зазвичай не робимо )))) Всім дякую і успіхів !