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

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

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

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

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

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

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

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

<head></head>

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

[sourcecode language=”css”]
&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;
[/sourcecode]

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

  • Использовать специальные программы 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 какую-нибудь фотографию, или сложную картинку – все равно ничего видно не будет. Иконка показывается в браузере как изображение размером 16×16 пикселей. Ожидать что в таком виде можно изобразить что-то сколько-нибудь сложное не приходится. Например, что бы изобразить хоть сколько-нибудь узнаваемо человеческое лицо, надо начинать с размера картинки 48×48. Поэтому, правило при создании иконок сайтов одно — следует изображать один, хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Лучше всего для иконки сайта подходит логотип компании или столь же простое изображение.

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

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

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

[sourcecode language=”css”]
&lt;link rel=&quot;shortcut icon&quot; href=&quot;&lt;?php bloginfo(‘template_directory’); ?&gt;/favicon.ico&quot; /&gt;
[/sourcecode]

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

VideoTutor

http://videotutor.ru

Преподаватель Веб дизайна

Ещё статьи этого автора
6 комментариев на “Иконка сайта – как сделать и установить
  1. WellSait

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

     
    Ответить
    1. VideoTutor

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

       
      Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">