У меня есть значок с размерами height = 26px/width = 20px с именем favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
Однако в моем браузере мой favicon.png искажен.
Вопрос: Является ли мой favicon.png определенным размером? Кроме того, могу ли я использовать нестандартный размер/размер, и если да, то как?
Предполагается, что favicon представляет собой набор изображений 16x16, 32x32 и 48x48 в формате ICO. Формат ICO отличается от PNG. Неквадратичные изображения не поддерживаются.
Чтобы создать значок, по многим причинам, описанным ниже, я советую вам использовать этот генератор favicon. Полное раскрытие: я автор этого сайта.
Фавикон должен быть квадратным. Настольные браузеры и Apple iOS не поддерживают не квадратные значки.
Фейвикон поддерживается несколькими файлами:
favicon.ico.Чтобы получить наилучшие результаты для настольных браузеров (Windows/IE, MacOS/Safari и т.д.), вам необходимо объединить оба типа значков.
favicon.icoХотя все настольные браузеры могут иметь дело с этим значком, это в первую очередь для более старой версии IE.
Формат ICO отличается от формата PNG. Этот момент сложный, потому что некоторые браузеры достаточно умны, чтобы правильно обрабатывать PNG-изображение, даже если он был неправильно переименован с расширением ICO.
ICO файл может содержать несколько изображений и Корпорация Майкрософт рекомендует размещать 16x16, 32x32 и 48x48 версии значка в favicon.ico.
Например, IE будет использовать версию 16x16 для адресной строки, а 32x32 - для ярлыка панели задач.
Объявите значок с помощью:
<link rel="icon" href="/path/to/icons/favicon.ico">
Однако рекомендуется разместить favicon.ico в корневом каталоге веб-сайта и не объявлять его на всех и пусть современные браузеры выбирают значки 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, а также определяет значок 192x192 PNG.
Microsoft определяет изображение плитки и browserconfig.xml.
Создание знака, который работает повсюду, довольно сложно. Я советую вам использовать этот генератор favicon. Полное раскрытие: я автор этого сайта.
16x16 пикселей, *.ico.
Я использую faviconit.com для лучшей поддержки браузеров и устройств. Вы загружаете изображение, и этот сайт предоставляет вам код, преобразованные изображения и файл browserconfig.
Мы могли бы просто загрузить фавикон вручную на наш веб-сайт размером 16x16, и он, вероятно, будет отображаться практически в любом браузере.
Но когда вы отметите его как один из ваших любимых на смартфоне или планшете, нам потребуются изображения большего размера (от 60x60 до 144x144).
И скажем, один из наших пользователей создает ярлык на своем рабочем столе. В этом случае 196x196 выглядит лучше!
Пример кода того, что вам даст faviconit, рядом со всеми преобразованными изображениями:
<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
Но это еще не все. Начиная с Windows 8 мы можем создавать ярлыки для сайтов с плитками!
<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
Загрузите файл с именем browserconfig.xml (чтобы включить плитки в windows> 8)
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
Wikipedia говорит следующее:
Кроме того, такие файлы значков могут быть размером 16 × 16 или 32 × 32 пикселя, и либо 8-битный, либо 24-битный цвет глубины (обратите внимание, что файлы GIF имеют ограниченный, 256 палитр цветовой палитры).
Я думаю, что лучший способ - использовать 32x32 gif и протестировать его с разными браузерами.
Самое простое решение - использовать одно (!) Изображение PNG (в 2019 году).
Просто добавьте это в заголовок вашего документа:
<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="apple-touch-icon" href="/img/icon-196x196.png">
Последняя ссылка для Apple (домашний экран), вторая для Android (домашний экран) и первая для остальных.
Обратите внимание, что это решение НЕ поддерживает "плитки" в Windows 8/10. Он поддерживает изображения в ярлыках, закладках и вкладках браузера.
Нет, вы не можете использовать нестандартный размер или размер, так как это может нанести ущерб браузерам людей везде, где отображаются значки. Вы можете сделать это 12x16 (с четырьмя пикселями белого/прозрачного дополнения на 12-пиксельной стороне), чтобы сохранить пропорции, но вы не можете увеличить (ну, вы можете, но браузер будет сжимать его).
favicon.ico - 16x16
<link rel="shortcut icon" href="favicon.ico"/>
И я использую эти, чтобы быть красивыми в мобильных и планшетах:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">
Очень важно использовать имя "favicon.ico" в корне, потому что многие браузеры попытаются найти его в первую очередь.
Кажется, что ваш файл должен быть .ico.
Проверить этот пост о favicons:
Значок для веб-сайта обычно должен быть *.ico файлом и может быть 32x32 или 16x16. Использование нестандартного размера не будет работать во всех браузерах и будет выглядеть искаженным, как вы сами видели. Попробуйте и конвертируйте это изображение с помощью этого сайта: http://www.favicon.cc/, а затем попробуйте его использовать.
формат выбранного изображения должен быть 16x16 пикселей или 32x32 пикселей, используя либо 8-битные, либо 24-битные цвета. Формат изображение должно быть одним из PNG (стандарт W3C), GIF или ICO. - Как добавить иконку на свой сайт - QA @W3C
Формат значка должен быть квадратным, иначе браузер растянет его. К сожалению, Internet Explorer < 11 не поддерживают .gif или .png типы файлов, но только формат Microsoft.ico. Вы можете использовать какое-то приложение "favicon generator", например: http://favicon-generator.org/
<link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/>
Чтобы помочь мне, я использую этот генератор https://realfavicongenerator.net/ Это дает много вариантов и помощников. Поэтому вы не беспокоитесь о своем значке.
Если у вас есть доступ к Photoshop, проверьте это:
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
В этом учебном курсе ссылки на плагин, который позволяет Photoshop сохранять файлы ico изначально, а затем предоставляет информацию о стандартах favicon.
Когда я впервые начал делать значки, это был 16x16 8-битный файл ico. Если вы хотите, чтобы favicon работал в большинстве браузеров, я бы придерживался этого.