Для початку потрібно визначитися з іконкою. Що вона буде з себе представляти. Потрібно придумати символ, який буде асоціюватися з тематикою сайту або можна використовувати свій логотип (або його частина), якщо він є.
Далі, є кілька шляхів - намалювати, замовити або завантажити (і трохи змінити). Ми підемо простим шляхом ...
Пошук іконки в інтернеті
Існує безліч сайтів, на яких можна скачати іконки та іншу графіку з безкоштовною ліцензією на використання.
Я рекомендую використовувати монохромні (одноколірні) іконки.
Кілька сайтів на допомогу:
game-icons.net - В основному, іконки на ігрову тематику, але можна щось підібрати і для блогу. Пошуку по сайту немає, доведеться шукати вручну. Шукайте за ключовими словами. Сайт англійською мовою.
iconsdb.com - На сайті майже 4000 одноколірних іконок. Є пошук. Англійською мовою.
Вибирайте іконку розміром не менше 70 на 70 пікселів, а для кращого результату, не менше 256 на 256.
Створення іконки (редагування)
Після чого, перед вами з'явиться наступне:
У першому блоці - налаштування для пристроїв на iOS (для техніки від Apple).
За замовчуванням, система iOS заливає прозорий фон чорним кольором. Можна змінити колір заливки, переключившись на «Add a solid, ...» і вибрати колір.
Трохи нижче, можна підігнати розмір самої ікони.
На вкладці «Dedicated picture» Ви можете замінити її на іншу.
У другому блоці - налаштування для пристроїв на Android.
«No change, ...» - залишити без змін (залишити прозорий фон).
«Add a solid, plain background ...» - додати фон. Нижче, так само, можна вибрати колір і підігнати розмір.
«Apply a slight drop shadow, ...» - Застосовуються невеликі тіні, схожі на ті, які є у додатків Google.
«Theme color» - можна задати колір панелі завдань в Андройде.
На вкладці «Options» можна налаштувати ярлик, який буде на робочому столі (Android).
Browser (Браузер). Ветом режимі, коли користувач клацає на посилання, Андроїд Хром поводиться так, як якщо б сторінка була відкрита як і звичайний сайт.
Not specified (Не вказано). Андроїд Хром буде вести себе так, як він зазвичай робить, коли користувач повертає свій пристрій.
Force screen orientation to Portrait. - Примусово відображати як на вертикальному екрані.
Force screen orientation to Landscape. - Примусово відображати як на горизонтальному екрані.
На вкладці «Dedicated picture» Ви можете замінити її на іншу.
У третьому блоці - налаштування для пристроїв на Mac OS і Windows 8, 10.
У Safari 9 для Mac OS X El Capitan реалізовані закріплені вкладки. Ця функція використовує спеціальний значок. Цей значок повинен бути монохромним, а Сафарі зробить все інше.
Use a silhouette of the original image. Works well with pictures with significant transparent regions. - Використовувати силует вихідного зображення. Добре працює з картинками з прозорими областями.
Turn your picture into a monochrom icon. Play with the threshold to get the best result. - Перетворіть свою фотографію в монохромний значок. Для кращої якості, перемістіть повзунок праворуч, до кінця.
No icon. Safari uses the first letter of your domain name to create a default icon. - Без значка. Сафарі використовує першу букву імені вашого домену, щоб створити значок за замовчуванням.
Theme color - можна задати колір теми.
На вкладці «Windows 8 and 10» настройки для Windows відповідних версій.
Користувачі Windows 8 можуть закріплювати ваш сайт на свій робочий стіл. Ваш сайт відображається у вигляді плитки, просто як рідне додаток для Windows 8.
Тут Ви можете побачити як, приблизно, буде виглядати плитка з вашої іконкою.
Use the original favicon as is - Використовувати оригінальну іконку.
Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions. - Використовувати білий силует. Добре працює з картинками з прозорим фоном. Рекомендую використовувати саме цей варіант.
У четвертому блоці - настройки генератора
Перша вкладка - Path - Шлях
I will place favicon files ... - Розміщення файлів в корені сайту.
Друга опція - для розміщення файлів в іншому каталозі. В поле, можете вказати повний шлях до потрібного каталогу. Рекомендую використовувати дану опцію і створити каталог, типу favicon. так як буде 30 файлів для фавіконки.
Друга вкладка - Version / Refresh
Тут можна вибрати метод стиснення вашої картинки.
Вкладка Scaling algorithm
Тут потрібно вибрати алгоритм масштабування для іконки розміром 16 на 16 пікселів. Вибирайте той, де значок найкраще виглядає (як правило, де більше пікселів).
Все досить просто!
Крок 1. Завантажуйте архів, натиснувши на кнопку Favicon package.
Крок 2. Розпакувати архів в корінь сайту або в той каталог, який Ви вказали в налаштуваннях (на вкладці Path).
Крок 3. Скопіювати і вставити вказаний код між
і .Крок 4. Необов'язковий. Можна перевірити іконку, клікнувши на посилання check your favicon.
Якщо вона не відображається, то видаліть кеш сайту і браузера.
От і все! Не дуже складно, але зате захоплююче.