Иконки для вашего сайта
Очень часто приходят письма с просьбой рассказать, как же сделать иконки для сайта... Так как для моего сайта эту иконку сделал Алекс, наш уважаемый автор "Уроков рисования", то после непродолжительной пыткой сковородником он милостиво согласился обнародовать урок. Так что предлагаем вашем вниманию этот немаловажный для многих урок.
Открывая очередную вебстраничку, вы, наверное, часто видите слева в адресной строке браузера, или же в левой части вкладыша открытой странички, иконку. Это придает сайту вес, солидность, ну и, что немаловажно — добавляет красоты.
Нужна ли иконка для сайта? Думаю, да. Для меня это уже давно стало нормой, правилом приличия, если хотите, показателем отношения к делу. Так или иначе, множество людей будут со мной согласны, хотя и не все знают, как сделать такую иконку. Вот поэтому и появился этот урок.
Опять же, попробуй я его не сделай! Ди, она ведь такая! У нее сковородник вечно за спиной, вдруг взбредет ей в голову этот самый сковородник в ход пустить? Нет уж! Лучше пусть будут урок и все останутся невредимыми и довольными)
Итак, сразу успокою, сделать такую иконку и водрузить ее на место - задача совсем не трудная. Труднее не сломать монитор, когда ты все сделал правильно, и даже загрузил иконку куда следует, а она не появляется в адресной строке или во вкладыше. А если и появляется - то старый вариант, а не тот новый и замечательный, который вы сделали пять минут назад.
Ну ... тут уж только терпение и спокойствие. Справимся мы и с этим.
Итак, что нам понадобится.
- Редактор иконок.
Хотя можно обойтись и без него, так что не будем придавать его наличию особого значения. - Графический редактор.
Это может быть и Paint, и Photoshop, и Gimp.
Давайте разберем редакторы по порядку.
Редакторов иконок существует бесчисленное множество. У всех одно и то же назначение, но разный набор инструментов. Мне понравился редактор IcoFX. Он бесплатный, имеет достаточный набор инструментов. Создает иконки разных размеров, понимает прозрачность, и при копировании графики в рабочее окно из буфера обмена не уничтожает то что было на поле до этого (чем страдают некоторые другие редакторы).
Найти его несложно, достаточно ввести его имя в Google. Но учтите, что он на английском языке, хотя кого из сайтостроителей это остановит?
Paint - ну, тут слова излишни. Простенький графический редактор, входящий в поставку Windows.
Photoshop - молчу совсем, пока тапками не закидали со словами "без тебя знаем!".
Gimp - бесплатный графический редактор, поддерживающий слои. Бывают даже такие, кто говорит, что он не хуже Photoshop. Не верьте. Это может сказать только тот, кто не знает возможности Photoshop. Но и Гимпа, и даже Паинта нам будет достаточно.
Сразу оговорюсь, что нарисовать иконку можно и в редакторе иконок. Но им я доверяю лишь простенькие операции. Саму графику предпочитаю изготавливать в Photoshop.
Начнем.
16х16 - это размеры иконки сайта. Сделаете другой размер — и могут возникнуть проблемы эстетического характера.
Открываем IcoFX, создаем новый файл размером 16х16 оставляя цвет True Color.
... да что я тут рассказываю, лучше один раз увидеть:
Ну вот, в общем-то, и все. Мы создали иконку размером 16х16 и расширением *.ico
Обратите внимание, что полученный файл должен называться favicon.ico и никак иначе.
Вообще-то иначе можно, но об этом позже.
Точно так же вы можете создать ее и в других редакторах иконок. Но предупреждаю, иконку с подобным расширением можно создать и из файла *.bmp, но в таком случае формат будет неверным, так что для создания иконок используйте только редакторы иконок.
Осталось лишь сделать так, чтобы наша иконка засветилась в адресной строке или во вкладыше браузера.
Ну это еще легче. Есть даже два способа:
- Просто залить иконку в корневую папку сайта (там где находится файл index.html или index.php). В этом случае, к сожалению, вы не увидите результат на локальном компьютере. Т.е. для того, чтобы увидеть иконку, вам придется сначала залить и сайт и иконку на сервер.
- Залить иконку в ту же корневую папку, а в теле кода между тегами <head> и
</head> вставить вот такую строку:
<link rel="shortcut icon" href="favicon.ico">
В этом случае вы сможете наслаждаться результатом даже тогда, когда сайт находится не на сервере, а на локальном компьютере.
Но вынужден предупредить. По неясным мне причинам, даже если вы многократно обновите загрузку сайта, лежащего на сервере, вы можете не увидеть результаты вашей работы.
Не отчаивайтесь. Все дело в кэше. Попробуйте убить кэш вашего браузера (ну т.е. стереть все кукис и т.п. вещи), ну или загрузите ваш сайт браузером, которым вы его еще не просматривали. В противном случае просто подождите пару дней.
Вторая часть мерлезонского балета, или анимированные иконки для сайта
Помните, я написал, что файл должен назваться только favicon.ico и быть размером 16х16?
Не верьте! Не все так плохо.
Если в вашем коде стоит следующая строка:
то вы легко можете изменить ее, написав например так:
и залить в корневую папку не иконку favicon.ico а обыкновенный гиф размером 16х16 под именем di.gif. Уверяю вас, результат будет таким же, как и в случае с favicon.ico.
Просто учтите, что без подобной строки браузер никогда не покажет вам иконку, которая называется иначе чем favicon.ico.
«А как же анимация?» - спросите вы.
А дело все в том, что если этот самый гиф вы сделаете анимированным, то и иконка будет анимированной. Более того, вы можете сослаться на гиф больших размеров и лежащий в другой папке - результат останется прежним. Другое дело, если файл будет больших размеров, то браузер, конечно же, сожмет его до размеров 16 на 16 точек... но вряд ли вам понравится то, что вы увидите. Тем не менее - это сработает.
Ну вот и все. Дерзайте и наслаждайтесь!
(В. Ахметязнова, 2005 г)