Как добавить иконку к своему сайту

Александр Бельченко
20 июня 2003

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

Итак, добавление иконки к сайту состоит из трех этапов.

На первом этапе Вам нужно создать свою иконку. Для этого Вам понадобится немного творческой фантазии плюс специальная программа для рисования иконок. Очень красочным и функционально-богатым редактором иконок является программа AWIcons от российской компании Lokas Software. Для жителей ex-USSR программа бесплатна. Также редакторы иконок есть в составе инструментов для программирования на Visual C++, Delphi или C++Builder. Пользоваться этими инструментами также легко как и стандартным редактором Paint (входящим во все поставки Windows). В заметке некого SEVRANTY рассказывается, как создавать иконки при помощи Adobe Illustrator и Adobe Photoshop.

При создании иконки необходимо помнить, что она должна быть размером 16 на 16 пикселей и (желательно) использовать палитру из 16 цветов.

Создание иконки потребует от Вас определенных художественных талантов, поскольку полет Вашей фантазии будет жестко ограничен квадратом 16*16. Постарайтесь создать простой, но изящный логотип. Я советую Вам не рисовать нечто совершенно абстрактное, хотя черный квадрат Малевича - это, безусловно, классика! :-)

Второй этап. Когда иконка будет создана сохраните ее под именем favicon.ico, после чего загрузите ее в корневую папку своего сайта.

Третий этап. Осталось только задать на страницах своего сайта соответствующую ссылку на иконку. Делается это несложно - в заголовке Ваших html-страниц между тегами <head> и </head> необходимо добавить элемент

<link rel="icon" href="/favicon.ico" type="ico">

Это почти все.

Остается добавить, что для сайтов на других хостинг-сервисах, Вам, возможно, понадобится указать в атрибуте href полный URL на иконку (например, так: href="http://www.mysite.com/favicon.ico"). Либо попробовать использовать способ указания линка на иконку, который предлагает MSDN:

<link rel="SHORTCUT ICON" href="http://www.mysite.com/favicon.ico">

Если Вы все сделаете правильно, то при просмотре страниц Вашего сайта в броузерах IE5 и выше или Mozilla посетители увидят Вашу иконку в адресной строке браузера. А если они к тому же решат добавить Вашу страничку к себе в Избранное, то добавленная ссылка также будет содержать Вашу иконку.

Желаю удачи.