Як зробити favicon для свого сайту – База знань Timeweb Community
У цій статті розмова піде про favicon. Використання цього значка стає все більш популярним, і якщо ви хочете, щоб ваш ресурс був сучасним і оптимізованим для пошукових систем та Інтернету в цілому, то у нього обов'язково має бути іконка favicon.
Що таке favicon
Як створити favicon
Якщо говорити про технічні характеристики, то стандартний розмір для фавіконки – 16 х 16 пікселів; також можливе використання зображення розміром 32 x 32 пікселя і дуже рідко 48 х 48. Початковий формат цього знака - ico, але зараз останні версії браузерів підтримують також виведення фавіконок у форматах png, gif і jpeg. Набирає популярності і ще один вид фавіконки – анімована (або динамічна). У цьому випадку це буде не статична картинка, а файл, що змінюється у форматі gif. При виборі такого формату майте на увазі, що на даний момент його висновок підтримується лише двома браузерами: Firefox та Opera, а решта браузерів показуватиме лише перший кадр.
Важливим пунктом під час створення фавіконки є вибір знака, який асоціюватиметься у користувачів з вашим сайтом. Як вихідне зображення можна використовувати логотип компанії, відому емблему, поєднання літер або просто будь-яке відповідне зображення.
Для створення favicon підійде будь-яка графічна програма, у тому числі Paint: все, що вам потрібно зробити, це змінити розміри зображення на 16 х 16 (або 32 х 32) пікселів і зберегти в одному з перерахованих вище форматів.
Також у створенні favicon вам можуть допомогти численні Інтернет-ресурси, на яких ви можете не лише перетворити вибране для фавіконки зображення, а й намалювати цей значоксамостійно, а також вибрати готовий файл із запропонованих.
Ресурси для створення фавіконок:
Отже,загальні рекомендації до favicon наступні: розмір 16 х 16 пікселів або 32 х 32 пікселя, мінімальний розмір (бажано, щоб іконка важила менше 1 Кбайт), формат ico (як найкращий) або png.
Для того, щоб отримати зображення у форматі ico, вам потрібно просто зберегти файл з назвою favicon.ico - можна одразу привласнити це розширення файлу при збереженні або перейменувати файл після.
Як завантажити favicon на сайт
Після того, як у вас з'явився файл favicon.ico із потрібним вам зображенням, слід перейти до завантаження цієї іконки на ваш сайт. Зробити це зовсім нескладно – просто завантажте файл у кореневу папку вашого сайту, використовуючи FTP-клієнт, та веб-браузери, які підтримують показ фавіконки, автоматично самі знайдуть його.
Якщо ви бажаєте розмістити favicon.ico в будь-якій іншій папці, вам слід прописати шлях до цього файлу всередині контейнера :
Тип (type) прописувати необов'язково, але надалі ця інформація знадобиться для налаштування кешування.
Якщо ви використовуєте CMS Wordpress: Ви можете зробити так, як написано вище, або використовувати спеціальний плагін Favicon by RealFaviconGenerator. Ще зверніть увагу на офіційну документацію Wordpress щодо favicon: https://codex.wordpress.org/Creating_a_Favicon
Якщо ви використовуєте CMS Joomla: Вам потрібно завантажити файл у директорію /joomla/templates/ . Офіційну документацію можна знайти в цьому розділі: https://docs.joomla.org/Changing_the_site_favicon
Як оптимізувати favicon
Використовуйте кешування – пропишіть у файлі .htaccess відповідний рядок:
Не забудьте проNginx: перевірте, чи тип файлу ico включено до переліку у файлі конфігурації веб-сервера:
Як додати favicon для портативних пристроїв
Із розвитком технологій іконки стали використовуватися не тільки в десктопних браузерах, але і при виведенні інформації на iOS та Android-пристроях. Як правило, ці значки також використовуються як ярлики на робочому столі. Кожна з них має свої вимоги до відповідного зображення.
Android
Вибір фавіконки для Android пристрою залежить від показника PPI (pixels per inch – пікселів на дюйм); це важливо враховувати, тому що через це одне й те саме зображення може виглядати по-різному на екранах з різним параметром PPI. Загальна таблиця із зазначенням коефіцієнта щільності та відповідного йому розміру фавіконки виглядає так:
Що стосується формату, то зображення мають бути у форматі png.
iOS
На відміну від Android, розмір іконок для iOS пристроїв залежить від наявності Retina та версії операційної системи. У таблиці це виглядає так:
Для того, щоб створити фавіконку для всіх можливих форматів та пристроїв, ви можете скористатися спеціальним сервісом:https://realfavicongenerator.net/.
Спочатку вам потрібно вибрати зображення, яке становитиме основу вашої фавіконки. Воно необов'язково має бути квадратним, але такий формат є кращим. В іншому випадку ви зможете заповнити порожні краї зображення будь-яким кольором (для iOS) або залишити прозорими (для Android). Також RealFaviconGenerator створює іконки для інших платформ (Windows 8 і 10).
Після того, як ви створили потрібні вам зображення, вам потрібно лише скачати архів з зображеннями, що зайшли, завантажити їх в кореневу папку свого сайту і додатизгенерований HTML-код у контейнер.
Тепер ваш сайт має всі необхідні фавіконки, завдяки яким ваш ресурс виділятиметься на тлі інших незалежно від того, з якого пристрою на нього зайшов користувач, і стане добре впізнаваним.