Создаём иконку сайта

28 июня, 2008  

У большинства сайтов в Интернете есть свои иконки, которые отображаются в адресной строке, так называемые «FavIcon». В этой статье я расскажу как создать такую иконку и установить её на сайт.

Первое что нам необходимо, это сама иконка, создаём изображение/рисунок в виде иконки, это можно сделать в любом графическом редакторе. Размер может быть любой, но лучше чтобы картинка была квадратной (16×16; 32×32), можете и больше (потом при конвертирование самой иконки из картинки, она уменьшится до размеров 16×16).

Второе, мы создали рисунок, теперь необходимо рисунок переделать в иконку, для этого восспользуется сайтом «DynamicDrive». Загружаем рисунок, отметив “Merge with a 32×32 desktop icon.”, сейчас скрипт сайта будет конвертировать Ваш рисунок в иконку («FavIcon»), теперь жмём «Download FavIcon» и качаем иконку. Иконка создана! :)

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

Если иконка не отображается, то необходимо в шапку сайта, в HEAD добавить следующий код:


<link rel="shortcut icon" href="http://путь до иконки/favicon.ico"
 type="image/x-icon">

Всё! Теперь иконка должна отображаться.

Просмотров записи: 6,349 Метки: , , ,

Комментарии:

Спасибо! Обязательно установлю на свой сайт, когда создам :D

Куда именно писать этот код? На любую старницу или в файл index?

Crazy, если же иконка не появилась загрузив её в корень сайта, то тогда код необходимо установить на всех страницах, которым Вы хотите присвоить иконку.

Создать иконку можно автоматом вот на этом сайте http://favicon.ru/, открываешь любую понравившуюся картинку и преобазовываешь ее в favicon.ico (там все расписано по шагам), после получения файла, заливаешь его в корень сайта, если работаешь с CMS, то там код для вывода иконки уже прописан, если без CMS, то необходимо вставить вышеуказанный код на каждую страницу. Обычно иконка появляется сразу.

Спасибо, Roms, все работает! :razz:

У меня не отображается иконка. Страницы html. как именно надо написать?

zebra, как именно надо писать написано в записи выше. Если же не получается, выложите сюда код, которые вы вставляете.

Сделал на своем сайте. Вообще клевая вещь, что то типо отличительной черты своего сайта. + к тому в поиске Яндекса слева, около номера позиции, она появляется..

Добавить комментарий