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

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

В этом посте я расскажу, как сделать иконку для блога, по-другому ее еще называют 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» />

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

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

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

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

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

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

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



Просмотров:

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