Файл icon png что это
Иногда я пишу небольшие программы на C++, и часто выходит так, что иконка программы «весит» больше, чем собственно сама программа. Так же вышло и при написании Sound Keeper: программа — 14КБ, иконка 16×16 + 32×32 + 48×48 пикселей — 15КБ. Какое расточительство! К счастью оказалось, что Windows (начиная с Vista) поддерживает PNG внутри ICO. Это как раз то, что нужно! Но почему-то не нашлось программы, которая бы позволила самому оптимизировать файлы PNG и собрать из них файл ICO. Поскольку у файлов ICO очень простой формат, соберём его при помощи FASM. Это нестандартное использование «плоского» ассемблера показывает, что его можно применять в самых неожиданных ситуациях, и это работает!
На этом всё
Теперь и ваши компактные программы могут быть с красочными иконками всех необходимых размеров. Не нужно жертвовать прозрачностью или количеством вариантов иконки. Недостаток только один — пользователи Windows XP не увидят такую иконку. Но если учесть, что официальная поддержка Windows XP уже давно закончилась, и всё меньше компьютеров работает под управлением этой операционной системы, то не так всё плохо. Тем более, что авторы маленьких программ часто для экономии вообще не добавляют иконку.
Программы, которые поддерживают ICON расширение файла
Следующий список содержит программы, сгруппированные по 3 операционным системам, которые поддерживают ICON файлы. Файлы с суффиксом ICON могут быть скопированы на любое мобильное устройство или системную платформу, но может быть невозможно открыть их должным образом в целевой системе.
Советы по оптимизации PNG
Рекомендую использовать программу Color Quantizer для преобразования файлов из PNG32 в PNG8 с альфа-каналом. Результирующий файл помимо прочего сжимается весьма эффективным алгоритмом, поэтому обычно дополнительная оптимизация не требуется.
На скриншоте красным выделен блок с выбором количества цветов и коэффицентом допустимых ошибок квантования. При возникновении описанной выше проблемы с некорректным отображением иконки в диалоге свойств файла, просто поменяйте параметры квантования. Например, незначительно измените значение коэффицента допустимых ошибок квантования.
Поддержка PNG8 с альфа-каналом
Согласно скудной документации, должны поддерживаться только изображения в формате PNG32. На практике система без проблем декодирует и изображения PNG8 даже с альфа-каналом. Разве что только просмотрщик картинок Windows не понимает PNG8 в иконках, видимо он не использует системные функции для декодирования и отрисовки иконки. Но вы же иконки делаете не для того, чтобы их в просмотрщике картинок смотреть, правда? :) Везде, где использутся стандартные функции Windows для загрузки и отображения иконки — PNG8 с альфа-каналом отображается так же, как и PNG32.
Важное замечание: даже у изображений в формате PNG8 в заголовке должно быть указано отсутствие палитры, потому что декодер PNG на выходе даёт TrueColor изображение с альфа-каналом, где могут встречаться любые цвета. То есть в примере вам нужно будет изменять только поля width и height. Остальное трогать не нужно.
Программы, обслуживающие файл ICON
Windows
MAC OS
Linux
Что такое ярлык, значок и иконка:
Я не буду вставлять здесь статью из википедии с заумными фразами и расскажу все своими словами. В интернете есть куча статей на тему того, что есть что, но они только создают большую путаницу и объединяют эти понятия. И так давайте разбираться.
Ярлык: В операционной системе Windows почти все программы и игры запускаются с файла, который заканчивается расширением .exe . Этот файл может быть с любым названием, но заканчиваться он должен именно .exe . Такие файлы называются «исполняемыми». Функция этих файлов заключается в запуске программ (игр)
Это исполняемый файл и именно он запускает игру
Так вот ярлык — это, грубо говоря, телепорт к этому файлу, ну или ссылка. Никому ведь не хочется искать файл с запуском GTAV.exe по всему компьютеру, что бы поиграть в пятую гташечку. Именно поэтому при установке игры или программы в большинстве случаев автоматически создается ярлык на вашем рабочем столе.
Ярлык — это копия файла .exe и их разница в том, что при взаимодействии с ярлыком он обращается к файлу .exe (отличий конечно больше, но это уже совсем другая история)
Так и работаем
Отличить ярлык от исполняемого файла можно, как уже писалось выше, расширением .exe, но беда в том, что по умолчанию в Windows расширения скрыты. Второй способ намного проще, на ярлыке всегда отображается маленькая стрелочка в левом нижнем углу значка (Смотри картинку выше)
Ну, и как вы уже поняли, ярлык — это далеко не иконка, но на ярлык можно поставить иконку.
Иконка: У многих при слове иконка воображение сходу выдает церковные иконы, но мы сегодня говорим не про них. Итак, в каждом исполняемом файле (это тот что заканчивается на .exe если кто забыл) содержится иконка. Иконка — это файл с расширением .ico, а ico — это сокращение от слова Icon, то есть иконка в переводе на Русский. В общем, это все, что нам нужно знать о том почему иконка так называется.
На вопрос, «что такое иконка?» многие отвечают банально — это значок. Нет, батенька, иконка — это не значок, иконка — это картинка (изображение), а еще точнее — это группа изображений. В одном файле .ico может содержаться куча изображений. Разница этих изображений в размере и используемом количестве цветов. Например: самые используемые размеры иконок в Windows 16x16 32x32 48x48 и 256x256 пикселей, но встречаются и совершенно другие.
Так выглядит файл Ico (иконка)
Это было необходимо для того, чтобы при смене вида (например в папке) с «список» на «крупные значки» вы видели не мелкие бздюльки, а крупную красивую картинку
В новых версиях операционной системы отпала необходимость создавать иконки всех возможных размеров. Теперь достаточно одной картинки большего размера и система сама подгонит ее под нужный размер.
Сейчас самый популярный размер иконок это 512x512 пикселей. Как многие пишут, в Windows 10 максимальный размер иконки 256x256, но на больших экранах размер 512x512 будет выглядеть лучше. Так же не стоит забывать про сторонние программы, которые используют иконки. Для смены иконок в сторонних программах используется формат .PNG
Значок: Ну и давайте попробуем разобраться, что такое значок. Как вы уже поняли, многие ошибочно называют значком иконку, а иконку значком.
В интернете нет точного определения, что такое значок, но есть куча статей, вводящих в заблуждение и рассказывающих все так, будто значок и иконка — это одно и то же. Но как значок может быть иконкой, если иконка — это файл Ico? Даже иконку в формате PNG не совсем корректно называть иконкой, так как файл содержит всего одно изображение. Но с иконкой в формате PNG это еще хоть как-то вяжется с логикой, а со значком, ну никак.
В моем понимании, значок — это все вместе. Картинка, которая отображается и надпись под ней + информация о файле при виде «таблица, плитка и содержимое». Почему именно так? При нажатии на ярлык, папку или любой файл вокруг картинки и текста мы видим рамку. Так вот, рамка -это и есть границы нашего значка.
Обратите внимание на границы значков
Значок может существовать как без картинки (иконки), так и без текста, но без рамки, никак.
И такое бывает
Это дает нам право говорить, что значок — это все вместе и называть только отображаемую картинку значком неправильно. Так же можно заметить, что значок необязательно должен быть квадратной формы. Какое бы отображение значков мы не выбрали на вашем компуктере: что список, что крупные значки, что любой другой, у всех разная форма, а как мы знаем, иконка должна быть квадратной формы. Даже, если холст иконки будет прямоугольным, то Windows сама растянет иконку до квадрата.
Как мы видим, есть очень много нюансов, которые не позволяют нам называть значки иконками, но все эти термины ходят вокруг да около. Вот и получается путаница, но по сути это разные вещи. В тех же поисковиках, ища иконки, люди вбивают слово значок или ярлык (и это еще в лучшем случае), а потом удивляются, что не нашли то, что искали. Да и сама Microsoft грешит путаницей и предлагает заменить значок, а не иконку.
Давайте подведем итог:
Ярлык — это тот же .exe файл, но работающий удаленно (прим. с рабочего стола), но при выполнении операций, обращающийся к основному файлу (прим. в папке с игрой).
Иконка — это картинка или набор картинок разного размера, содержащиеся в файле .ico
Значок — это папка, ярлык или любой другой файл, которые могут содержать изображения (иконку),текст и информацию о файле.
Почему иконки нужны, почему иконки важны:
Надеюсь с терминами мне удалось все разъяснить и сейчас я объясню почему иконки важнее, чем может показаться.
Многие скажут, мол, сколько пользуюсь компудахтером, даже не обращаю внимания на то, какие в системе иконки и вообще мне со стандартными норм, и будут от части правы. С виду, действительно, неважно какая у вас иконка, ведь программа или игра будет работать одинаково, что со стандартной, что с новой.
Но есть все-таки у качественных иконок пару не совсем очевидных плюсов. Все мы знаем, что человек любит глазами. При взгляде на то что нам нравится, у нас невольно поднимается настроение или мы получаем удовольствие. Нам нравятся клевые тачки, красивые девушки, картины, природа, крутые и стильные девайсы и куча чего еще.
Почему многие так восхищаются айфонами? Можно услышать такие ответы как: он как продолжение твоей руки, в нем все на своих местах, отлично работает, стильно выглядит и им просто хочется пользоваться. На ютуб канале
Как тебе такой интерфейс Илон Маск
Что то не айс да? И куда тянется ваш палец? первым делом на значек однокласников, даже если вы ими не пользуетесь. Понимаете в чем разница?
А теперь взгляните на картинку ниже.
Я думаю все согласятся, что новые иконки выглядят куда приятнее и запускать такие игры вы будете явно чаще.
Есть куча программ для систематизации и сортировки ваших значков, упрощение запуска или просто для стильного отображения.
К примеру, всем известную и работающую с незапамятных времен легендарную RocketDock. Эта небольшая программка, которая зарекомендовала себя только с лучшей стороны. Она позволяет создать на рабочем столе панель для быстрого запуска игр и программ. Стильно компактно и нетребовательно к системе.
Нестареющая классика RocketDock
Есть у нее отличный клон ObjectDock, для тех кому мало одной панели. Можно сделать одну сверху, а вторую снизу (для игр и программ)
Также расскажу вам про одну программу под названием XLaunchPad. Эта программа, по моему скромному мнению, лучшая вещь для стилизации значков вашего рабочего стола. Удобная, красивая, многофункциональная. Она позволяет двойным кликом по рабочему столу открыть окно, в котором будут все ваши значки с играми и программами. В сочетании с качественными иконками это выглядит просто божественно. Особенно, когда иконки всех игр выглядят в одном стиле, это похоже на вашу полку с дисками на столе только в 1000 раз красивее и удобнее (еще и пыль не собирает). Программу даже можно приобрести в Steam
Вот такая красота появляется по двойному клику
А вот так бы она выглядела со стандартными иконками
Уже не так приятно, да?
К сожалению, есть у этой программы и один недостаток. Недостаток в том, что разработчики плевать хотели на свой продукт и готовы только грести с него деньги. Есть в программе баг, из-за которого после перезапуска, рандомно слетает иконка, которую вы ранее установили. Я даже как-то писал разработчикам о проблеме, но вместо решения ее, меня просто забанили. В общем пользоваться или нет решайте сами.
Вообще, за время существования операционных систем Windows вышло огромное множество программ для организации ваших значков, но даже эти 3 могут изменить ваш опыт в использовании своего компьютера.
Ну и под конец, для тех, кто захотел изменить свой рабочий стол в лучшую сторону, но не знает где брать иконки.
Проблема в системном декодере PNG
Поддержка PNG в иконках в Windows Vista и новее по умолчанию используется для сохранения только больших иконок размером 256×256. Судя по всему, поддержку PNG внутри ICO тестировали плохо, поэтому есть кое-какие проблемы и обходные пути для них.
Обнаружилась какая-то ошибка в системном декодере PNG, из-за чего конкретный файл иконки может отображаться неправильно в некоторых местах (например, в диалоге свойств файла). Причём минимальное изменение параметров сжатия легко решает проблему.
Я провёл небольшое исследование на файле иконки, которая неправильно отображалась в диалоге свойств файла. Системная функция DrawIconEx имеет 3 режима отрисовки иконки: DI_NORMAL (с альфой), DI_IMAGE (без альфы) и DI_MASK (только маска).
На этом изображении видно как одна и та же иконка вывелась в разных режимах, а под названием RESULT приведено то, как выглядит эта иконка в свойствах файла. Видно, что в режимах DI_NORMAL и DI_IMAGE система отрисовывает иконку правильно. Однако, в режиме DI_MASK вычисленная с целью совместимости маска почему-то сдвинута на три пикселя вправо, а также в первом столбце пикселей появился какой-то мусор — вероятно, следствие неправильной работы с буфером. Иконка в свойствах файла, как видно, имеет серьёзные артефакты как раз по очертаниям некорректной маски. Было бы хорошо сообщить об этой проблеме разработчикам Microsoft, но к сожалению, я не нашёл какого-то открытого баг-трекера.
Как открыть файл ICON?
Отсутствие возможности открывать файлы с расширением ICON может иметь различное происхождение. К счастью, наиболее распространенные проблемы с файлами ICON могут быть решены без глубоких знаний в области ИТ, а главное, за считанные минуты. Приведенный ниже список проведет вас через процесс решения возникшей проблемы.
Шаг 1. Получить IconoMaker
Основная и наиболее частая причина, препятствующая открытию пользователями файлов ICON, заключается в том, что в системе пользователя не установлена программа, которая может обрабатывать файлы ICON. Наиболее очевидным решением является загрузка и установка IconoMaker или одной из перечисленных программ: Adobe Photoshop, GIMP, Perfect Icon. В верхней части страницы находится список всех программ, сгруппированных по поддерживаемым операционным системам. Если вы хотите загрузить установщик IconoMaker наиболее безопасным способом, мы рекомендуем вам посетить сайт и загрузить его из официальных репозиториев.
Шаг 2. Проверьте версию IconoMaker и обновите при необходимости
Если проблемы с открытием файлов ICON по-прежнему возникают даже после установки IconoMaker, возможно, у вас устаревшая версия программного обеспечения. Проверьте веб-сайт разработчика, доступна ли более новая версия IconoMaker. Иногда разработчики программного обеспечения вводят новые форматы вместо уже поддерживаемых вместе с новыми версиями своих приложений. Если у вас установлена более старая версия IconoMaker, она может не поддерживать формат ICON. Последняя версия IconoMaker должна поддерживать все форматы файлов, которые совместимы со старыми версиями программного обеспечения.
Шаг 3. Свяжите файлы Icon Image Format с IconoMaker
После установки IconoMaker (самой последней версии) убедитесь, что он установлен в качестве приложения по умолчанию для открытия ICON файлов. Метод довольно прост и мало меняется в разных операционных системах.
Выбор приложения первого выбора в Windows
- Нажатие правой кнопки мыши на ICON откроет меню, из которого вы должны выбрать опцию Открыть с помощью
- Нажмите Выбрать другое приложение и затем выберите опцию Еще приложения
- Последний шаг - выбрать опцию Найти другое приложение на этом. указать путь к папке, в которой установлен IconoMaker. Теперь осталось только подтвердить свой выбор, выбрав Всегда использовать это приложение для открытия ICON файлы и нажав ОК .
Выбор приложения первого выбора в Mac OS
Шаг 4. Убедитесь, что ICON не неисправен
Если проблема по-прежнему возникает после выполнения шагов 1-3, проверьте, является ли файл ICON действительным. Проблемы с открытием файла могут возникнуть по разным причинам.
1. Проверьте ICON файл на наличие вирусов или вредоносных программ.
Если случится так, что ICON инфицирован вирусом, это может быть причиной, которая мешает вам получить к нему доступ. Сканируйте файл ICON и ваш компьютер на наличие вредоносных программ или вирусов. Если файл ICON действительно заражен, следуйте инструкциям ниже.
2. Убедитесь, что файл с расширением ICON завершен и не содержит ошибок
3. Проверьте, есть ли у вашей учетной записи административные права
Иногда для доступа к файлам пользователю необходимы права администратора. Войдите в систему, используя учетную запись администратора, и посмотрите, решит ли это проблему.
4. Убедитесь, что ваше устройство соответствует требованиям для возможности открытия IconoMaker
5. Проверьте, есть ли у вас последние обновления операционной системы и драйверов
Последние версии программ и драйверов могут помочь вам решить проблемы с файлами Icon Image Format и обеспечить безопасность вашего устройства и операционной системы. Возможно, файлы ICON работают правильно с обновленным программным обеспечением, которое устраняет некоторые системные ошибки.
Растровый графический формат PNG, набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF'а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.
- Полноценная поддержка alpha-transparency – прозрачности. Позволяет сделать участки изображения прозрачными и полупрозрачными.
- Качественный алгоритм сжатия без потери качества. Похожий на LZW, но немного эффективнее.
- Возможность черезстрочной развёртки, причем (в отличии от GIF) как по вертикали, так и по горизонтали одновременно.
- Встроенная гамма-коррекция. Позволяет прикрепить к изображению настройки его отображения, для того чтобы на разных мониторах изображение отображалось точно так же, как и у автора.
PNG vs GIF
Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения:
Практика (как и мнение коллег) показывает, что простые небольшие изображения GIF сжимает лучше. Но, когда речь заходит о больших изображениях, GIF всё же остаётся позади.
Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал, как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного позже).
PNG vs JPEG
А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG'у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на – JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.
В общем, смотрите сами:
UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует – проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% – выигрыш раза в полтора).
Жизнь после Photoshop'а или сжимаем дальше
Во многих ситуациях PNG остаётся вообще незаменимым, так как прозрачность нормально не поддерживается ни одним из альтернативных веб-форматов, а какой простор он открывает дизайнерам и верстальщикам… UPD Кроме того, с учётом специфики формата, для элементов дизайна в вебе – это, наверное, лучшее решение.
Гуглим и качаем – PNGOut. Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.
На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.
- OptiPNG – не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше. UPD но её пользователи утверждают обратное.
- Pngcrush – сам не пробовал, говорят «пытается оптимизировать файл всеми доступными способами», но главное ведь не «как пытается», а «как оптимизирует».
- и ещё ряд утилиток просто вычищающих служебный мусор из файлов.
Adobe Fireworks
Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!
3 версии формата в AF:
PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 – с альфа-каналом, а 24 – без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.
А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF'а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение – PNG-8 в большинстве случаев уделывает и GIF, и PNG-24.
PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop'овским результатом разница в пользу PNG:
И вот всё разнообразие PNG-8 — ради этого стоит устанавливать Adobe Fireworks:
Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.
Вердикт
По-моему, GIF своё уже отжил. Теперь его существование – в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF :).
Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).
Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 – как и раньше, с GIF'ом, смелые эксперименты – залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.
Всем веб-дизайнерам и верстальщикам рекомендую устанавливать Adobe Fireworks и взглянуть на PNG в новом ракурсе.
UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно kmike и @merlin_rterm. В процессе узнал для себя много нового, в частности, специфику сжатия PNG и что JPEG-100 все равно с потерей качества. Большая часть этих интересностей добавлены прямо в тексте статьи, для того, чтобы не отрывать их от контента.
Обновил иллюстрации. К сожалению, сервис, на котором размещены картинки, не хранит PNG, всё равно конвертируя его в JPEG. Но теперь, по крайней мере, качество лучше. Ещё раз повторюсь – моей целью не было сравнивание артефактов, а только килобайты и ещё раз килобайты итоговых файлов.
Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.
Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.
С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?
Каков основной файл фавикона?
Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.
Вопрос: Какого размера должен быть favicon.ico?
A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64x64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
D: Ни один из перечисленных.
Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.
Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:
16х16 на вкладке Chrome. Пока всё хорошо.
Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.
16х16 в панели задач.
16х16 на рабочем столе. Не хорошо.
Когда иконка содержит несколько изображений, результат гораздо лучше.
16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.
16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.
Вопрос: Каково назначение favicon.jpg?
На самом деле, чаще встречается другой файл, favicon.jpg. Люди часто спрашивают об этом.
Что это на самом деле?
A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?
B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.
Ответ: D.
Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:
Так что мы должны объявлять?
Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.
favicon.ico — для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.
Вопрос: Какой формат необходим для поддержки мобильных платформ?
Согласно SmartInsights, больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?
A: favicon.ico. Это работало 15 лет назад, работает и сегодня.
B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.
Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.
Мобильные платформы гораздо более гетерогенны, чем обычные настольные браузеры. Размеры экранов и разрешения очень сильно варьируются и нет преобладающей операционной системы, такой как Windows, как это было во времена появления интернета.
Следствие: не думайте, что мобильный фавикон может быть одной универсальной картинкой или иметь универсальное объявление в HTML коде.
Вопрос: Какого размера должны быть PNG иконки?
A: 96х96 для Google TV
B: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Все перечисленные
Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.
Вопрос: Каков размер Apple Touch icon?
Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.
Ответ: Вплоть до 180х180.
Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.
Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.jpg, менее 4% делают это правильно.
Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.
Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?
A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации, так что любое iOS устройство всё равно их надет.
D: Нет, но.
Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.
Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.
Вопрос: Как объявить плитку для планшетов на Windows 8?
A: Планшет на Windows 8? Что это такое?
B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage.
D: browserconfig.xml.
Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.
Объявление для Windows 8.0 выглядит как-то так:
Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
Плитки сайтов в Windows 8.
Вопрос: Каков размер плитки square150x150logo?
A: 150х150. Вы не умеете читать?
B: Иной.
Ответ: B, 270х270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.
Поздравляем, вы закончили викторину! Как вы это сделали?
Суть этих вопросов — показать какой сложной может быть действительность, несмотря на кажущуюся простоту. Времена, когда фавикон был единственным favicon.ico давно ушли. Но старые привычки сохраняются и могут привести к абсурдным ситуациям. Мы тратим дни на аккуратный отзывчивый дизайн и добавляем только 57х57 Apple Touch icon, подходящий только для старых устройств, которыми сегодня уже почти никто не пользуется.
Знаете, с тех пор как я начал делать иконки для игр, я заметил одну вещь. Геймеры любят компьютерные игры, подписываются на паблики посвященные им, ищут моды, статьи, прохождения и все, что с ними связано. Но одну вещь я никак не могу понять, почему геймеры не интересуются игровыми иконками. Как-никак, они связаны с играми и хоть кто-то должен ими интересоваться, но как оказывается, тема иконок в какой-то параллельной реальности и интересуются ими единицы.
В общем, я тут подумал и решил популяризировать иконки, ну или попытаться. В этой статье я расскажу вам: кто такие эти иконки, зачем они нужны и в чем их отличие от значков и ярлыков. Как оказывается, эти термины путают 90% тех, кто ищет иконки. И это не удивительно, ведь все эти термины +- значат одно и тоже, но не совсем.
Приступим
1. Создаём изображения для иконок в формате PNG. Например, сделаем два изображения с размерами 16×16 и 32×32 пикселей. Сохраним их в файлы icon16.jpg и icon32.jpg соответственно. Оптимизируем на свой вкус своими любимыми инструментами.
2. Следуя документации, создаём файл icopng.asm с примерно таким содержимым:
Опытным путём было установлено, что лучше подключать изображения в обратном порядке, от больших к меньшим. При добавлении большего количества иконок не забывайте исправлять поле с общим количеством изображений в заголовке. Ошибка здесь может привести к самым неожиданным последствиям.
3. Собираем иконку командой:
4. В результате мы получили иконку с изображениями в формате PNG. У меня вместо 15КБ получился файл размером всего 3КБ.
Читайте также: