Іконка веб-сайту - важлива деталь вашого сайту. Однак найчастіше про горезвісну favicon ми замислюємося в самий останній момент і вставляємо рядок link тега всього з одним варіантом іконки. Іноді вважаємо достатнім покласти файл favicon в корінь сайту, адже сучасний браузер в силах самостійно знайти і підключити вашу іконку. А іноді забуваємо про favicon зовсім.
Favicon для робочого столу
Почнемо зі звичних речей. Практично всі версії десктопних браузерів спираються на іконки формату 16 × 16. 32 × 32 і 48 × 48 в форматі .png або .ico (для старих версій IE тільки .ico).
Favicon для Android
- 36 × 36 - для екранів з коефіцієнтом щільності 0.75
- 48 × 48 - для екранів з коефіцієнтом щільності 1
- 72 × 72 - для екранів з коефіцієнтом щільності 1.5
- 96 × 96 - для екранів з коефіцієнтом щільності 2
- 144 × 144 - для екранів з коефіцієнтом щільності 3
- 192 × 192 - для екранів з коефіцієнтом щільності 4
Андроїд сприймає іконки в форматі .png. а так само спирається на файл manifest.json який може містити в собі ряд різних косметичних параметрів. У разі відсутності можливих варіантів іконки під андроїд, система спирається на іконки apple-touch-icon.
Favicon для мобільних пристроїв Apple
Як і в андроїд, пристрої Apple мають різний PPI для різних пристроїв, в тому числі так звані Retina-екрани. Для різних версій дозволів екрану і версій ОС так само існує ряд різних варіантів іконок:
- 57 × 57 - для iPhone з не ретина дисплеєм і iOS версії 6.0 і нижче
- 60 × 60 - для iPhone з не ретина дисплеєм і iOS версії 7.0
- 72 × 72 - для iPad з не ретина дисплеєм і iOS версії 6.0 і нижче
- 76 × 76 - для iPad з не ретина дисплеєм і iOS версії 7.0
- 114 × 144 - для iPhone з ретина дисплеєм і iOS версії 6.0 і нижче
- 120 × 120 - для iPhone з ретина дисплеєм і iOS версії 7.0
- 144 × 144 - для iPad з ретина дисплеєм і iOS версії 6.0 і нижче
- 152 × 152 - для iPad з ретина дисплеєм і iOS версії 7.0
- 180 × 180 - для iPhone 6 Plus c iOS версії 8.0
Інші favicon
- IE10 під Windows 8 вимагає вказівки кольору фону
- IE11 під Windows 8 і 10 приймає кілька різних варіантів іконок, а так же параметрів настройки спираючись на XML файл browserconfig.xml
- Safari під Mac OS X El Capitan вимагає SVG іконку для закріплених табів
- 96 × 96 - для Google TV
- 228 × 228 - для Opera Coast
І як налаштувати і підключити все це різноманіття?
Логічно припустити, що для підключення всього цього різноманіття favicon треба було б чимало зусиль. На що виникає резонне питання: чи існує інструмент для автоматизації цього процесу? І звичайно ж він існує. Для тих, хто в своїй front-end розробці використовує таск-менеджери такі як Grunt або Gulp, існують спеціальні плагіни (про них коротко в кінці статті). Ми ж скористаємося онлайн рішенням, яке дозволить зручно налаштувати всі параметри і відразу побачити результат.
Онлайн-генератор дозволяє на основі всього однієї вашої картинки (бажаний розмір исходника не менше 260 × 260) створити іконку для вашого сайту для всіх типів браузерів і пристроїв.
Після завантаження іконки ми побачимо сторінку, де зможемо дуже докладно налаштувати нашу іконку під кожну платформу і відразу ж побачити результат.
На вкладці настройки під iOS ми можемо вказати колір фону для іконки, а так само вказати розмір відступів всередині області іконки. Вкладка Dedicated picture дозволяє завантажити інший варіант іконки для конкретного типу пристрою (аналогічно для Android, Windows і Mac OS)
Під андроїд настройки трохи цікавіше. Можна як і в версії iOS вказати колір фону і відступи, також є варіант прозорого фону з фірмовою тінню всіх стандартних іконок цієї ОС. Є можливість вказати конкретне ім'я програми. У вкладці Options ми можемо вказати URL, на який буде вести наш додаток.
Для закріплених вкладок в Safari 9 під Mac OS X El Capitan використовується новий варіант з svg іконками.
З плиткової системою Windows все трохи складніше. Тут вказівка кольору фону строго обов'язково, а колір логотипу в більшості випадків краще вибрати білий.
Кінцеві глобальні настройки можна зробити в останньому вікні опцій. Тут можна вказати свій шлях до каталогу, де будуть лежати всі файли для наших згенерованих favicon, вибрати ступінь стиснення для економії місця, вибрати алгоритм масштабування і т.д.
Впровадження в шаблон
Після підкручування налаштувань під наші потреби, можна нарешті згенерувати іконки. У вікні ми побачимо кілька варіантів підключення іконок. Щоб підключити іконки звичним способом в файл HTML, досить завантажити запропонований архів і вставити спеціально згенерований код між тегами head вашого сайту.
Після чого можна перевірити працездатність ваших favicon тут.
Код для таск-менеджерів Grunt і Gulp
Тепер, коли ми розуміємо принципи генерації favicon, для відображення вашого сайту на різних пристроях, ми можемо автоматизувати цей процес за допомогою таск-менеджерів. Досить після генерації подивитися вкладки Grunt або Gulp. в залежності від того, що ви використовуєте, і докладно вивчити запропонований код, щоб в подальшому використовувати його в своїх проектах і автоматизувати процес генерації без звернення до онлайн ресурсу.
У своїх проектах ми використовуємо Gulp
1. Встановіть плагін gulp-real-favicon
2. Вставте код в свій gulpfile.json
3. Замініть TODO: Path to your master picture на шлях до вашого исходника з якої будуть генеруватися іконки. Наприклад, assets / images / master_picture.png
4. Замініть TODO: Path to the directory where to store the icons на шлях до директорії де будуть лежати ваші сгенерірованни іконки. Наприклад, dist / images / icons
5. Замініть TODO: List of the HTML files where to inject favicon markups на шлях до файлів в які буде вставлений код впровадження favicon. Наприклад, [ 'dist / *. Html', 'dist / misc / *. Html']
6. Замініть TODO: Path to the directory where to store the HTML files на шлях до директорії, де зберігаються ваші HTML файли.
7. Згенеруйте іконки командою
8. Інтегруйте іконки в ваш шаблон
висновок
Такі, здавалося б звичайні дії, дозволять вашому сайту виглядати на різних пристроях ще більш адаптивно.
P.S. ще трохи корисностей
Якщо ви хочете дізнатися як бачать favicon вашого сайту пошуковики Яндекс і Google, можна скористатися спеціальними сервісами:
Де mydomain.com - домен вашого сайту.
Майже на кожному сайті є розділ з відгуками і форма для їх написання. Про необхідність такого розділу пишуть в розумних книжках з проектування інтернет-ресурсів, кажучи про те, що так ви отримаєте зворотний зв'язок від користувачів. Ось тільки у цій зворотного зв'язку є зворотна сторона.
Майже кожної компанії, продуктової, а вже тим більше агентству, часто потрібні копірайтери. Неважливо, чи буде це посаду копірайтера, контент-менеджера, PR-фахівця або простого менеджера, суть часто одна - писати тексти. Незважаючи на гадану простоту, писати хороші різнопланові тексти дано не кожному.
Багато починаючі копірайтери бояться відразу йти в агентство. Вони не впевнені в тому, що зможуть впоратися з навантаженням і взагалі підходять для цієї посади, тому за порадою старших товаришів відправляються на біржі. Сама ідея таких бірж надихає: ти працюєш як фрілансер, будуєш вільний графік, не прив'язаний до місця. Але рожеві окуляри спадають після першого ж замовлення або нескладних математичних вправ.