В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон.

Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:

favicon thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога

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

План урока:

  1. Создание Favicon с нуля.
  2. Создание фавиконки из готового изображения.
  3. Сервисы с готовыми иконками для сайта.
  4. Прикрепление полученной иконки к сайту.

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

favicon thumb Урок 50 Как сделать иконку (фавикон, favicon) для блогаЧтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

favicon narisovat thumb Урок 50 Как сделать иконку (фавикон, favicon) для блогаЯ нарисовал следующий фавиконку:

favicon fanbar thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

favicon 2 thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

favicon preview thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

favicon download thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога

Создание favicon (фавикон) из готового изображения

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

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

Список сервисов с готовыми favicon (фавикон)

Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:

  1. iconj – Огромная база фавиконок;
  2. favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
  3. Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
  4. audit4web – Большое количество иконок для сайта.

Как сделать Favicon (фавикон) для сайта

После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:

  1. Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
    favicon 2 thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога
  2. Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>): 
    <link rel="shortcut icon" href="http://адрес_сайта/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://адрес_сайта/favicon.ico" type="image/x-icon" />
    Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.
  3. У меня получилось следующее:
    favicon 3 thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога
  4. Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:
    favicon 4 thumb Урок 50 Как сделать иконку (фавикон, favicon) для блога

Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.

P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.

P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!

_____________________________________________

Следующий урок: Урок 51 Регистрация в поисковиках.

_____________________________________________
Постовой. Не хотите купить органайзер? Тогда интернет-магазин органайзеров к Вашим услугам! Лично я не представляю свою жизнь без хорошего органайзера.