/ 

Продвинутые favicon для сайта

Фавиконки, хм… это такая штука, которой всегда нет. За свою карьеру только в 3-4 проектах была иконка. Последний раз она мне потребовалась на этом сайте и я погрузился в поиск информации о том, как правильно подключать иконки и каких размеров они должны быть.

После чтения я понял, что иконок и их размеров нужно много:

  • Для Internet Explorer рекомендуются размеры 16×16, 32×32 и 48×48 в формате favicon.ico.
  • Для iOS, Apple установила специальные имена и разрешения, желательно не меньше 180×180.
  • Хром под Android в первую очередь использует манифест и так-же опирается на Apple touch icon.
  • IE 10 под Windows 8.0 требуется PNG изображение и цвет фона. IE 11 под Windows 8.1 и 10 принимает несколько PNG картинок объявленных в XML файле browserconfig.xml.
  • Safari под Mac OS X El Capitan требует SVG иконку для закрепленных табов.
  • Некоторые другие платформы смотрят PNG файлы с разными разрешением, к примеру 96×96 для Google TV или 228×228 для Opera Coast.

Полный список можно посмотреть по ссылке (en) с объяснениями.

Real Favicon Generator

К счастью, сервис Real Favicon Generator генерирует иконки и дополнительные файлы к ним. После этого останется вставить их к себе на сайт.

Real Favicon Generator Logo
Real Favicon Generator Logo

Рекомендую загружать картинку 512×512 и генерировать иконки из неё. Есть возможность выбрать сжатие и тип масштабирования. А если вам нужна отдельная иконка, то вы можете заменить некоторые файлы самостоятельно.

Так выглядит иконка старой версии этого сайта, сгенерированная через сервис:

Иконка закрепленной вкладки в Safari сайта ymatuhin.ru
iOS, Android, Windows 8 фавиконка сайта ymatuhin.ru
iPhone фавиконка сайта ymatuhin.ru
⌘ ⌘ ⌘
Поделиться
Отправить
Отзыв и мини обзор iOS 9 и OS X El Capitan (public beta)
Блог

Отзыв и мини обзор iOS 9 и OS X El Capitan (public beta)

Как установить iOS 9 и El Capitan. Основные нововведения и личный опыт использования новых ОС.

Как называть переменные
Фронтенд

Как называть переменные

Мой взгляд на соглашения наименования переменных, функций, методов и классов

Плавный, нативный скрол
Фронтенд

Плавный, нативный скрол

Выкиньте лишние библиотеки для прокрутки внутри страницы

Адекватное подчеркивание ссылок
Фронтенд

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline