Создаем красочную иконку для блога. Создание сайтов иконка


28 бесплатных наборов иконок | Веб-дизайн

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

01. Icons8

Icons8 — набор из 20 тысяч плоских иконок в любых форматах, размерах и цвете! Здесь представлены такие категории, как бизнес, одежда, еда и многие другие. Icons8 можно скачать в виде приложения для Mac или в виде ZIP-архива.

02. Freepik

Яркая коллекция векторных иконок от специализированного ресурса Freepik – лишь одна из множества представленных. Она идеально подойдет для деловых и независимых проектов. Дополнительно скачать PSD иконки можно в форматах .AI, .EPS и .SVG.

03. Iconfinder

Этот набор, выполненный в черно-белом цвете, содержит комбинацию четких функциональных и эмоциональных векторных иконок. Кроме стандартных иконок этот набор содержит иконки в виде сердец и глаз, что позволит вам придать собственным проектам эмоциональный окрас.

04. 195 flat flag PSD icons

Отличный набор иконок PSD для сайта, который можно использовать при разработке международного сайта, интернет-магазина или блога о путешествиях. В набор входит 195 бесплатных иконок с закругленными углами.

05. Metro UI Icon Set

Если вы фанат Windows 8, то вам стоит познакомиться с этим бесплатным набором иконок. Он включает в себя 700 хорошо оформленных иконок, которые можно свободно применять в проектах любого типа.

06. Modern UI Icons

Еще один набор бесплатных иконок, который можно использовать при создании пользовательского интерфейса программного обеспечения для Windows или для Android/iOS. Скачав данный набор, вы получите 1000 плоских, созданных вручную, иконок, в том числе даже иконки для шторки приложений в Windows Phone.

07. 350 pixel perfect icons

Невероятный набор из 350 идеально четких иконок для приложений или сайтов. При этом их можно изменять в размере без потери качества.

08. 80 mini icons

80 идеально четких миниатюрных иконок, которые можно скачать как в PSD-формате, так и в виде иконического шрифта. Эти опрятные и утонченные социальные иконки PSD идеально подойдут для проектов любого типа.

09. Simple and practical web icon vector graphic

Множество полезных иконок, которые можно использовать в личных и коммерческих проектах.

10. Free flat icons

Набор иконок, выполненных в плоском стиле, среди которых можно выделить календарь, электронную почту, часы, карты и многое другое.

11. Mono icons

Набор, который включает в себя 108 уникальных монохромных иконок, выполненных в стиле минимализма. Все они доступны в формате PNG при размере 32 на 32.

12. Metrize icons

Бесплатная коллекция в стиле Metro, которые можно использовать в собственных приложениях и веб-проектах. Иконки социальных сетей PSD бесплатны как для личного, так и для коммерческого использования. В архиве представлены не только форматы PSD, SVG, ESP и AI, но также и веб-шрифты.

13. Tab Bar Icons iOS 7

Элегантный набор иконок, разработанных под вдохновением от iOS 7, который вы можете использовать в собственных приложениях. Скачать иконки можно в следующих форматах: PSD, AI и ESP.

14. Chunky Pika Icon Set

Иконки в стиле Pika, созданные агентством Dutch Icon из Дании. Этот набор включает в себя 42 идеально четких иконки.

15. Iconic

Еще один набор простых, но привлекательных иконок, которые идеально подойдут для минималистических дизайнов. Iconic представляет собой open source набор, который можно скачать в PNG, SVG, SWC и других форматах, что позволит адаптировать их под собственные дизайны.

16. 44 Shades of Free Icons

Набор из 44 иконок. Он содержит PSD иконки для форума, что позволит без труда отредактировать и адаптировать их под собственные проекты.

17. Token icon set

Token включает в себя 128 уникальных иконок, доступных в формате ICO в размерах 16 на 16 пикселей, 32 на 32 пикселя и 256 на 256 пикселей, а также в формате PNG в размере 128 на 128 пикселей. Каждая иконка представлена в темном и светлом вариантах, и дополнена PSD-файлом.

18. Flat icons (PSD)

Пестрые иконки в плоском стиле, которые можно скачать в формате PSD и отредактировать под собственные нужды.

19. Free 32px icons set

Набор, в котором вы найдете иконку PSD любого назначения: Skype, Facebook, Twitter, RSS, чашка кофе, “лайк” и многое другое.

20. 48 flat designer icons

Если вы фанат минимализма, то этот набор точно вам понравится. Он состоит из 48 бесплатных иконок, отражающих офисные задачи, социальные аспекты, а также путешествия. Все они представлены в форматах AI и PNG, и их можно масштабировать без потери качества.

21. Plex icons set

Набор включает в себя свыше 100 иконок, среди которых календари, антивирус, часы, электронная почта, приложения Microsoft Office, социальные сети, а также многое другое.

22. Vectory mini free

Набор из более чем 1000 иконок PSD, разработанных командой Icojam. Все они представлены также в формате PNG. Они идеально подойдут для использования при разработке нового сайта, так как их можно бесплатно использовать как в личных, так и коммерческих проектах.

23. Eldorado mini free

Очередная коллекция мини-иконок от Icojam, в которой представлено свыше 1200 иконок в размере 40 на 40 пикселей.

24. 2600 Flag Icon Set

Набор, состоящий из 2600 иконок в виде флагов различных размеров. Каждая иконка представлена в двух вариациях: плоской и глянцевой.

25. Social icons

Этот набор предлагает 150 монохромных социальных иконок, которые разрабатывались с учетом простоты. Все они представлены в форматах AI, EPS, PNG и SVG, и их можно использовать в любых проектах абсолютно бесплатно.

26. Free Furry Cushions Social Icons Set

Завели себе «пушистый» сайт? Тогда скачайте «пушистые» PSD иконки социальных сетей точно заинтересуют вас!

27. Social media icons pack

Обязательно просмотрите этот набор, который состоит из 74 иконок для социальных сетей, которые идеально впишутся в любой дизайн.

28. Color stroked icon set

Этот набор иконок социальных сетей включает в себя 22 бесплатные рисованные иконки. Среди них представлены иконки Delicious, Flickr, Twitter, Digg.

Перевод статьи “28 sets of free icons” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Создание иконки сайта (favicon)

Рад приветствовать читателей моего блога!

Сегодня я расскажу о том, как создать иконку сайта (так называемый favicon), которая придаст индивидуальность вашему ресурсу.

Что такое favicon?

Favicon представляет из себя значок веб-сайта, отображаемый браузером во вкладках, в закладках при добавлении туда сайта, в адресной строке левее URL сайта и в других элементах интерфейса.

Само слово favicon образовано из двух других, а именно FAVorites ICON, что переводится на русский язык как «значок для избранного». Чтобы вы наглядно могли оценить, что из себя представляет иконка сайта favicon, размещаю скриншот, на котором стрелками обозначены иконки разных интернет-ресурсов:

Создание иконки сайта (favicon)

Думаю, что теперь понятно, что из себя представляет favicon и можно переходить к рассмотрению вопроса о его создании.

Создание иконки сайта (favicon)

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

Далее это изображение нужно создать с помощью графического редактора, например Photoshop. Можно также воспользоваться сайтом http://www.favicon.cc, на котором есть возможность создать свой, либо скачать уже существующий favicon в рубрике Top Rated Favicons.

В любом случае, в результате должен получиться файл с изображением размером 16×16 или 32×32 пиксела с расширением gif или png. После этого переименовываем его в favicon.ico и загружаем с помощью FTP-клиента на хостинг в корень (или в любое другое место, главное запомнить путь к файлу) вашего сайта.

Теперь, когда выбранная для вашего сайта иконка уже загружена на хостинг, осталось лишь найти в файле header.php вашего шаблона WordPress тег <head></head> и перед закрывающим тегом </head> (с использованием текстового редактора, рекомендую использовать notepad++ по FTP, либо в админ-панели найти пункт Внешний вид → Редактор → header.php) вставить следующий код, отвечающий за отображение этой самой иконки сайта:

<link href="http://имя сайта/путь к файлу favicon.ico/favicon.ico" rel="shortcut icon" type="image/png" />

<link href="http://имя сайта/путь к файлу favicon.ico/favicon.ico" rel="shortcut icon" type="image/png" />

Сохраняем изменения, обновляем страницу и наблюдаем появившуюся иконку вашего сайта/блога.

Если иконка не отображается, то проверьте правильность написания пути к ней. Не размещайте файл favicon.ico сильно глубоко, лучше всего разместить его в корне сайта на хостинге.

На этом создание иконки сайта (favicon) для сайта/блога на WordPress завершено!

Подписывайтесь на обновления моего блога, чтобы не пропустить публикацию новых статей!

До скорых встреч. С уважением, Владимир Денисов!

expromtom.ru

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

Иконка для сайта — favicon.ico представляет собой небольшую картинку (16×16 пикселей), которая размещается в строке браузера непосредственно перед URL сайта или веб-страницы. Иконку сайта мы можем видеть также в закладках веб-страниц или в результатах поиска поисковыми системами. Эта картинка является, своего рода, идентификатором сайта, позволяет выделить сайт среди других. Поэтому очень важно, чтобы она была уникальна и сделана в тему дизайна сайта.

Создать иконку для сайта, способы

Существует несколько способов создания иконки для сайта, давайте их рассмотрим:

1. Создать иконку с помощью программ, например, Favicon Create, Adsen FavIcon. Для создания иконки необходимо установить программу, загрузить файл картинки в одном из поддерживаемых форматов, например, *.jpg, *.jpeg, *.bmp. Картинку можно сделать в любом графическом редакторе, например, в Adobe Photoshop, либо скачать из Интернета готовый вариант. Далее нужно конвертировать эту картинку в формат иконки (.ico). Данный способ требует времени на установку программы и на знакомство с ее интерфейсом.

2. Создать иконку с помощью онлайн-сервисов. Этот способ не требует много времени — достаточно загрузить картинку в специальную форму и после конвертирования вы получите готовый вариант иконки.

Создать иконку для сайта, примеры

Рассмотрим пример создания иконки для сайта с помощью онлайн-сервиса по шагам:

1. Заходим на сайт «favicon.ru». Здесь необходимо выбрать картинку для нашей будущей иконки. Для этого нажимаем кнопку «Выберите файл», затем «Создать favicon.ico!».

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

2. Иконка для сайта создана. Можно посмотреть пример ее отображения в браузере. Если нас все устраивает, скачиваем иконку на компьютер — для этого нажимаем по ссылке «Скачать favicon.ico».

Пример иконки для сайта

Чтобы установить иконку на сайт нужно cкопировать файл иконки в корневую папку и в шапке сайта между тегами <head></head> добавить код:

<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

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

siteblogger.ru

HTML: Фавикон (favicon) - создание, добавление, польза

Что такое фавикон

Фавикон (favicon - это сокращение от Favorite icon, в переводе с анг. означает любимый значок) - иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16x16, 32x32 или 64x64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

<html> <head> <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon"> </head> <body> </body> </html>

Примечание: обратите внимание, что для каждой веб-страницы или для каждого раздела сайта можно указать свой собственный фавикон.

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

Google ChromeInternet ExplorerFirefoxOperaSafari
<link rel="shortcut icon"href="httр://mysite.ru/myicon.ico">ДаДаДаДаДа
<link rel="icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/vnd.microsoft.icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 9)ДаДаДа
<link rel="icon" type="image/png" href="httр://mysite.ru/image.png">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/gif" href="httр://mysite.ru/image.gif">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/x-icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 9)ДаДаДа

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

puzzleweb.ru

сколько стоит разработка дизайна иконок у фрилансеров

Всем нам известно, что привлекательность сайта в первую очередь зависит от его оформления. Чем красочней сайт, тем он больше привлечёт своих покупателей. Мало кто предпочитает сайты, которые имеют только сухой текст. Самое главное – привлечь внимание, а это, прежде всего, достигается благодаря иконкам.

Что такое иконка?

Иконка - визуальный образ, который, как правило, рисуется в виде трехмерного цветного изображения. Создание иконки для сайта является трудоёмкой работой. Дизайнеру понадобится много времени, если цель – уникальность и привлекательность. В определённых случаях, иконка – небольшое изображения, которое находится во вкладке в браузере при открытии того или иного сайта и имеет расширение ісо (называют favicon.ico).

Индивидуальная иконка – личный стиль сайта

Для начала, иконка – это:

  • индивидуальность;
  • привлекательность;
  • помощник в раскрутке сайта;

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

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

В «Избранном» или в «Закладках» а также в адресной строке любого нынешнего браузера, уникальная иконка всегда будет выделяться среди многих других. Это, конечно же, подтолкнёт каждого на посещения сайта снова и снова. Для разработки иконки такого вида используется favicon – изображение, разрешение которого 16 х 16 пикселей.

Какой должна быть иконка?

Для большего запоминания, эффективности и привлекательности дизайн иконок должен совпадать с услугами, которые предлагаются этим интернет-ресурсом. Создание иконок должно также производиться для главных разделов товаров и услуг, для разного рода программ и т.д. Лучше всего эту работу поручить профессиональным дизайнерам, которые не один год работают над созданием подобных вещей, например, на сервисе Юду. Броский и интересный дизайн иконок поможет поднять настроение посетителю, что, в свою очередь, может сделать его потенциальным пользователем сайта.

Роль фрилансера

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

оформлении сайтов. Его профессия является творческой, но он также предоставляет другие услуги, как:

  • оформление сайтов;
  • написание статей;
  • поиск бизнес-партнёров;
  • поддержка сайта.

В общем, услуги фрилансера – это успех сайта. Заказать иконки для сайта можно у этого «разнорабочего» на бирже Юду.

Стоимость работ

Всё зависит от оригинальности и пожелания заказчика. Чем интересней иконка и больше её разрешение, тем выше стоимость. Цена в зависимости от сложности работы и сроков может варьироваться от 5 до 50 долларов.

 

freelance.youdo.com

Создание Favicon для сайта - рекомендации и пошаговое изготовление

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

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

Favicon - это небольшая иконка которую вы можете видеть в адресной строке браузера и на вкладках открытых страниц, а также при добавлении сайта в закладки браузера туда же добавляется и данная иконка.

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

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

#1. Значок должен быть легко распознаваемым и иметь ассоциации с вашим сайтом или нишей, к которой относится ваш сайт. В качестве значка вы можете использовать логотип или символ вызывающий ассоциацию с вашим сайтом. Кроме этого можно использовать ту цветовую гамму, в которой создан ваш сайт или логотип.

#2. Не используйте стандартные значки. Многие после создания сайта на той или иной CMS, оставляют значок этого движка сайта, ничего, не меняя. В результате в выдаче поисковой системы может находиться не один сайт с таким значком, а множество. Этим вы не как не выделите свой сайт, поэтому используйте только уникальные иконки Favicon созданные специально для вашего сайта. Сюда же можно отнести ситуацию, когда используют иконки из различных коллекций или элементов интерфейса других сайтов. Помните для того чтобы выделяться вам нужна уникальная Favicon.

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

#4. Не используйте анимированные значки. Во первых анимация поддерживается не всеми браузерами, во вторых внимание посетителя должно быть сосредоточенно на содержимом, а не на иконке.

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта WebMasterMix.ru.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px, для этого пройдите в меню "Файл" >> "Новый..." или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px, но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ "W" с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента "Заливка" (G) 1 задал синий цвет ранее созданному документу.

6

#3. После этого я выбрал инструмент "Текст" (Т) добавил символ "W" и задал ему следующее значение цвета #FAC31D.

7

Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню "Слой" >> "Стиль слоя" >> "Обводка", выбрать цвет и размер обводки.

2

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню "Слой" >> "Объединить видимые" или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню "Фильтр" >> "Размытие" >> "Размытие по Гауссу..." и установить радиус 0,3 пикселя.

8

Свой символ или изображение размещайте так, чтобы оно заняло максимум пространства, потому что если он будет маленького размера, то при размере значка 16*16 оно не будет заметно.

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню "Изображение" >> "Размер изображения" и установить размер 16*16px.

kak-sodat-favicon

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение .ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате .ico. Поэтому сохраните его в формате .png, для этого пройдите в пункт меню "Файл" >> "Сохранить как..." и из раскрывающегося списка выберите пункт PNG.

3

Конвертирование изображение в формат .ICO

После этого мы конвертируем его в формат .ico при помощи сервиса favicon.ru. Зайдите на данный сервис и при помощи кнопки "Обзор" выберите  ранее сохраненный файл в формате PNG после чего нажмите на кнопку "Создать favicon.ico".

4

После этого на загрузившейся странице появится ссылка "Скачать favicon.ico!" кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется "public_html". Затем, в каждую страницу вашего сайта, перед закрывающим тегом </head> добавьте следующие строки:

<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Но в каждую страницу данные строки необходимо добавлять, если у вас сайт на HTML. Но так как, скорее всего ваш сайт создан на базе, какой-то CMS, то вам будет достаточно добавить эти строки в главный файл вашей темы, которую вы используете для сайта.

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

В некоторых темах в WordPress и Joomla уже могут быть прописаны свои пути к файлу favicon.ico в таком случае удалите их и замените на свои.

Если вы используете, какую либо другую CMS то все делайте по аналогии.

На вкладках страниц и в адресной строке браузера ваша иконка отобразится сразу, что же касается поисковой выдачи Яндекса то здесь нужно, чтобы прошло время, и специальный поисковый робот Яндекса нашел вашу иконку, после этого она станет отображаться в результатах поиска.

Материал подготовлен проектом: WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности

Опубликовано: 06 Январь 2011

Обновлено: 14 Октябрь 2013

Просмотров: 13218

webmastermix.ru

Как создать иконку favicon для сайта онлайн - есть видео урок

Всем хорошего вечера. В очередном выпуске для своих читателей очень полезная информация- как создать иконку для своего личного сайта. Итак, давайте сразу приступим к практической стороне данного вопроса.

Немного расскажу про смысл иконки. Это своего рода визитная карточка в поиске , среди сотен и тысяч таких же ресурсов.И если у вашего проекта она отсутствует, то немедленно ее поставьте. С точки зрения оптимизации и продвижения блогов, этот момент очень важный. Он один из 850 факторов ранжирования великой и ужасной системы Яндекс. Поэтому не будем отступать от общих правил вебмастеров и воспользуемся всеми инструментами для создания красивой иконки для вашего сайта

Вот так будет выглядеть иконка

делаем иконку для сайта

Именно так смотрится иконка на подавляющем большинстве браузеров. Теперь я расскажу как ее сделать своими руками.

Подготовка изображения в фотошопе

Допустим мы хотим разместить иконку повара и наш будущий проект это кулинарный СДЛ сайт. Вот исходник изображения

исходник для иконки

А нам на выходе нужно получить маленькую картинку размеров что-то около 15 на 15 пикселей.

Сервис по созданию фавикона

Для создания подобных миниатюрных картинок в сети интернет есть один очень полезный и замечательный сервис, облегчающий работу всем вебмастерам — www.favicon.cc

Вот его небольшой интерфейс.

делаем иконку онлайн

 

В кратце расскажу про левую панель:

  • Create new Favicon (создание фавикона с нуля, т.е можно нарисовать его прямо в редакторе)
  • Import Image (импортировать изображение, если мы хотим уменьшенный вариант иконки)
  • Latest Favicons (набор уже готовых решений, вообще «заморачиваться» не стоит)
  • Top Rated Favicons (рейтинг самых крутых картинок-иконок)
  • Login (войти под своим именем в сервис)
  • Register (регистрация нового пользователя)

Итак, нужны пункты мы разобрали. Изображение мы подготовили теперь давайте его загрузим на сервер.

загружаем картинку на сервер

Радио кнопку с полем «сохранить пропорции» оставляем как есть, не переключаем на другое и нажимаем загрузить.

Далее идет процесс обработки нашей картинки и приведение ее к нужному формату фавикона.

обработка изображения фавикона

Немного ждем и получаем вот такой результат. Пиксельная раскладка нашего изображения

пиксельный вариант иконки

А вот так мы можем увидеть ее как она будет смотреться в браузере

отображение фавикона в браузере

Далее нам нужно только сохранить нашу иконку, нажав на кнопку Download Favicon

Теперь нам нужно загрузить нашу миниатюру в корень сайта на хостинге. Я пользуюсь СпейсВебом (sweb.ru) и потому буду показывать на примере этой админ панели. Заходим в файловый менеджер

панель хостинга

Выбираем нужную папку. В моем случае с кулинарным сайтом это будет папка recept

загружаем картинку на хостинг

Небольшой нюанс. Внутри любой вашей папки с сайтом имеется еще одна папка. Она называется либо public_html или WWW. Открываете одну из них и уже туда загружаете картинку

загружаем картинку в корень сайта

Вот где будет расположен наш файл

иконка в корне нашего сайта

А теперь финальная дробь. Смотрим как отобразилась наша иконка на сайте через браузер. В моем случае это Хром

установка favicon на сайт

Все отлично! Все прекрасно работает. Теперь вы уже можете делать красивые иконки для своего сайта самостоятельно без труда. Всем спасибо за внимание.

Если не отображается фавикон на сайте

Тому может быть несколько причин.

  • Во-первых, вам нужно почистить куки (cookie) браузера. Вполне возможно, что ваш кэш забит и не дает нормально отображаться фавикону. Как почистить кэш браузера вы можете узнать в видео ниже. Там я все подробно рассказываю и показываю
  • Во-вторых, вполне возможно вам придется сохранить иконку размером 16*16 пикселей в формате .jpg и также  вставить ее в корень сайта. Но! Ниже я прикрепляю код, который Вам нужно будет вставить в шаблон header.php между тегами <head></head>

Вот он этот код:

<head><br> Здесь будет много всяких разных служебных тегов и скриптов<br> <link rel="icon" href="/favicon.jpg" type="image/x-icon" /><br> <link rel="shortcut icon" href="/favicon.jpg" type="image/x-icon" /><br> </head>

<head><br> Здесь будет много всяких разных служебных тегов и скриптов<br> <link rel="icon" href="/favicon.jpg" type="image/x-icon" /><br> <link rel="shortcut icon" href="/favicon.jpg" type="image/x-icon" /><br> </head>

На этом все! Смотрите видео и делайте все по шагам как я.

smarticle.ru