Краткий ответ
Фавикон должен представлять собой набор изображений 16x16, 32x32 и 48x48 в формате ICO . Формат ICO отличается от формата PNG. Не квадратные изображения не поддерживаются.
Для создания значка по многим причинам, описанным ниже, я советую вам использовать этот генератор значков . Полное раскрытие: я автор этого сайта.
Длинный, исчерпывающий ответ
Фавикон должен быть квадратным. Браузеры для настольных компьютеров и Apple iOS не поддерживают не квадратные значки.
Фавикон поддерживается несколькими файлами:
- A
favicon.ico icon.
- Некоторые другие значки PNG.
Чтобы получить наилучшие результаты в браузерах рабочего стола (Windows / IE, MacOS / Safari и т. Д.), Вам необходимо объединить оба типа значков.
favicon.ico
Хотя все настольные браузеры могут работать с этим значком, он в основном предназначен для более старой версии IE.
Формат ICO отличается от формата PNG. Это сложный вопрос, потому что некоторые браузеры достаточно умны, чтобы правильно обрабатывать изображения PNG,
даже если он был неправильно переименован с расширением ICO.
Файл ICO может содержать несколько изображений, и Microsoft рекомендует поместить версии иконки размером favicon.ico 16x16, 32x32 и 48x48.
Например, IE будет использовать версию 16x16 для адресной строки и 32x32 для ярлыка панели задач.
Объявите значок с:
<link rel="icon" href="/path/to/icons/favicon.ico">
Однако рекомендуется поместить favicon.ico в корневой каталог веб-сайта и вообще не объявлять его и позволить современным браузерам выбирать значки PNG.
PNG иконки
Современные настольные браузеры (IE11, последние версии Chrome, Firefox ...) предпочитают использовать иконки PNG. Обычные ожидаемые размеры 16x16, 32x32 и "как можно больше" .
Например, MacOS / Safari использует значок 196x196, если он самый большой из найденных.
Какие рекомендуемые размеры? Выберите ваши любимые платформы:
Значки PNG объявлены с:
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...
Осторожно: Firefox не поддерживает атрибут sizes и использует последний значок PNG, который он находит . Не забудьте объявить картинку размером 32x32 последней: она достаточно хороша для Firefox, и это не позволит ему загрузить большую картинку, которая ей не нужна.
Также обратите внимание, что Chrome не поддерживает атрибут sizes и имеет тенденцию загружать все объявленные значки . Лучше не объявлять слишком много значков.
Мобильные платформы
Этот вопрос о настольном значке, поэтому нет необходимости слишком углубляться в эту тему.
Apple определяет сенсорный значок для платформы iOS .
iOS не поддерживает не квадратный значок. Он просто изменяет размеры неквадратных изображений, чтобы сделать их квадратными (посмотрите на пример Kioskea) .
Android Chrome использует значок Apple Touch, а также определяет значок PNG размером 192x192 .
Microsoft определяет плитку и browserconfig.xml файл .
Заключение
Создание значка, который работает везде, довольно сложно. Я советую вам использовать этот генератор favicon . Полное раскрытие: я автор этого сайта.