Как сделать иконки для сайта или создаем красивую фавиконку (favicon)
Рад приветствовать Вас, дорогие друзья! В сегодняшней статье я хочу затронуть такую тему, как сделать иконки для сайта, которые называются фавиконками или «favicon». Мы рассмотрим, что такое favicon, почему нужно обязательно обязательно создавать иконку для сайта или блога и как сделать фавикон самому.
А также я расскажу о том, какие онлайн генераторы можно использовать для создания Фавикона, где можно скачать готовые иконки (значки для сайта) и как настроить отображения favicon.ico на своем сайте или блоге.
Что такое иконки для сайта (Favicon)?
Favicon (иконки сайта) — это маленькая картинка, которая отображается перед адресом url, а также перед названием открытой страницы. В большинстве случаев favicon является логотипом, поэтому нужно серьезно отнестись к его созданию.
Вот мой favicon:
Практически на всех сайтах и блогах имеется своя иконка. Если у вас еще нет иконки, то пора бы задуматься над ней.
Создать свой уникальный фавикон можно с помощью Photoshopа, а также с помощью онлайн генераторов.
Кстати привлекательный фавикон может принести дополнительный трафик. Так как некоторые люди смотрят именно на него, прежде чем кликнуть по заголовку сайта.
Как создать favicon.ico?
Есть несколько способов: создать с помощью Photoshop, online генератора, либо скачать готовую иконку. Рассмотрим все по порядку.
Создание с помощью Photoshop
Создать favicon в Фотошопе не составит труда, а вот сохранить в формате .iсo будет немного проблематично. Нужно будет скачать с интернета и установить специальный плагин.
Создание favicon с помощью онлайн генератора
Рассмотрим весь этап создания на примере отечественного сайта favicon.ru.
1) Переходим на сайт.
Интерфейс выглядит следующим образом:
2) Все настолько просто, что можно сразу начинать рисовать, предварительно выбрав цвет.
Вот какую иконку нарисовал я:
Больше всего мне понравилось то, что можно сразу видеть как будет отображаться фавикон в реальных размерах.
Как видите иконки для сайта создаются достаточно легко. С созданием проблем не возникнет даже у тех, кто далек от веб-дизайна. Интерфейс сайта для рисования 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 канал через форму ниже.
Не забудьте подтвердить подписку :good: Советую также почитать статью «Как добавить смайлики в блог? «
Подробная инструкция по фавиконке представлена тут
Буду первым подписавшимся, чтоль :)
Спасибо. Внесла в закладки. Как раз собираюсь сделать фавикон для сайта мужа.
Фавикон — вроде мала вещь, но весьма нужная. Создавать его в Фотошопе, мягко выражаясь, использовать ресурсы не по назначению. Лучше применять что-то по проще типа онлайн редактора иконок.
также стал подписчиком.
Где найти поле для ввода кода(header.php) на ucoz?
Войди в панель управления. Далее в управление дизайном. Найди редактор страниц. Далее между
вставляй код.Тимур, ты просто умничка! Тебя ждет большое будущее. Много действительно полезной информации. Думаю вернусь на твой блог еще не раз. :good: