Иконка сайта. В чем отличие формата ICO и PNG?
Верстка, HTML, CSS
Salomoon Залишити коментар
О favicon стало известно уже давно. Сайт выглядит лучше в окне браузера, если у него есть иконка, которая отображается первой на вкладке, далее идет описание сайта title.
С самого начала задумали использовать специальный формат изображения ICO, размер картинки которого составляет 16 х 16 пикселей. Для того чтобы прописать в HTML коде, что иконка для сайта есть применяется специальный код, который я приведу ниже. К тому же следует отметить, что инициализация favicon и сейчас, в конце 2019 года прекрасно поддерживается всеми браузерами. Не смотря на поддержку ico технология считается устаревшей. Вот код, который инициализирует технологию favicon посредством файта *. ico:
<link rel="shortcut icon" href="https://example.com/img/favicon.ico"> <link rel="icon" type="image/ico" href="https://example.com/img/favicon.ico">
Всего эти 2 строчки в блоке head и правильно подобранная иконка давали приличный результат.
К сожалению формат ико уже не поддерживается некоторыми современными браузерами для мобильных устройств. Например Google Chrome for Android
Как видите, здесь сайт про ремонт и строительство имеет картинку – она в формате png. А вот другие сайты иконки не показывают – хотя она там имеется в старом формате ICO.
Почему стоит всё еще поддерживать формат ICO
В основном для поддержки старых браузеров, таких как Mircosoft Internet Explorer. До 11 версии формат PNG в Internet Explorer не поддерживался.
Формат PNG начал активно использоваться при появлении HTML5. в нём есть атрибут sizes, который указывает, какие есть размеры картинок в формате png. Браузер или устройство смотрит, какие есть картинки и подбирает наиболее подходящее для своей платформы.
Использование формата PNG
Для подключения формата PNG тоже нужно прописать в коде всего пару строчек.
Выглядять они вот так”
<link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-32x32.png" /> <link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-192x192.png" /> <link rel="apple-touch-icon-precomposed" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-180x180.png" /> <meta name="msapplication-TileImage" content="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-270x270.png" />
Если вы успользуете популярную систему управления сайтом, например Вордпресс – то эти строчки создаются автоматически, вам всего лишь нужно выбрать в определённом месте картинку правьльных размером. Остальные размеры изображения будут созданы автоматически.
Так же иконки сайта используются для изображения в плитках – такие возможности появились в новых версиях Microsoft Windows. Для фона плитки в коде тоже можно указать цвет <meta name="msapplication-TileColor" content="#009900">
Вывод
Если вы создаёте сайт – позаботьтесь о иконке для него.
В совремённом мире информационных технологий принято использовать иконку в формате PNG. Формат ICO является устаревшим.
Favicon — Школа MODX
Вы наверняка обращали внимание на иконки в адресной строке браузеров. Эти иконки называются Favicon (от англ. FAVorites ICON), что в переводе означает «значок для избранного» — значок веб-сайта или отдельной веб-страницы. Яндекс в результатах поиска показывает эту иконку слева от ссылки на сайт, а браузеры в адресной строке и в закладках.
По сложившейся традиции иконка имеет размер 16х16 пикселей в формате ICO, называется favicon.ico и находится в корне сайта. Но иконка может иметь другое название, другой формат и располагаться не в корне сайта.
Допустимые форматы: PNG, APNG, JPEG, GIF (в том числе и анимированные GIF)
Размеры: 16х16, 32х32, 48х48
Цвет: 256 цветов или TrueColor (24-битный цвет)
Многие современные браузеры автоматически ищут в корне сайта файл favicon.
ico и отображают его в качестве иконки сайта. Но положение иконки можно явно указать внутри тега head.
Помещаем значок в любую папку нашего сайта, а между тегами <head> и </head> помещаем следующую конструкцию:
<link rel="icon" href="/путь/имя файла.ico" type="image/vnd.microsoft.icon" />Для иконок с расширением gif:
<link rel="icon" href="/путь/имя файла.gif" type="image/gif" />
Для иконок с расширением png:
<link rel="icon" href="/путь/имя файла.png" type="image/png" />
Таким образом, у каждой страницы сайта может быть своя иконка.
Формат gif позволяет делать анимированные иконки. Но имейте ввиду, не все браузеры поддерживают анимацию. И еще один момент стоит учитывать, чем меньше иконка весит, тем быстрее она будет загружаться. Поэтому, не пытайтесь впихнуть в свою иконку целый анимационный фильм.
Мобильные устройства все больше и больше входят в обиход и это следут иметь ввиду.
Помимо стандартных иконок, вам следует добавить еще четыре:
144×144 пикселя для широкоформатных retina-экранов iPhone и iPad
114х114 пикселя для iPhone и iPod touch
72×72 пикселя для iPad-ов прошлого поколения
57×57 пикселя для других смартфонов, к примеру на Android
Такие иконки должны быть более качественными.
Пример подключения всех иконок будет выглядеть так:
<link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../ico/favicon.png">
Для максимальной совместимости, иконки следует указывать именно в таком порядке.
iOS до версии 4.2 игнорировал атрибут size, поэтому в названии иконки необходимо указать ее размер.
favicon.png против favicon.ico — почему я должен использовать PNG вместо ICO?
спросил
Изменено 2 месяца назад
Просмотрено 352 тысячи раз
Помимо того факта, что PNG является более распространенным форматом изображений, есть ли какие-либо технические причины отдавать предпочтение favicon.png вместо favicon.ico?
Я поддерживаю современные браузеры, все из которых поддерживают избранные значки PNG.
- фавикон
- png
- ico
0
Все современные браузеры (протестировано с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать 
ico <ссылка> . Поэтому, если вы не укажете его явно, лучше всегда иметь favicon.ico , чтобы избежать ошибки 404. Yahoo! предлагает вам сделать его маленьким и кэшируемым.
И вам не обязательно использовать PNG только для альфа-прозрачности. Файлы ICO прекрасно поддерживают альфа-прозрачность (т.е. 32-битный цвет), хотя вряд ли какие-либо инструменты позволяют вам их создавать. Я регулярно использую генератор FavIcon от Dynamic Drive для создания файлов favicon.ico с альфа-прозрачностью. Это единственный известный мне онлайн-инструмент, который может это сделать.
Существует также бесплатный плагин для Photoshop, который может их создавать.
17
Ответ заменен (и превращен в Wiki сообщества) из-за многочисленных обновлений и заметок от других в этой теме:
- ICO и PNG обеспечивают полную прозрачность на основе альфа-канала
- ICO обеспечивает обратную совместимость со старыми браузерами (например, IE6)
- PNG, вероятно, имеет более широкую инструментальную поддержку прозрачности, но вы также можете найти инструменты для создания ICO с альфа-каналом, такие как инструмент Dynamic Drive и плагин Photoshop, упомянутые @mercator.
Не стесняйтесь обращаться к другим ответам здесь для получения более подробной информации.
6
Файлы .png хороши, но файлы .ico также обеспечивают прозрачность альфа-канала, плюс , они обеспечивают обратную совместимость.
Посмотрите, какой тип использует StackOverflow, например (обратите внимание, что он прозрачен):
Устройство apple-itouch предназначено для пользователей iPhone, которые создают ярлык на веб-сайт.
4
Теоретическое преимущество файлов *.ico заключается в том, что они являются контейнерами и могут содержать более одного значка. Например, вы можете сохранить изображение с альфа-каналом и 16-цветной версией для устаревших систем или добавить значки 32×32 и 48×48 (которые будут отображаться, например, при перетаскивании ссылки в проводник Windows).
Однако эта хорошая идея имеет тенденцию конфликтовать с реализациями браузера.
3
PNG имеет 2 преимущества: он меньше по размеру и более широко используется и поддерживается (за исключением фавиконок). Как упоминалось ранее, ICO может иметь значки разных размеров, что полезно для настольных приложений, но не слишком много для веб-сайтов. Я бы порекомендовал вам поместить favicon.ico в корень вашего приложения. Если у вас есть доступ к заголовку страниц вашего сайта, используйте тег, чтобы указать на файл png. Таким образом, старый браузер будет отображать favicon.ico, а новый — png.
Для создания файлов Png и Icon я бы рекомендовал The Gimp.
3
Некоторые социальные инструменты, такие как Google+, используют простой метод для получения фавикона для внешних ссылок, выборки http://your.domainname.com/favicon.ico
Поскольку они не выполняют предварительную выборку содержимого HTML, тег не будет работать.
В этом случае вы можете использовать правило mod_rewrite или просто поместить файл в папку по умолчанию.
3
ico может быть как a png.
Точнее, вы можете хранить один или несколько png внутри этого минимального формата контейнера, вместо обычного битмапа+альфа, который у всех прочно ассоциируется с ico.
Поддержка устарела, появилась в Windows Vista (2007 г.) и хорошо поддерживается браузерами, хотя и не обязательно программным обеспечением для редактирования значков.
Любому допустимому png (полному, включая заголовок) может предшествовать 6-байтовый заголовок ico и 16-байтовый каталог изображений.
GIMP имеет встроенную поддержку. Просто экспортируйте как ico и отметьте «Сжатый (PNG)».
Я делаю так:
png">
И я все еще держу favicon.ico в корне.
1
В любом случае избегайте PNG, если вам нужна надежная совместимость с IE6.
9
html — Favicon Standard — 2022 — svg, ico, png и размеры?
Отказ от ответственности: я являюсь автором RealFaviconGenerator, который, как я ожидаю, будет актуальным (в основном, см.
ниже). Так что не удивляйтесь, если этот ответ совпадает с тем, что генерирует RFG.
Нет универсального значка. Вы не можете создать один значок SVG и ожидать, что он будет работать везде.
С технической точки зрения было бы неплохо использовать один значок SVG. Но с точки зрения UI и UX это нежелательный результат. Сравните iOS и Android. В iOS все значки на главном экране представляют собой квадраты с закругленными углами (iOS заполняет прозрачные области значков Touch черным цветом). На Android значки на главном экране часто имеют неквадратную форму и прозрачность (включая значки приложений Google). Отправьте один сенсорный значок, и Android Chrome будет использовать его. Но вы не сможете соответствовать рекомендациям по значкам Android, тогда как выделенный значок может.
Поэтому я советую сознательно избегать использования одной иконки. Лучше ориентируйтесь на каждую платформу отдельно, когда это возможно (это не всегда так).
iOS Safari
iOS Safari ожидает сенсорный значок.
На сегодняшний день это изображение размером 180×180 PNG. Это изображение не должно использовать прозрачность, и его углы будут автоматически округлены при добавлении на главный экран. Объявлено с помощью:
С годами этот значок стал «значком высокого разрешения по умолчанию» для многих браузеров. Так вы найдете его в другом месте, при добавлении в закладки и т. д.
Android Chrome
Android Chrome использует манифест веб-приложения. Хотя этот манифест не посвящен Android Chrome, в настоящее время он является его основным сторонником. Так что на данный момент все еще вполне безопасно считать значки из манифеста веб-приложения для Android Chrome.
Как следует из названия, манифест веб-приложения предназначен для веб-приложений. Но любой веб-сайт может использовать его как ссылку на некоторые значки.
Android ожидает значок PNG размером 192×192, прозрачность разрешена и приветствуется.
Манифест объявлен с:
Edge и IE 12
Microsoft представила файл browserconfig, XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro.
Файл и цвет фона объявляются с помощью:
Классические настольные браузеры
Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE… Здесь все немного размыто. Исторически существовал единственный файл favicon.ico , который до сих пор поддерживается. Однако самые последние браузеры предпочитают значки PNG, которые легче. Кроме того, некоторые браузеры не могут выбрать правильный значок в файле ICO (этот формат может включать несколько версий значка), что приводит к неправильному использованию значка с низким разрешением.
Можно было бы отказаться от старого favicon.
