О смысле значков можно было бы, наверное, написать целую книгу. Но надо же и совесть знать. Поэтому я ограничусь здесь семью абзацами, включая вот этот. Между прочим, этого вполне хватит покамест.

Начнём с того, что графический пользовательский интерфейс современных операционных систем обеспечивает представление каждого объекта, с которым пользователь имеет дело, в виде некоторого значка. Для текста это лист бумаги, для видеоклипа — вид ленты с кадрами или кинокамеры, для компакт-диска — символ кружка с радужной поверхностью, для архива — изображение носителей информации, стянутых тесёмкой или тисками. Почти каждому типу объекта соответствует один и только один значок, и это удобно; например, если значок книги со знаком вопроса на обложке соответствует только файлу помощи, то его уже не перепутаешь с каким-нибудь другим системным файлом, имеющим другое назначение.

Однако из этого мудрого правила есть исключения.

Одно из них — программы. Одна программа отличается от другой куда сильнее, чем рисунок от звукозаписи. Неудивительно поэтому, что всякая нормальная операционная система позволяет программисту внедрить в программу его собственный, специально подобранный значок, который наилучшим образом соответствует функциям программы, и позволяет тем самым отличить её не только от других документов и данных, но и от других программ.

Другое исключение — оптические компакт-диски. Большинство графических интерфейсов позволяют, по меньшей мере, видеть и использовать разные значки для дисков с данными и для музыкальных дисков. Некоторые операционные системы, помимо этого, пытаются считывать значок непосредственно с диска, если он был туда записан создателем, и позволяют, таким образом, вообще все диски отличать друг от друга по виду их значков.

А то исключение, о котором будет говорить мы — это вебсайты, которые и вовсе отличаются один от другого значительным образом... настолько, насколько вообще что-то в мире может отличаться от чего-то: ведь Паутина лишь зеркало мира. И газета в ней отличается от чата, храм отличается от заповедника дикой природы, и все вместе они отличаются от хранилища MP3-файлов или от коллекции японской порноживописи.

Раньше программы просмотра Паутины, бра?узеры, обозначали все вебстраницы одинаковыми значками: в Microsoft Internet Explorer это строчная буква «e» в полукруге псевдоорбиты на фоне листа бумаги, в Netscape — нечто вроде закладки или свёрнутого листа. А теперь появилась удобная возможность назначить своему вебсайту собственный значок. Более того, такой значок можно назначить каждой странице отдельный. К сожалению, многие не пользуются этой возможностью, поскольку по неведению полагают её слишком сложной. Однако, как покажут ответы на нижеследующие вопросы, начать использовать значок сайта очень просто. Куда сложнее остановиться... Уж больно удобная штука.

Шесть терминов

За свою короткую историю значки вебсайтов успели сменить несколько названий, большей частью англоязычных. Эти названия понадобятся тем из вас, кто захочет самостоятельно разыскать какую-либо информацию о значках вебсайтов в Сети.

Icon («значок») — так называются значки вообще. Соответственно, словосочетание "website icon” (или "web site icon”) означает значок вебсайта.

Shortcut icon («значок ярлыка») — это название значкам вебсайтов дали пользователи Internet Explorer, поскольку если в этом бра?узере сцапать избранную ссылку, расположенную в меню (или значок, расположенный слева от адреса) и перетащить его (или её) на рабочий стол, то получившийся ярлык будет помечен значком вебсайта.

Favicon («избр. значок»; этот термин происходит от слова "Favorites”, обозначающего меню избранных ссылок) — название тоже возникло благодаря Internet Explorer и связано с особой ролью файла favicon.ico, о которой мы поговорим несколько ниже.

«Икона», или «иконка» — это название является жаргонной калькой с английского "icon”, которую пытались внедрить в русский язык программисты советской эпохи в период перебоев с переведённой документацией, поскольку так им было проще общаться. В настоящее время этот термин практически не употребляется, поскольку оскорбляет чувства верующих христиан — как православных, так и некоторых других конфессий, почитающих чудотворную иконопись (например, старообрядцев).

«Пиктограмма» — более наукообразный синоним слова «значок». Происходит от термина «пиктография», имеющего греческое происхождение и означающего рисуночную письменность.

«Идеограмма» — ещё более наукообразный синоним слова «значок», на возможность употребления которого указал Артемий Лебедев. Значок является идеограммой, если обозначает не сам изображённый на нём объект, а некоторое более общее понятие, с ним связанное.

Вместо этих шести терминов я буду употреблять простое русское слово «значок», означающее значок. Его же употребляют и в русском отделении Microsoft, поскольку они тоже решили не выделываться.

Как указать значок, соответствующий странице?

Чтобы указать значок, соответствующий странице, достаточно единственного тега HTML:

<link rel="shortcut icon" href="адрес значка" type="image/x-icon">

Тег этот помещается в заголовочной части страницы, то есть где-нибудь между <head> и </head>. В качестве адреса значка указывается URL того файла, в котором значок лежит.

Вот так всё просто. Это главный вопрос и главный ответ. А дальше пойдут просто уточнения разных мелких деталей реализации.

Для чего служит rel в теге <link>?

Тег <link> используется для указания отношений (связей) между той страницей, на которой он находится, и другими объектами Паутины. В данном случае rel="shortcut icon" задаёт форму такого отношения: ссылка указывает на значок для ярлыка страницы.

Указание это обязательно, поскольку с помощью <link> могут указываться адреса не только значков, но и других объектов (стилевые таблицы, почтовые ящики авторов, URL логически близких страниц вебсайта могут также быть упомянуты таким способом); необходимо отличать значок от файлов, имеющих другое назначение, и только правильное указание rel может этому способствовать.

Регистр слов «shortcut icon» не важен; их можно записывать как строчными, так и заглавными буквами.

Для чего служит type в теге <link>?

Для указания MIME-типа. В данном случае «image/x-icon» означает формат файла, содержащий значок в формате Microsoft Windows. Такие значки понимают практически все бра?узеры, способные отображать значки сайтов.

Если к странице подключён значок другого типа, и браузер не умеет отображать значки указанного типа, то он не станет и пытаться скачивать значок из Сети. Таким образом, указание type позволяет экономить время читателя сайта.

Если MIME-тип не указан, то браузеру придётся анализировать строку Content-type из заголовка HTTP-отклика вебсервера, а для этого надо начать скачивать файл. Кроме того, некоторые браузеры могут пренебречь заголовком и счесть значок хранимым в формате Microsoft Windows, даже когда это не соответствует заголовку. Ведь для того, чтобы в заголовке HTTP-отклика стояла строка «Content-type: image/x-icon», большинство вебсерверов нуждаются в соответствующей настройке.

Исходя из этих соображений, type в теге <link> следует указывать при каждом подключении значка к странице.

В чём состоит особая роль файла favicon.ico?

Большинство браузеров, если не находят ни одного тега <link>, который соответствовал бы значку, то полагают, что у страницы нет собственного значка, и поэтому используют для неё стандартный значок страницы (свой для каждого бра?узера).

Но Microsoft Internet Explorer и в таком безнадёжном случае всё ещё дополнительно пытается найти в корне сайта файл с кодовым именем favicon.ico, чтобы достать и использовать значок оттуда.

Некоторые ленивые вебмастеры при виде такого поведения приняли решение отказаться от каких бы то ни было тегов <link>, просто создав по одному файлу favicon.ico на сайт, и покидав их в корень сайта. Это решение не было мудрым, поскольку использование тега <link> даёт три преимущества:

во-первых, файл со значком можно назвать как угодно, а не только favicon.ico;
во-вторых, можно назначить много разных значков нескольким разделам сайта, а не только один и только всему сайту сразу;
в-третьих, и это главное, если значок не прописан в <link>, то его не увидит ни Мозилла, ни Феникс, ни Netscape, ни Konqueror — и вообще ни один браузер, кроме Microsoft Internet Explorer. А это глупо!

В FAQ эхоконференции Ru.HTML.Chainik от 26 апреля 2002 года (а именно, в пункте 2.30) содержится рекомендация создать файл favicon.ico, кинуть его в корень вебсайта, а потом именно его и указывать внутри <link>. Рекомендация эта опрометчива, поскольку если потом возникнет надобность отменить для одной из страниц указание нестандартного значка, то просто убрать соответствующий <link> будет недостаточно: Internet Explorer продолжит по-прежнему успешно находить favicon.ico в корне сайта. Единственным выходом станет переименование файла favicon.ico и изменение кода вообще всех остальных страниц вебсайта, а не только той одной, для которой захочется отменить указание значка.

Исходя из этих соображений, свои значки никогда не следует называть стандартным именем favicon.ico. Помимо всего прочего, оно ещё и плохо соответствует внешнему виду значка, описывая одно лишь его предназначение.

Каков формат значков Microsoft Windows?

ICO-файл Microsoft Windows содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Данные значков хранятся в несжатом виде, то есть цвет каждой точки значка кодируется независимо, и объём файла поэтому получается довольно-таки большим.

Размер значка может быть любым, но тогда вид значка будет дополнительно искажён при растяжении или сжатии в момент приведения к одному из стандартных размеров.

Значки бывают либо в естественном цвете (True Color), либо с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов). Большинство нынешних читателей оборудованы современной техникой и поэтому способны воспринимать на своих дисплеях естественный цвет, так что использование фиксированной палитры в значках сайтов продиктовано одним лишь желанием — уменьшить объём файла, и тем ускорить его скачивание.

Уменьшение объёма файла со значками — это достаточно важное занятие. Поскольку если сохранить в нём несколько значков большого размера, да ещё и в естественном цвете, то объём файла легко может оказаться больше, чем объём той страницы вебсайта, к которой значок относится. А это уже перебор, верно ведь?

Зачем нужен вебсайту значок 16x16? Какие браузеры и где его отображают?

Размер 16x16 является основным стандартным размером значка вебсайта. Значок 16x16 используется браузерами чаще всего.

Для бра?узера Microsoft Internet Explorer пятой версии значок 16x16 является обязательным: если MSIE не обнаружит в файле значок 16x16, файл значка окажется проигнорирован браузером.

Microsoft Internet Explorer отображает значки 16x16 для ярлыков вебсайта, создаваемых читателем, в собственном меню «Избранное» («Favorites») и на своей панели «Ссылки» («Links»). Кроме того, благодаря интеграции Internet Explorer и Windows, перетаскиванием в другие окна ярлыки 16x16 могут быть созданы в области быстрого запуска на панели задач («Quick Launch») или в меню «Пуск > Программы» («Start > Programs») — а также непосредственно в главном меню «Пуск», если действует настройка «Мелкие значки в главном меню». Ярлыки, созданные перетаскиванием в другие папки, тоже имеют размер 16x16 при просмотре папки в режимах «Мелкие значки», «Список» и «Таблица». После перехода по любому из этих ярлыков Internet Explorer начинает отображать значок 16x16 и в поле адреса страницы, слева от её URL. Всё вышеописанное верно только для страниц, находящихся в Паутине — и не работает для локальных страниц на компьютере читателя.

Подобное поведение Microsoft Internet Explorer, кстати, позволяет любому вебмастеру сайта негласно отслеживать тех посетителей, которые заносят его в «Избранное» или иным способом запоминают адрес сайта в виде ярлыка, поскольку только в этом случае происходит обращение за значком на вебсервер. Кроме того, читатель обыкновенно бывает лишён возможности созерцать всё разнообразие значков на всех вебсайтах, по которым перемещается, поскольку не может же он помещать в закладки каждую страницу, которую видит...

Все другие браузеры лишены этого неприятного недостатка, отображая значок 16x16 в строке адреса независимо от наличия или отсутствия сайта в «избранном» или «отмеченном» списке. Зато и других мест, куда этот значок можно впихнуть, у них меньше. Phoenix отображает значки в списке «Bookmarks», Mozilla и Netscape не делают и этого, а Konqueror и Химеру я не видел, поэтому не знаю.

Mozilla (а также Phoenix, и, по-видимому, другие мозиллоподобные браузеры — например, Netscape и Химера) также поддерживают открытие нескольких закладок (tabs) в одном окне (наподобие браузера Opera), отображая значки вебсайтов на корешках таких закладок. Это чрезвычайно удобно, поскольку позволяет быстро ориентироваться при выборе закладки, не тратя время на чтение заголовков страниц — да и многое ли из заголовка уместится на корешке закладки?

Из всего вышесказанного следует вывод, что при создании значка для сайта или страницы главным является размер 16x16, который обязательно будет использоваться массой читателей, и именно его следует прежде всего помещать в ICO-файл.

Если стоит выбор между сохранением значка 16x16 либо в естественном цвете (True Color), либо в формате с фиксированной 256-цветной палитрой, то какой выбор следует сделать и почему?

Следует выбрать естественный цвет, поскольку в данном случае именно это позволит сократить объём файла. Значок 16x16, как легко проверить умножением, состоит как раз из двухсот пятидесяти шести точек. Проще и экономнее поэтому получится напрямую и сразу задать естественный цвет каждой из этих точек, нежели сначала выделить для каждой из них отдельный номер в палитре из двухсот пятидесяти шести цветов, и только потом указать естественный цвет, соответствующий каждому из фиксированных цветов палитры.

Впрочем, это соображение справедливо только для небольшого значка 16x16; если бы речь зашла о значках 32x32 и 48x48, где точек во много раз больше, то тогда, напротив, именно использование фиксированной палитры дало бы существенное (в несколько раз) уменьшение объёма файла.

Для чего нужны значки размером 32x32 и 48x48?

Наряду с основным размером значка 16x16, который используется повсеместно, существует ещё пара стандартных размеров — 32x32 и 48x48. Эти крупные значки используются операционной системой Microsoft Windows для представления ярлыков страниц Паутины на рабочем столе. Кроме того, значки такого размера используются в меню «Пуск» над папкой «Программы», если была выключена настройка «Мелкие значки в главном меню», а также при просмотре любой другой папки в режиме «Крупные значки».

К сожалению, такое использование значков сайта построено на тесной интеграции браузера и операционной системы, поэтому оно начинается только в том случае, если ярлык (URL-файл) был создан перетаскиванием из Internet Explorer. В противном случае значок будет стандартным. Но, даже несмотря на это неприятное обстоятельство, следует помнить, что операционная система Windows и браузер Internet Explorer достаточно широко распространены, так что рано или поздно кто-нибудь создаст и будет рассматривать ярлык вашего вебсайта именно в таком виде и режиме, который предполагает использование значка размером 32x32 или 48x48. Особенно нередко это происходит для популярных и часто обновляемых вебсайтов, поскольку подобные свойства сайта явно повышают привлекательность помещения ярлыка на рабочий стол, для частого (а то и вообще ежедневного) использования его.

Какой размер будет использован — 32x32 или 48x48?

Это зависит от настроек свойств экрана — вкладка «Эффекты», группа «Параметры отображения», пункт «Использовать крупные значки». Если этот пункт включён, то 48x48, иначе 32x32. Использование значков размером 48x48 популярно на дисплеях улучшенной разрешающей способности, где значки 32x32 уже слишком мелки.

Если в файле значка отсутствует изображение, соответствующее необходимому системе размеру, то будет выбрано наиболее подходящее из них, а потом растянуто (или сжато). Такие значки выглядят размазанными, что довольно-таки некрасиво (тем более это верно для тех значков, некоторая часть изображения которых прозрачна, и сквозь неё просвечивает фон рабочего стола); и особенно уродские результаты даёт растяжение значка 16x16 в два-три раза, необходимое для получения крупного значка.

Исходя из вышеприведённых соображений, в каждом из ваших ICO-файлов должно присутствовать по крайней мере три значка: один 16x16, один 32x32, и один 48x48. Тогда и значки всех размеров будут в наличии, и вид их не окажется искажён.

Может ли значок быть не в формате ICO, а в каком-нибудь другом формате — например, в анимированном GIF?

Да, может, если браузер поддерживает подобное. Для этого достаточно изменить MIME-тип и указать адрес GIF-файла:

<link rel="shortcut icon" href="адрес значка.gif" type="image/gif">

Браузеры, которые понимают GIF-значки сайтов (например, Mozilla) будут демонстрировать анимацию в строке адреса, слева от URL, а также во всех остальных местах, где ими отображаются значки. Браузеры, которые не способны на такой подвиг (например, Microsoft Internet Explorer 6), просто не станут скачивать значок этого типа. Именно поэтому следует указывать тип.

Можно ли сделать так, чтобы значок был анимированным GIF там, где это возможно, а в остальных браузерах оставался неподвижным ICO-изображением?

Да, и примером тому эта страница. Такой эффект будет достигнут, если указать два link-тега подряд, один за другим:

<link rel="shortcut icon" href="адрес значка.ico" type="image/x-icon">
<link rel="shortcut icon" href="адрес значка.gif" type="image/gif">

Браузер всегда берёт последний из указанных значков — при том условии, что понимает тип значка. Таким образом, понимающие GIF возьмут GIF, остальные возьмут ICO.

Этот трюк работает и со значками новомодных нестандартных форматов — таких, как MNG. Такие значки надо всегда указывать последними — а перед ними приводить, как минимум, ICO-версию.

ICO-версия должна указываться всегда, поскольку значки других MIME-типов не пригодны для оформления ярлыков Microsoft Windows (URL-файлов), а это необходимо и на рабочем столе, и в других папках.

Какие программы удобнее использовать для создания ICO-файлов?

Ну, это уж у кого какой вкус. Я, впрочем, рекомендовал бы рисовать значки в каком-нибудь из профессиональных редакторов — всяких там фотошопов, гимпов, пейнтшопов, и так далее — а потом сохранять оттуда изображение в BMP, и конвертировать в ICO уже отдельной программой. Для этой последней задачи лично мне нравится использовать Icon Collector Graphics Editor производства Great Owl Software.

Не забывайте о том, что фиксированная палитра не обязана состоять из системных цветов. Поэтому значки 32x32 и 48x48 следует сохранять, по крайней мере, в 256-цветной палитре, поскольку в True Color они будут занимать слишком много места, а грамотный подбор палитры способен сделать ограниченность количества цветов практически незаметной. Разумеется, задачу такого подбора следует поручить профессиональному редактору графики; вам следует только проследить за тем, чтобы используемый вами ICO-редактор мог копировать и использовать (или, скажем, сохранять из одного файла и загружать в другом) различные палитры цветов, то есть чтобы он не был жёстко привязан к одной только системной палитре Microsoft Windows.

Мне — удалось. А вам?

Примечание администратора: если Вам никак не удаётся добиться желаемого эффекта, то пишите мне на почту, с удовольствеем помогу.