Как сделать favicon.ico

Favicon.ico (иконка) — специальная мини картинка, которая отображается в браузерах, в закладках, в поисковой выдаче и т.п. напротив сайта. Вот пример:

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

Для начала Вам нужно определиться с выбором иконки для сайта. Определитесь, чем характеризуется ваш сайт, чтобы уже под эти запросы можно было сделать маленькую запоминающиеся иконку. Желательно, чтобы полученное изображение было квадратным (размер любой). Поскольку обычный размер favicon 16×16, то делать рисунок высокого качества не имеет никакого смысла.

Создать favicon.ico в обычном paint не получится, поскольку у иконки должен быть специальный формат .ico, который есть далеко не у всех графических редакторов. Например, у фотошопа он есть, но устанавливать фотошоп только ради создания иконки — так себе идея.

Поэтому советую воспользоваться онлайн сервисом для генерации иконок http://favicon.ru/:

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

Интересным является онлайн сервис Логастер. С его помощью вы можете создать логотип, а затем на основании логотипа — файл .ico. Фавикон генерируется либо из первой буквы названия компании, или же из части иконки. Вам предоставляются различные вариации, поэтому остается только выбрать понравившийся. Таким образом, логотип и фавикон исполнены в едином стиле. Функционал сайта интуитивно понятен, что позволит легко скачать дизайны.



Есть и другие сервисы для создания иконок онлайн, например: Favicon.cc и www.cy-pr.com/tools/favicon/.

Если у Вас не хватает фантазии или нет желания подбирать свою собственную картинку, то можно поискать уже готовую иконку на сайте: www.iconj.com – здесь их более 18000. Конечно, желательно иметь собственную уникальную иконку, чем использовать готовую.

Как установить favicon на сайт

Для установки иконки на сайт нужно в заголовочном теге <head> прописать следующие:

<head>
...
<link rel="shortcut icon" href="favicon.ico">
...
</head>

В атрибуте href указывается полный или относительный адрес иконки.






Читайте также:

• Как вставить музыку на сайте

• Как сделать карту изображений (карта ссылок)

• Как сделать слайдер

• Как сделать обтекание картинки текстом

• Как сделать якорь ссылки

• Как открыть ссылку в новом окне

• Фреймы (теги <frame>, <frameset>, <noframe>, <iframe>)

• Как сделать фон для сайта

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.