Свой значок для веб-сайта
http://webmaster.alexanderklimov.ru/view_articles.php?id=1
Дата добавления: 2008-11-23
Автор: Александр Климов
В этой статье мы поговорим об использовании собственных значков для своих веб-сайтов, которые видны в адресных строках браузеров перед адресом страницы, а также в закладках, в табах и других элементах интерфейса.
Итак, что такое значок веб-сайта и для чего он нужен? Для этого нам придется вернуться в прошлое и вспомнить историю. Раньше все браузеры обозначали веб-страницы одинаковыми значками, например, в Internet Explorer это буква «e», которую опоясывает орбита на фоне листа бумаги, а у Firefox на значке изображена огненная лиса, которая обнимает земной шар. Но, каждый владелей сайта хочет использовать свой собственный значок, чтобы визуально отличаться от остальных сайтов в интернете. И такая возможность появилась в современных браузерах. Более того, для каждой страницы можно назначить отдельный значок. Однако, до сих пор, некоторые веб-мастера не пользуются этой возможностью.
Как установить значок для своей страницы
Чтобы указать значок, соответствующий странице, достаточно прописать в разделе HEAD страницы следующее:
Вместо слов адрес значка необходимо указать URL-путь к файлу значка.
В данном примере тег link используется для указания отношений: ссылка указывает на значок для ярлыка страницы. Указание это обязательно, поскольку с помощью тега link могут указываться адреса не только значков, но и других объектов (например, стилевые таблицы). Регистр слов «shortcut icon» не важен; их можно записывать как строчными, так и заглавными буквами.
Слово type служит для указания MIME-типа. В данном случае «image/x-icon» означает формат файла, содержащий значок в формате Microsoft Windows. Такие значки понимают практически все браузеры, способные отображать значки сайтов. Если к странице подключён значок другого типа, и браузер не умеет отображать значки указанного типа, то он не станет и пытаться скачивать значок из Сети.
Теперь поговорим об особой роли файла favicon.ico. Слово Favicon («значок для Избранного»; происходит от слов "Favorites Icon" , обозначающих значки для папки с закладками или избранных ссылок) возникло благодаря Internet Explorer. Большинство браузеров, если не находят ни одного тега link, который соответствовал бы значку, то полагают, что у страницы нет собственного значка, и поэтому используют для неё стандартный значок страницы (свой для каждого браузера, о чем уже говорилось выше). Но Internet Explorer дополнительно пытается найти в корне сайта файл с кодовым именем favicon.ico, чтобы использовать этот значок. Некоторые веб-мастера решили вообще отказаться от тега link, просто поместив значок favicon.ico в корень сайта.
На самом деле они совершили опрометчивый поступок, поскольку использование тега link даёт следующие преимущества:
файл со значком можно назвать как угодно, а не только favicon.ico
можно назначить много разных значков нескольким разделам сайта, а не только один и только всему сайту сразу
если значок не прописан в , то его не увидят другие браузеры (Firefox, Netscape, Konqueror, Opera)
Примечание: Кстати, исходя из вышесказанного, рекомендация размещать файл с именем favicon.ico в корне веб-сайта с последующим указанием на него в теге link выглядит опрометчивой, поскольку, если потом возникнет надобность отменить для одной из страниц указание нестандартного значка, то просто убрать соответствующий link будет недостаточно: Internet Explorer продолжит по-прежнему успешно находить favicon.ico в корне сайта. В этом случае придется переименовывать файл favicon.ico и изменять код во всех остальных страниц веб-сайта, а не только той одной, для которой захочется отменить указание значка.
Поэтому, свои значки желательно не называть стандартным именем favicon.ico. Помимо всего прочего, оно ещё и плохо соответствует внешнему виду значка, описывая одно лишь его предназначение.
Теперь поговорим о формате значков ICO. ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Данные значков хранятся в несжатом виде, то есть цвет каждой точки значка кодируется независимо, и объём файла поэтому получается довольно-таки большим.
Размер значка может быть любым, но тогда вид значка будет дополнительно искажён при растяжении или сжатии в момент приведения к одному из стандартных размеров.
Значки бывают либо в естественном цвете (True Color), либо с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов).
Размер 16x16 является основным стандартным размером значка веб-сайта. Для браузера Internet Explorer 5.0 значок 16x16 является обязательным: если IE5 не обнаружит в файле значок 16x16, файл значка окажется проигнорирован браузером. Internet Explorer отображает значки 16x16 для ярлыков веб-сайта, создаваемых пользователм, в собственном меню «Избранное». Кроме того, благодаря интеграции Internet Explorer и Windows, перетаскиванием в другие окна ярлыки 16x16 могут быть созданы в области быстрого запуска на панели задач («Quick Launch») или в меню «Пуск > Программы». Ярлыки, созданные перетаскиванием в другие папки, тоже имеют размер 16x16 при просмотре папки в режимах «Мелкие значки», «Список» и «Таблица». После перехода по любому из этих ярлыков Internet Explorer начинает отображать значок 16x16 и в поле адреса страницы, слева от её URL. Всё вышеописанное верно только для страниц, находящихся в интернете - и не работает для локальных страниц.
Подобное поведение Internet Explorer, кстати, позволяет веб-мастеру сайта отслеживать тех посетителей, которые заносят его в «Избранное» или иным способом запоминают адрес сайта в виде ярлыка, поскольку только в этом случае происходит обращение за значком на веб-сервер.
Остальные браузеры отображают значок 16x16 в строке адреса независимо от наличия или отсутствия сайта в «избранном» или «отмеченном» списке.
Mozilla Firefox и IE8 поддерживают открытие нескольких закладок в одном окне, отображая значки веб-сайтов на корешках таких закладок. Это чрезвычайно удобно, поскольку позволяет быстро ориентироваться при выборе закладки.
Отсюда следует вывод, что при создании значка для сайта или страницы главным является размер 16x16, и именно его следует прежде всего помещать в ICO-файл.
Если стоит выбор между сохранением значка 16x16 либо в естественном цвете (True Color), либо в формате с фиксированной 256-цветной палитрой, то какой выбор следует сделать и почему? Следует выбрать естественный цвет, поскольку в данном случае именно это позволит сократить объём файла.
Наряду с основным размером значка 16x16, существует ещё пара стандартных размеров - 32x32 и 48x48. Эти крупные значки используются операционной системой Windows для представления ярлыков страниц интернета на рабочем столе, а также при просмотре папки в режиме «Крупные значки».
К сожалению, такое использование значков сайта построено на тесной интеграции браузера и операционной системы, поэтому оно начинается только в том случае, если ярлык (URL-файл) был создан перетаскиванием из Internet Explorer. Какой размер будет использован - 32x32 или 48x48? Это зависит от настроек свойств экрана - вкладка «Эффекты», группа «Параметры отображения», пункт «Использовать крупные значки». Если этот пункт включён, то 48x48, иначе 32x32. Использование значков размером 48x48 популярно на дисплеях улучшенной разрешающей способности, где значки 32x32 уже слишком мелки.
Если в файле значка отсутствует изображение, соответствующее необходимому системе размеру, то будет выбрано наиболее подходящее из них, а потом растянуто (или сжато). Такие значки выглядят размазанными, что довольно-таки некрасиво (тем более это верно для тех значков, некоторая часть изображения которых прозрачна, и сквозь неё просвечивает фон рабочего стола).
Исходя из вышеприведённых соображений, в каждом из ваших ICO-файлов должно присутствовать по крайней мере три значка: один 16x16, один 32x32, и один 48x48. Тогда и значки всех размеров будут в наличии, и вид их не окажется искажён.
Дополнительные возможности
Может ли значок быть не в формате ICO, а в каком-нибудь другом формате - например, в анимированном GIF? Да, может, если браузер поддерживает подобное. Для этого достаточно изменить MIME-тип и указать адрес GIF-файла:
Браузеры, которые понимают GIF-значки сайтов (например, Mozilla) будут демонстрировать анимацию в строке адреса, слева от URL, а также во всех остальных местах, где ими отображаются значки. Браузеры типа Internet Explorer 6 просто не станут скачивать значок этого типа. Именно поэтому следует указывать тип.
Можно ли сделать так, чтобы значок был анимированным GIF там, где это возможно, а в остальных браузерах оставался неподвижным ICO-изображением? Такой эффект будет достигнут, если указать два link-тега подряд, один за другим:
Браузер всегда берёт последний из указанных значков - при том условии, что понимает тип значка. Таким образом, понимающие GIF возьмут GIF, остальные возьмут ICO.
Этот трюк работает и со значками нестандартных форматов - таких, как MNG. Такие значки надо всегда указывать последними - а перед ними приводить, как минимум, ICO-версию.
ICO-версия должна указываться всегда, поскольку значки других MIME-типов не пригодны для оформления ярлыков Microsoft Windows (URL-файлов), а это необходимо и на рабочем столе, и в других папках.
Дата добавления: 2008-11-23
Автор: Александр Климов
В этой статье мы поговорим об использовании собственных значков для своих веб-сайтов, которые видны в адресных строках браузеров перед адресом страницы, а также в закладках, в табах и других элементах интерфейса.
Итак, что такое значок веб-сайта и для чего он нужен? Для этого нам придется вернуться в прошлое и вспомнить историю. Раньше все браузеры обозначали веб-страницы одинаковыми значками, например, в Internet Explorer это буква «e», которую опоясывает орбита на фоне листа бумаги, а у Firefox на значке изображена огненная лиса, которая обнимает земной шар. Но, каждый владелей сайта хочет использовать свой собственный значок, чтобы визуально отличаться от остальных сайтов в интернете. И такая возможность появилась в современных браузерах. Более того, для каждой страницы можно назначить отдельный значок. Однако, до сих пор, некоторые веб-мастера не пользуются этой возможностью.
Как установить значок для своей страницы
Чтобы указать значок, соответствующий странице, достаточно прописать в разделе HEAD страницы следующее:
Вместо слов адрес значка необходимо указать URL-путь к файлу значка.
В данном примере тег link используется для указания отношений: ссылка указывает на значок для ярлыка страницы. Указание это обязательно, поскольку с помощью тега link могут указываться адреса не только значков, но и других объектов (например, стилевые таблицы). Регистр слов «shortcut icon» не важен; их можно записывать как строчными, так и заглавными буквами.
Слово type служит для указания MIME-типа. В данном случае «image/x-icon» означает формат файла, содержащий значок в формате Microsoft Windows. Такие значки понимают практически все браузеры, способные отображать значки сайтов. Если к странице подключён значок другого типа, и браузер не умеет отображать значки указанного типа, то он не станет и пытаться скачивать значок из Сети.
Теперь поговорим об особой роли файла favicon.ico. Слово Favicon («значок для Избранного»; происходит от слов "Favorites Icon" , обозначающих значки для папки с закладками или избранных ссылок) возникло благодаря Internet Explorer. Большинство браузеров, если не находят ни одного тега link, который соответствовал бы значку, то полагают, что у страницы нет собственного значка, и поэтому используют для неё стандартный значок страницы (свой для каждого браузера, о чем уже говорилось выше). Но Internet Explorer дополнительно пытается найти в корне сайта файл с кодовым именем favicon.ico, чтобы использовать этот значок. Некоторые веб-мастера решили вообще отказаться от тега link, просто поместив значок favicon.ico в корень сайта.
На самом деле они совершили опрометчивый поступок, поскольку использование тега link даёт следующие преимущества:
файл со значком можно назвать как угодно, а не только favicon.ico
можно назначить много разных значков нескольким разделам сайта, а не только один и только всему сайту сразу
если значок не прописан в , то его не увидят другие браузеры (Firefox, Netscape, Konqueror, Opera)
Примечание: Кстати, исходя из вышесказанного, рекомендация размещать файл с именем favicon.ico в корне веб-сайта с последующим указанием на него в теге link выглядит опрометчивой, поскольку, если потом возникнет надобность отменить для одной из страниц указание нестандартного значка, то просто убрать соответствующий link будет недостаточно: Internet Explorer продолжит по-прежнему успешно находить favicon.ico в корне сайта. В этом случае придется переименовывать файл favicon.ico и изменять код во всех остальных страниц веб-сайта, а не только той одной, для которой захочется отменить указание значка.
Поэтому, свои значки желательно не называть стандартным именем favicon.ico. Помимо всего прочего, оно ещё и плохо соответствует внешнему виду значка, описывая одно лишь его предназначение.
Теперь поговорим о формате значков ICO. ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Данные значков хранятся в несжатом виде, то есть цвет каждой точки значка кодируется независимо, и объём файла поэтому получается довольно-таки большим.
Размер значка может быть любым, но тогда вид значка будет дополнительно искажён при растяжении или сжатии в момент приведения к одному из стандартных размеров.
Значки бывают либо в естественном цвете (True Color), либо с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов).
Размер 16x16 является основным стандартным размером значка веб-сайта. Для браузера Internet Explorer 5.0 значок 16x16 является обязательным: если IE5 не обнаружит в файле значок 16x16, файл значка окажется проигнорирован браузером. Internet Explorer отображает значки 16x16 для ярлыков веб-сайта, создаваемых пользователм, в собственном меню «Избранное». Кроме того, благодаря интеграции Internet Explorer и Windows, перетаскиванием в другие окна ярлыки 16x16 могут быть созданы в области быстрого запуска на панели задач («Quick Launch») или в меню «Пуск > Программы». Ярлыки, созданные перетаскиванием в другие папки, тоже имеют размер 16x16 при просмотре папки в режимах «Мелкие значки», «Список» и «Таблица». После перехода по любому из этих ярлыков Internet Explorer начинает отображать значок 16x16 и в поле адреса страницы, слева от её URL. Всё вышеописанное верно только для страниц, находящихся в интернете - и не работает для локальных страниц.
Подобное поведение Internet Explorer, кстати, позволяет веб-мастеру сайта отслеживать тех посетителей, которые заносят его в «Избранное» или иным способом запоминают адрес сайта в виде ярлыка, поскольку только в этом случае происходит обращение за значком на веб-сервер.
Остальные браузеры отображают значок 16x16 в строке адреса независимо от наличия или отсутствия сайта в «избранном» или «отмеченном» списке.
Mozilla Firefox и IE8 поддерживают открытие нескольких закладок в одном окне, отображая значки веб-сайтов на корешках таких закладок. Это чрезвычайно удобно, поскольку позволяет быстро ориентироваться при выборе закладки.
Отсюда следует вывод, что при создании значка для сайта или страницы главным является размер 16x16, и именно его следует прежде всего помещать в ICO-файл.
Если стоит выбор между сохранением значка 16x16 либо в естественном цвете (True Color), либо в формате с фиксированной 256-цветной палитрой, то какой выбор следует сделать и почему? Следует выбрать естественный цвет, поскольку в данном случае именно это позволит сократить объём файла.
Наряду с основным размером значка 16x16, существует ещё пара стандартных размеров - 32x32 и 48x48. Эти крупные значки используются операционной системой Windows для представления ярлыков страниц интернета на рабочем столе, а также при просмотре папки в режиме «Крупные значки».
К сожалению, такое использование значков сайта построено на тесной интеграции браузера и операционной системы, поэтому оно начинается только в том случае, если ярлык (URL-файл) был создан перетаскиванием из Internet Explorer. Какой размер будет использован - 32x32 или 48x48? Это зависит от настроек свойств экрана - вкладка «Эффекты», группа «Параметры отображения», пункт «Использовать крупные значки». Если этот пункт включён, то 48x48, иначе 32x32. Использование значков размером 48x48 популярно на дисплеях улучшенной разрешающей способности, где значки 32x32 уже слишком мелки.
Если в файле значка отсутствует изображение, соответствующее необходимому системе размеру, то будет выбрано наиболее подходящее из них, а потом растянуто (или сжато). Такие значки выглядят размазанными, что довольно-таки некрасиво (тем более это верно для тех значков, некоторая часть изображения которых прозрачна, и сквозь неё просвечивает фон рабочего стола).
Исходя из вышеприведённых соображений, в каждом из ваших ICO-файлов должно присутствовать по крайней мере три значка: один 16x16, один 32x32, и один 48x48. Тогда и значки всех размеров будут в наличии, и вид их не окажется искажён.
Дополнительные возможности
Может ли значок быть не в формате ICO, а в каком-нибудь другом формате - например, в анимированном GIF? Да, может, если браузер поддерживает подобное. Для этого достаточно изменить MIME-тип и указать адрес GIF-файла:
Браузеры, которые понимают GIF-значки сайтов (например, Mozilla) будут демонстрировать анимацию в строке адреса, слева от URL, а также во всех остальных местах, где ими отображаются значки. Браузеры типа Internet Explorer 6 просто не станут скачивать значок этого типа. Именно поэтому следует указывать тип.
Можно ли сделать так, чтобы значок был анимированным GIF там, где это возможно, а в остальных браузерах оставался неподвижным ICO-изображением? Такой эффект будет достигнут, если указать два link-тега подряд, один за другим:
Браузер всегда берёт последний из указанных значков - при том условии, что понимает тип значка. Таким образом, понимающие GIF возьмут GIF, остальные возьмут ICO.
Этот трюк работает и со значками нестандартных форматов - таких, как MNG. Такие значки надо всегда указывать последними - а перед ними приводить, как минимум, ICO-версию.
ICO-версия должна указываться всегда, поскольку значки других MIME-типов не пригодны для оформления ярлыков Microsoft Windows (URL-файлов), а это необходимо и на рабочем столе, и в других папках.