<
  • Главная
Статьи

Як створити фавікон для сайту: корисні поради та сервіси

  1. Як створити фавікон
  2. Як зробити фавікон в Фотошопі
  3. Як зберегти фавікон
  4. Як вставити фавікон на сайт
  5. Як замінити фавікон
  6. Як створити більш складні фавікона

Складно здогадатися, що таке фавікон коли вперше чуєш це слово. Це мініатюрна ікона, яка відображається на вкладках браузерів, в адресних рядках і інших областях, в залежності від операційної системи і інтернет браузера. Його можна сміливо назвати одним з найбільш складних і примхливих елементів в дизайні сайту.

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

Як створити фавікон

Почнемо з розробки дизайну фавікона. Хороший дизайн, незважаючи на свою компактність, повинен відображати всю сутність вашого сайту і бути органічною частиною фірмового стилю. Зазвичай в якості іконки виступає графічний знак (іконка) компанії а не цілий лого (іконка, текст і слоган).

Як фавікона ці вебсайти використовують свої іконки (або близькі до них зображення) Як фавікона ці вебсайти використовують свої іконки (або близькі до них зображення).

Текст в фавікона використовувати не варто, оскільки через маленького розміру зображення цей текст буде нечитабельним. Винятком з цього правила можуть служити лише всесвітньо відомі текстові символи, які автоматично асоціюються з певними брендом. Наприклад, онлайн-ресурс Wikipedia залишив на фавікона свою велику літеру «W», а Facebook - букву «F».

На цих фавікона присутні букви, які міцно асоціюються з певним брендом
На цих фавікона присутні букви, які міцно асоціюються з певним брендом. Наприклад, Facebook використовує свій графічний знак. Також зверніть увагу на те, що на зображенні Disney видно пікселі. Це пояснюється тим, що скріншот був зроблений на Retina-дисплеї, який сумісний з іконками розміром 16 × 16, в той час як сайти використовують іконки розміром 32 × 32.

Оскільки фавікона це маленькі зображення, кожен піксель відіграє важливу роль. Іноді після зменшення логотипу стають видні окремі пікселі, через що зображення набуває «розмитий» вид. Щоб домогтися чіткості, необхідно редагувати іконку на піксельному рівні.

Щоб уникнути цього потрібно змінити розмір логотипу за допомогою спеціальних редакторів, наприклад Photoshop або GIMP
Щоб уникнути цього потрібно змінити розмір логотипу за допомогою спеціальних редакторів, наприклад Photoshop або GIMP. Спочатку потрібно зменшити розмір зображення до 64х64 пікселів (це найбільший розмір фавіконки). Потім потрібно відредагувати кожен піксель за допомогою інструменту «Олівець», доки знімок не буде чітким. Це трудомісткий процес, але результат того вартий. Коли фавікон 64х64 буде готовий, потрібно виконати ту ж саму роботу з зображенням 16 × 16, 24 × 24 і 32 × 32 пікселів. Стільки розмірів потрібно, щоб зображення правильно відображалося в усіх браузерах і гаджетах:

  • 64х64 - закладки браузера Safari;
  • 32х32 - дисплеї з високою роздільною здатністю (РЕТІНА);
  • 24х24 - закладки браузера Internet Explorer і MicroSoft Edge;
  • 16х16 - Google Chrome і інші браузери.

Як зробити фавікон в Фотошопі

Для початку потрібно створити кілька полотен з вищевказаними розмірами.

Потім потрібно додати іконку, букву або інше зображення на полотно
Потім потрібно додати іконку, букву або інше зображення на полотно.

Потім потрібно додати іконку, букву або інше зображення на полотно

Як зберегти фавікон

Створивши іконки різних розмірів, збережіть кожну з них як прозорий файл PNG (24 біт). У Photoshop можна скористатися функцією «Зберегти для веб», доступною в меню «Файл». Потім необхідно об'єднати всі PNG-файли в один ICO-файл. Можна одночасно використовувати і файли PNG, і файли ICO, але нерідко навіть Safari і Chrome надають перевагу винятково формат ICO. На мій погляд, простіше створити один ICO-файл. Формат ICO не можна назвати дуже поширеним, але, на щастя, існує ряд інструментів, які допоможуть вам конвертувати ваші файли в цей формат. Для цієї мети я вважаю за краще використовувати X-Icon Editor . Це безкоштовний онлайн-сервіс, який миттєво перетворює завантажені зображення в один ICO-файл, після чого ви можете його завантажити. В цьому немає нічого складного, просто дотримуйтесь інструкції на сайті. Якщо ви вважаєте себе відчайдушним людиною, можете поекспериментувати з піксельним редактором цього сервісу і намалювати фавікон самостійно. (Хоча я вважаю за краще редагувати фавікона в більш професійному редакторі, наприклад, в Photoshop).

Завантаживши свої PNG-зображення в редактор X-Icon Editor, на виході ви отримаєте один файл формату ICO
Завантаживши свої PNG-зображення в редактор X-Icon Editor, на виході ви отримаєте один файл формату ICO.

Як вставити фавікон на сайт

Отже, у вас вже є файл формату ICO. Тепер його необхідно додати на веб-сайт. Перейменуйте файл в favicon.ico і розмістіть його в кореневій папці вашого веб-сайту (туди, де зберігається файл index.html і інші стандартні файли). Після успішного додавання ви можете подивитися його за адресою: вашсайт .com / favicon.ico. Практично всі браузери шукають файл favicon.ico в кореневій папці. Тому важливо, щоб ви завантажили фавікон саме в цю папку. Для забезпечення сумісності з різними браузерами, краще не додавати ніякі HTML-елементи або посилання, які вказують на його місце розташування. Цей прийом працює для всіх браузерів, аж до IE6. Також, якщо у вас сайт на WordPress, то в багатьох темах фавікон можна додати в налаштуваннях теми. Цей спосіб також можна використовувати.

Як замінити фавікон

З якоїсь незрозумілої причини браузери додають його в кеш. Тому коли ви завантажуєте новий файл ICO, браузер може продовжувати показувати ваш старий фавікон. Що ж робити в такому випадку? Ви можете додати тимчасовий HTML-файл який вказує на місце розташування вашого нового фавікона. Також в кінець URL необхідно додати коротку рядок запиту:

<Link rel = "shortcut icon" href = "вашсайт .com / favicon.ico? V = 2" />

Так браузер буде думати, що це унікальний URL, і, отже, буде змушений відображати нову іконку. Після поновлення фавікона цей HTML-код можна повністю видалити. Якщо вам потрібно буде внести зміни в фавікон, скористайтеся тим же прийомом, щоразу збільшуючи цифру після «v» у рядку запиту. Таким чином, браузер буде кожен раз сприймати цей URL як унікальний і відображати нову його версію. І не забувайте видаляти HTML-код після успішного оновлення.

Як створити більш складні фавікона

У цій статті я хотів описати універсальний і простий спосіб створення фавікона, які будуть працювати на практично будь-яких платформах. Але в веб-дизайні і розробці немає межі досконалості. Якщо ви хочете навчитися створювати складніші іконки, то можете спробувати використовувати сервіс favico.js . Він дозволяє створювати динамічні зображення з мінливими цифрами. Завдяки такій іконці, ви зможете бачити кількість непрочитаних повідомлень, навіть коли відповідна вкладка не активна. Якщо ви хочете створити анімовані фавікона онлайн, то можете спробувати використовувати генератор фавікона favicon.cc .

Більше онлайн генераторів ви можете знайти тут .

Якщо ви хочете поділитися своїми порадами зі створення фавікона або задати питання, я чекаю вас в коментарях!

Що ж робити в такому випадку?
Ico?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью