Привіт, шановні Новомосковсктелі. Сьогодні ми з вами познайомимося з одним з елементів розкрутки сайту, а саме з фавікона (favicon). Дізнаємося що це таке, для чого він потрібен і навчимося його створювати і встановлювати на сайт. Також з цієї статті ви дізнаєтеся як зробити його анімованим.
Якщо ви користуєтеся пошуком Яндекса, то Ви, напевно, вже помічали, що пошукова система в пошуковій видачі навпроти деяких сайтів виводить маленькі значки. Ось ці значки якраз і називають фавікона.
Ось так виглядає фавікон в браузері:
А ось так він виглядає в пошуковій системі Яндекс:
Створюємо фавікон.
Тут ви можете вибрати потрібний з більш 175 тисяч готових фавікона. Для цього в лівому меню вибираєте "Latest favicons" (в цьому випадку вони будуть відсортовані за датою створення), або "Top tated favicons" (в цьому випадку вони будуть відсортовані за рейтингом) або вибравши внизу в розділі "Tag Cloud" (хмара тегів ) відповідну тему.
До речі ви також можете створити фавікон з готового малюнка, імпортувавши його зі свого комп'ютера. Для цього з лівого меню вибираєте "Import image", далі натискаєте на кнопку "огляд" і вибираєте потрібний нам малюнок на вашому комп'ютері. Малюнок імпортуєте максимально простий, в іншому випадку вийти безформне пляма розміром 16 на 16 пікселів.
Якщо ж вам нічого не сподобалося, або у вас вже є готова задумка свого фавікона, тоді приступимо до його створення. Весь процес зводиться до зафарбовування квадратиків в різні кольори. Ось як це вийшло у мене.
Відразу під малюнком ви можете вибрати з меню, що випадає періодичність в секундах чергування кадрів. Ще трохи нижче (під кнопкою Delete frame, видалити поточний кадр) розташоване інше меню, що випадає, в якому за замовчуванням вибрано значення loop forever (зациклити чергування кадрів). У цьому меню ви можете вибрати інший параметр, наприклад, вибрати тільки певну кількість чергувань кадрів (до 20-ти).
Ще трохи нижче в розділі "Preview" можна побачити як буде виглядати ваш шедевр в реальному розмірі. Після того, як ви закінчите зберігаєте його до себе на комп'ютер натиснувши на кнопку "Download favicon".
Установка фавікона на сайт.
Установка фавікона на сайт Joomla або Wordpress досить проста. Досить просто скопіювати отриманий файл в кореневу папку вашого шаблону. Для мого сайту на joomla шлях виглядає так:
Скопіювати файл можна підключившись прямого відношення до вебсайту через FTP за допомогою. наприклад, програми filezilla. або за допомогою файлового менеджера, який надає ваш хостинг.
Якщо ви помітили, то google не відображує фавікона сайтів. А в Яндексі фавікон вашого сайту з'явиться не відразу після установки, а після того як пошуковик проиндексирует його. Зазвичай через пару апдейтів пошукової видачі.
Поки пошуковий робот виявить файл фавікона і проиндексирует його може пройти час. Тому для прискорення процесу можна (і навіть потрібно) допомогти роботу в пошуку даного файлу. Для цього на всіх сторінках сайту (зазвичай це робиться в шаблоні сайту) прописуємо приблизно таку строчку між тегами
і :Атрибут type буде різним у залежності від типу файлу фавікона:
- image / x-icon або image / vnd.microsoft.icon для формату ICO;
- image / gif для формату GIF;
- image / jpeg для формату JPEG;
- image / png для формату PNG;
- image / bmp для формату BMP.