Как создать иконку для сайта или блога



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

Что такое favicon? — это небольшая картинка в формате .ico, имеющий размеры 16 на 16 пикселей и цветовую гамму TrueColor, которая отображается рядом с адресом вашего сайта, в адресной строке браузера и рядом с названием вашего сайта в «Избранном» или в «Закладках».

Сделать favicon можно в любом графическом редакторе, который поддерживает этот формат. Но проще и быстрее сделать иконку в он-лайн сервисе.

Варианты создания иконки

Первый вариант

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

1. Переходим на сайт Favicon.ru

2. В поле «Обзор…»  выбираем картинку с вашего компьютера. После чего жмем «Создать favicon.ico!»

3. Далее нажимаем на кнопку «Скачать favicon.ico!» и сохраняем ее.

Второй вариант

Для любителей креатива, то есть нарисовать иконку самостоятельно.

1. Заходим на сайт favicon.cc . Перед нами открывается страница с полем для рисования по центру и палитрой в правой колонке.

2. Выбираем нужный цвет и…рисуем нашу будущую иконку. Все лишние детали можно потом удалить ластиком. Чуть ниже можно посмотреть превью с иконкой.

3. Сохраняем нашу иконку, нажав на «Download Favicon».

Установка Favicon на блог Вордпресс:

  •  Загружаем нашу иконку favicon.ico в корневую папку на хостинге. Обычно это путь: название_блога/docs/favicon.ico
  •  Переходим на ваш блог в раздел Внешний вид –> Редактор .
  • Вставляем HTML код в главный файл вашего сайта header.php перед закрывающимся тегом </head>.  Соответственно, вместо ваш_сайт, впишите адрес вашего блога.

<link rel=»shortcut icon» href=»http://ваш_сайт/favicon.ico» type=»image/x-icon» />
<link rel=»icon» href=»http://ваш_сайт/favicon.ico» type=»image/x-icon» />

  •  После того как указали путь и вставили код, нажимаем внизу «Обновить файл»

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

Каким должен быть фавикон?

Пару советов по созданию иконки.

  •  Фавикон должен хорошо ассоциироваться с сайтом.
  •  Должен быть прост для восприятия, пользователь должен сразу понять что изображено на иконке. Не стоит пытаться разместить в фавиконе целую картину, но и «Квадрат» Малевича, думаю, тоже мало что скажет.
  • Фавикон по сути является визитной карточкой, точно так же как и дизайн вашего блога/сайта, поэтому он должен быть выполнен в одном стиле.

Если будут вопросы, задавайте их в комментариях. Удачи :)




  1. inna:

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

  2. Grydasha88:

    Здравствуйте. На работе меня попросили помочь с созданием сайта нашей организации-нужно было мнение со стороны и некие азы, очень помогла ваша статья.
    Здесь рассказана реальная доступная пошаговая инструкция для простого человека (говорю реальная и не босюь этого слова, так как многие статья я уже видела и мне есть с чем сравнить, очень заумные слова и в результате путаешься в создании и получается не так), который не является программистом и знает не так и много.
    Спасибо вам!

  3. Ольга:

    Интересный пост!

Ваш отзыв