SEO: Софт и информация
 
 
Основы SEO - статьи о Контенте



Human Emulator - автоматизатор ваших действий в браузере

Иконки для сайтов - теория и практика

iconki

В этой статье мы расскажем все про иконки для веб-сайтов.

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

Итак.

Что же это такое вообще - иконка для веб-сайта и зачем эти иконки вообще нужны?

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

Например, если под объектом скрывается какой-либо текстовый редактор, то его иконка, вне всякого сомнения, будет выглядеть как лист бумаги. Соответственно так же ситуация и с архивом (тесемка и книжки), компакт-диск (кружок с отверстием) и т.д. и т.п.

Иными словами, каждому типу объектов присвоен какой-то определенный тип изображения. Согласитесь, это очень удобно - ибо, если мы, допустим, хотим отыскать в обилии пиктограмм один единственный файл помощи (help), то перепутать его с каким-либо другим файлом уже не удастся, т.к. только файлам помощи соответствует изображение книжки и знака вопроса.

Ну, а теперь давайте вернемся к нашим баранам - итак, иконки для веб-сайтов.

Давным-давно, браузеры обозначали все загружаемые страницы одними и теми же значками - например, в Internet Explorer это была строчная латинская буква "е" (т.е. эмблема Эксплорера). Был еще такой браузер, как Netscape - там, для каждой страницы, использовалась заглавная буковка "n". Но уже во второй половине 90-х какой-то разработчик смекнул - а почему бы не дать волю веб-мастерам? Пусть они сами назначают иконки для своих сайтов, а браузеры будут их исправно отображать!

С тех самых пор и появилась возможность для каждого отдельного сайта назначать свою особую иконку. Более того, иконку стало возможно использовать даже для каждой страницы отдельно!

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

Сейчас мы их и перечислим.
 
  • 1. Icon - это самая простая разновидность иконок. Если где-либо используется словосочетание website icon, то это и есть обычная иконка, которая отображается в верхнем левом углу браузера.
  • 2. Shortcut icon (ярлык иконки) - этот термин чаще всего используется в документации, которая так или иначе связана с браузером Internet Explorer. Именно эксплорер и ввел в обиход ярлыки с иконками. Ярлык очень просто сделать - для этого достаточно схватить элемент, который отображается в самом начале адресной строки, и перетащить его на рабочий стол.

  • 3. Favicon (иконка избранного) - aнглийское слово Favorites - избранное. Термин тоже стал популярен во времена безраздельного господства Эксплорера - в те времена очень большую роль играл файл favicon.ico - о его нынешнем значении мы скажем немного ниже.

 

Как же прописать иконку для веб-страницы? Все очень просто - достаточно прописать только следующий тег:
[link rel="shortcut icon" href="url иконки" type="image/x-icon"]

Этот тег необходимо размесить в заглавии страницы - между тегами [head] и [/head]. Ну а url иконки - это то место где лежит сама иконка.

Давайте же теперь более подробно рассмотрим этот код.

Какую функцию выполняет rel в теге [link]?

Тег [link] указывает на связь между страницей на которой он размещен и теми объектами, на которые он указывает. Таким образом, rel="shortcut icon" задает связь между страницей и иконкой.

Делать такой указатель необходимо, т.к. при помощи можно ссылаться не только на значки, но и на другие элементы веб-страницы (например, на таблицы стилей, почтовые ящики и т.п.). Регистр в словах shortcut icon не играет никакой роли - можно писать как строчными, так и заглавными.

Теперь про type в теге [link].

В нашем случае image/x-icon указывает на то, что файл находится в формате Microsoft Windows. Значки такого типа распознаются всеми браузерами. type в теге [link] следует указывать на каждой веб-странице.

Несколько слов, про ту роль, которую играет файл favicon.ico.

Все браузеры так устроены, что в случае, если они не могут найти ни одного тега [link], который ссылается на установленную веб-мастером иконку, то сразу же устанавливают для страницы свою стандартную пиктограммку. Но, прежде чем это сделать, браузер дополнительно проверяет корень сайта на наличие favicon.ico - и если находит этот файл, то берет иконку оттуда.

Многие веб-мастера так и поступают - попросту не прописывают тег [link]. Правильным такое решение можно назвать только частично. Дело в том, что используя тег [link] можно неплохо приукрасить свой сайт разными пиктограмками (в зависимости, допустим, от раздела на котором находится пользователь).

Мы, со своей стороны, не советуем пользоваться стандартным favicon.ico - лучше задать специальное имя и прописать к нему путь.

Теперь поговорим о форматах иконок для сайтов, которые используются в среде Microsoft Windows.

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

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

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

Веб-мастера, обычно используют значок размером 16x16 - это стандартный размер и все браузеры работают с ним корректно. Иногда при создании иконки для сайта, возникает вопрос - если есть возможность выбрать между естественным цветом (True Color) и фиксированной 256-цветной палитрой, то, что же следует выбирать? На наш взгляд выбор следует остановить на естественном цвете, т.к. это сократит объем файла иконки. Иконка 16x16 – а это очень легко проверить простым умножением - состоит как раз из двухсот пятидесяти шести точек.

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

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

Теперь, под конец, немного про то, зачем нужны иконки размером 32x32 и 48x48?

Дело в том, что наряду со стандартными иконками, которые отображаются в браузере, существуют и другие возможные способы отображения иконок - например, на рабочем столе. Более того, меню "Пуск" тоже использует эти нестандартные размеры.

Таким образом, вам следует помнить, что в каждом из ICO-файлов обязательно должны присутствовать как минимум три иконки: 16x16, 32x32, и 48x48. Если вы не поленитесь их сделать, то иконки с вашего сайта всегда будут корректно отображаться не только в адресной строке, но еще и в операционной системе пользователя. Как известно, современные браузеры поддерживают практически любые графические форматы. Нет никаких причин отказываться от этого удобства - иконки можно делать не только в формате ico, но и в gif, который позволяет анимировать картинку.

Ну и в заключении о софте, при помощи которого можно создавать иконки на любой вкус.

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

Кстати, за довольно таки продолжительное время существования Интернета, человечество успело нарисовать чрезвычайно много иконок. Все они доступны для свободного скачивания со специализированных порталов - их вы тоже без труда найдете!





обсудить на форуме
другие статьи для начинающих вебмастеров



Похожие статьи:

Статьи о контенте

наполнение сайта - статьи о ньансах заполнения вашего сайта различными материалами советы для блогерров - советы по ведению блогов и сплогов советы по созданию интернет магазинов - статьи о том как правильно создавать интернет магазины вопросы плагиата - материалы, связанные с вопросом плагиата контента

Human Emulator - автоматизатор ваших действий в браузере

             


   
Группа в ВКонтакте Группа в Facebook Группа в Одноклассниках
   
   
  Полезное  
сайт с информация о том как собирать данные
магазин полезных товаров для вебмастера
   
   
  Содержание  
 
   
  Обсуждения  
   
  Сервис  
   
   
   
 
   
   
   
Copyright © since 2006 bigfozzy.com All Right Reserved.
 

Отсюда вполне легально можно брать статьи, пожалуйста, с указанием ссылки на источник :-)
(ссылка на тематический ресурс будет и вам полезна и нам будет приятно)



Яндекс.Метрика