Подписка на обновления блога, RSS на e-mail
Мой Twitter
Я в Facebook
Мой ЖЖ
Мой LinkedIn
Я в Google+
Позвонить мне в Skype!
 
  Как создать сайт самомуБлог преподавателя ВЕБ дизайна
msgbartop
  
Как создать сайт самому > ВЕБ мастеру > Иконка сайта — как сделать и установить
msgbarbottom

Иконка сайта — как сделать и установить

13 Фев 10ВЕБ мастеру

Наверняка вы иногда любуетесь значком в начале адресной строки браузера. Этот же значок появляется рядом с закладкой на этот сайт в браузере, и в "Журнале" ("Истории" - в браузерах, отличных от IE). Favicon или иконка сайта - небольшая картинка, позволит  выделить свой сайт из ряда подобных. Некоторые иконки - настоящее "произведение искусства" - в том плане, что помогают запомнить сайт и быстро найти его, например, в закладках. Как же создать свою иконку сайта? Но вначале - что представляет собой favicon.

Favicon («изображение, значок») - этот термин образован от слова «Favorites» и "Icon", значит "картинка в избранных ссылках" в Internet Explorer). Это небольшая картинка, которая отображается  рядом с адресом вашего сайта, в адресной строке браузера, вместо стандартной.

Что представляет собой иконка сайта (favicon)

Обычно используется изображение размера 16x16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и других...

Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO, «лежащего» в корне сервера).

На сегодняшний день Internet Explorer — это единственный браузер, который показывает иконку сайта только если сайт добавлен в «Избранное» (Закладки), иконка называется favicon.ico и лежит только в корневой папке сервера, но в последующих версиях разработчики обещают это исправить.

К сайту иконка подвязывается прописыванием в коде документа, между тегами

<head></head>

следующего кода:

&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;
&lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;

Для того, чтобы создать иконку для сайта, можно воспользоваться несколькими способами:

  • Использовать специальные программы Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop
  • Использовать специальный плагин для Photoshop, например - IconBuilder-XP100
  • Использовать онлайн ресурсы для создания favicon. Например -favicon.ru

Делаем иконку сайта онлайн

Сайт Favicon.ru полностью посвящен иконкам сайта favicon.ico. Сайт содержит форму, позволяющую загрузить собственную картинку размером не более 300 Кб для создания иконки. В этой форме предусмотрена возможность поставить галочки для добавления в favicon.ico значков 32х32 и 48х48 для десктопа.

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

Подходящую картинку вы можете нарисовать сами или взять в Интернете (в Интернете есть масса коллекций подобных иконок).

Совет: не пытайтесь поставить в качестве favicon какую-нибудь фотографию, или сложную картинку - все равно ничего видно не будет. Иконка показывается в браузере как изображение размером 16x16 пикселей. Ожидать что в таком виде можно изобразить что-то сколько-нибудь сложное не приходится. Например, что бы изобразить хоть сколько-нибудь узнаваемо человеческое лицо, надо начинать с размера картинки 48x48. Поэтому, правило при создании иконок сайтов одно — следует изображать один, хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Лучше всего для иконки сайта подходит логотип компании или столь же простое изображение.

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

В Joomla favicon.ico находится в папке ./images/ - его и нужно заменить на свой. Поместите его также в корень сайта.

В Wordrpess - поместите иконку в корень сайта и в папку темы. Укажите в шаблоне (файл header.php) , где-то между тегами <head> </head>, следующий код:

&lt;link rel=&quot;shortcut icon&quot; href=&quot;&lt;?php bloginfo('template_directory'); ?&gt;/favicon.ico&quot; /&gt;

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

Оказалось полезным? Покажите друзьям:
  • Facebook
  • Twitter
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • LiveJournal
  • Яндекс.Закладки
  • Одноклассники
  • Блог Я.ру
  • Блог Li.ру
  • FriendFeed
  • Add to favorites
Понравился пост? Подпишись на мою RSS ленту и ты не пропустишь новые! Пользуешься Твиттером? Следуй за мной!

Метки: , | Рубрика: ВЕБ мастеру



Комментарии читателей

  1. | Цитировать

    Я уж давно для каждого нового сайта сразу ставлю favicon для индивидуальности сайта.

  2. | Цитировать

    А можно ставить анимашки на favicon? Это было бы прикольно!

  3. | Цитировать

    Почему нет? Анимированный GIF уже многие ставят. Правда анимация пока видна только в Файерфоксе.

  4. | Цитировать

    А как удалить этот favicon? Сколько требуется времяни, что бы он изчез после удаления файла favicon.ico и записи в .

  5. | Цитировать

    Вы вероятно не почистили кэш браузера. Кроме этого, есть кеш Яндекса, например, где иконка сайта будет ещё находиться напротив ссылки на сайт. Должно пройти несколько апдейтов, пока она будет заменена.

  6. | Цитировать

    Интересно а можно за место файла favicon.ico указать например: favicon.png



Оставьте свой комментарий