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

Наверняка вы иногда любуетесь значком в начале адресной строки браузера. Этот же значок появляется рядом с закладкой на этот сайт в браузере, и в «Журнале» («Истории» — в браузерах, отличных от 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>

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

<link rel="shortcut icon" href="/images/favicon.png" type="image/png">

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

  • Использовать специальные программы 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>, следующий код:

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

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

Поделиться этим:
Отправить

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

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

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