Як створити повний набір favicon вашого сайту для всіх типів пристроїв - CMS Magazine

повний

Веб-сайт значок — важлива деталь вашого сайту. Однак часто про горезвісну 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, існують спеціальні плагіни (про них коротко наприкінці статті). Ми скористаємося онлайн рішенням, яке дозволить зручно налаштувати всі параметри і відразу побачити результат.

RealFaviconGenerator.net

Онлайн-генератор дозволяє на основі всього однієї вашої картинки (бажаний розмір вихідного коду не менше 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. Наприклад, 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, можна скористатися спеціальними сервісами: