15 апреля 2010 г.

Создаем favicon для нашего блога.

Фавикон или (favicon), это сокращение от слов “favorite” (любимый) и “icon” (иконка) - маленькое изображение в формате ICO размером 16х16 пикс.
Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в табах и в других элементах интерфейса.



Зачем он нужен?
1.Favicon делает Ваш сайт уникальным, выделяет Ваш сайт или блог среди прочих сайтов, которые не успели обзавестись иконкой.

2) Иконка для сайта является неотъемлемым элементом бренда, Вашей визитной карточкой, Вашим авторским клеймом, а как известно на брендовые и узнаваемые сайты ссылаются чаще.

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

Убедила?

Сегодня я расскажу, как создала фавикончик для этого блога.




Если Вам лень рисовать свой фавикон, то Вы можете воспользоваться галереями готовых иконок для сайта, но я призываю создать свою, авторскую!

Вы можете взять начальные буквы названия сайта, как это сделано на сайте Салон Эксклюзивного Бисера.



А можете воспользоваться фотографией, как на этом блоге.



Теперь идем сюда favicon.ru (откроется в новом окне).

Нажимаем "обзор" и выбираем картинку на нашем компьютере.
Далее жмем "создать favicon.ico".



Иконка для Вашего сайта или блога готова!Вы можете скачать ее на компьютер (кнопка обведена зеленым).

Но я предложу Вам немного ее отредактировать. Для этого переходим в визуальный редактор,нажав на "редактировать иконку".



Здесь Вы сможете, доработать полученный файл. А то и вовсе отрисовать с нуля. Поддерживается прозрачность. Имеются карандаш, пипетка и заливка. Можно отменять сделанные действия и возвращать их обратно. Поворачивать рисунок по часовой и против. Отражать его по вертикали и горизонтали.
Вы сразу сможете посмотреть, как выглядит Ваша иконка в различных браузерах.



Не забудьте нажать "сохранить изменения" и потом жмем "скачать favicon.ico" и в открывшемся окне подтверждаем загрузку. Полдела сделано!
Идем дальше:
1. Загружаете полученный файл в интернет (если у Вас есть доступ к корневой папке сайта, то грузите туда; если Ваш сайт на uCoz, то воспользуйтесь файловым менеджером подробнее здесь; а можно воспользоваться советом этого блога, как сохранить иконку на sites.google.com).
2. В предложенном коде вместо красных строчек прописываем адрес нашей иконки.



<link rel="icon"
href="http://site.ru/favicon.ico"
type="image/x-icon"/>
<link rel="shortcut icon"
href="http://site.ru/favicon.ico"
type="image/x-icon"/>



Вставляем данный код перед тегом </head> в шаблон нашего сайта или блога.
Для этого заходим в Панель инструментов --> Дизайн --> Изменить HTML.
Сохраняем изменения.

Ну и любуемся тем, что получилось.

Понравился пост? Подпишись на обновления блога
по RSS, E-mail или twitter!


Еще читают::



Следующее Предыдущее Главная страница

Наши рекомендации:

Постоянные читатели