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

Как сделать иконки для сайта или создаем красивую фавиконку (favicon)

Рад приветствовать Вас, дорогие друзья! В сегодняшней статье я хочу затронуть такую тему, как сделать иконки для сайта, которые называются фавиконками или «favicon». Мы рассмотрим, что такое favicon, почему нужно обязательно обязательно создавать иконку для сайта  или блога и как сделать фавикон самому.Как сделать favicon для сайта

А также я расскажу о том, какие онлайн генераторы можно использовать для создания Фавикона, где можно скачать готовые иконки (значки для сайта) и как настроить отображения favicon.ico на своем сайте или блоге.

Что такое иконки для сайта (Favicon)?

Favicon (иконки сайта) — это маленькая картинка, которая отображается перед адресом url, а также перед названием открытой страницы. В большинстве случаев favicon является логотипом, поэтому нужно серьезно отнестись к его созданию.

Вот мой favicon:

что такое фавиконка
фавинка отображается в подписи перед URL сайта

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

Создать свой уникальный фавикон можно с помощью Photoshopа, а также с помощью онлайн генераторов.

Кстати привлекательный фавикон может принести дополнительный трафик. Так как некоторые люди смотрят именно на него, прежде чем кликнуть по заголовку сайта.

Как создать favicon.ico?

Есть несколько способов: создать с помощью Photoshop, online генератора, либо скачать готовую иконку. Рассмотрим все по порядку.

Создание с помощью Photoshop

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

Создание favicon с помощью онлайн генератора

Рассмотрим весь этап создания на примере отечественного сайта favicon.ru.

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

Интерфейс выглядит следующим образом:

создаем иконки для сайта
чистое поле перед созданием иконки для сайта

2) Все настолько просто, что можно сразу начинать рисовать, предварительно выбрав цвет.

Вот какую иконку нарисовал я:

Как сделать favicon
Фавиконка для сайта BloogIT.ru

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

Как сделать favicon

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

После того, как иконка для сайта будет готова, можно ее скачать себе на компьютер, нажав на кнопку «Скачать FAVICON»

favicon

Создание favicon с помощью готового изображения

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

Просто загрузите готовое изображение через форму вверху сайта и получите готовый favicon.

Фавикон

Список сайтов с готовыми favicon

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

Iconj – самая огромная база готовых иконок

Favicon — также небольшая база фавиконок

Siteicon — советую глянуть сюда.

Thefavicongallery — также неплохая база готовых иконок

 

Прикрепляем готовый favicon к сайту

Итак, после того как вы создали favicon ( либо скачали ) нужно его прикрепить к сайту. Делается это следующим образом.

1) Закиньте favicon.ico в корень сайта. Обычно это папка public_html

2) Далее пропишите в header.php следующие строки, заменив ВАШ_САЙТ на адрес своего сайта или блога:

<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico">

P.S. прописывайте данный код до тега </head>

Ну вот и все! Теперь и вы знаете, как создать иконку (фавиконку)для своего сайта и настроить ее отображение. Надеюсь статья была полезной и интересной для Вас и вы поняли, как сделать значок для сайта.

Познавательное видео о том, как сделать иконку для сайта

 

И наконец не только favicon

Новость №1. Если вы еще не знаете, то я учусь в 9 классе и учусь на отлично, поэтому принимаю участие во всех мероприятиях, связанных с учебой.

Так вот, позавчера я участвовал в Турнире Эрудитов им. Ломоносова. Изначально я хотел принять участие только на секции «Информатика и ИТ», но оказалось, что информатики, вообще, нет в турнире, поэтому мне пришлось принять участие на других секциях.

Вот тут самое интересное, я принял участие в 5 общеобразовательных предметах: физика, математика, математические игры, химия и литература. Сам удивился, как я так смог )

Теперь жду ответа. Надеюсь, что результаты будут хорошими.

По математике, физике и матем. играм решил все задачи. Для меня они были очень легкими.

Что касается химии, то здесь я решил только 2 задачи из 3-х предложенных. С литературой также были проблемы, так как не знал некоторых произведений.

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

Новость №2. Может кто заметил, что в последнее время я мало уделяю времени блогу. Это связано с тем, что у меня мало времени, так как очень много задают на дом, а так как я отличник :-), делаю все и всегда и на 5 :yes:  Так вот с сегодняшнего дня я буду уделять больше времени блогу.

Призы:

1 место. 100 рублей  + книга «Социальное продвижение от А до Я» + Скидка 50% на мои услуги в социальной сети Вконтакте ;

2 место. 50 рублей + книга «Социальное продвижение от А до Я» + скидка 30%;

3 место. 25 рублей + книга «Социальное продвижение от А до Я» + скидка 10%;

Если наберется 100 подписчиков, то 100-му бонус 25 рублей.

Дата проведения: 02.10.12 — 02.12.12

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

Введите свой e-mail в форму ниже:

Не забудьте подтвердить подписку :good: Советую также почитать статью «Как добавить смайлики в блог? «

Подробная инструкция по фавиконке представлена тут

 

Комментарии 6

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.