Как сделать иконку для сайта — «самовары» тоже поймут…. Иконка для сайта как сделать


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

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

Лично у меня до смены внешнего вида сайта был фавикон, но после смены я долго его не устанавливал, так как думал над дизайном своего логотипа, ведь потом он будет еще очень долго стоять.

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

Хочу отметить, что иконка для сайта (favikon) нужен каждому сайту, так как этот логотип выводится в поисковой выдаче.

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

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

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

Ну теперь давайте перейдем собственно к тому, как сделать и установить иконку для сайта…

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

И так, есть куча способов как сделать иконку для сайта:

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

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

Третий способ, это воспользоваться банком готовых фавиконов, в котором хранится просто уйма готовых картинок, одну для своего сайта вы обязательно себе подберете. Ссылка на банк фавиконов здесь. (по секрету, я так и сделал, но в элемент дизайна ее обязательно вставлю).

Ладненько сделали себе фавикон, теперь нужно его установить себе на сайт. Это делается очень просто.

Для этого есть два способа, первый это вставить логотип на сайт при помощи кода и второй для блогов вордрпесс, реализовать вывод логотипа при помощи плагина.

Рассмотрим первый вариант:

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

В каждом сайте на хостинге имеется файл index.html, на вордпресс блоге это hedear.php вот именно в нем нужно будет вставить определенный код. Выглядит этот код вот так:

 <link href=»/wp-content/uploads/2014/07/favicon-1.gif» rel=»shortcut icon» /><link href=»/wp-content/uploads/2014/07/favicon-1.gif» type=»image/x-icon» />

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

Важно установить этот тег между тегами <head> и </head> . Если Вы все сделали правильно, то картинка отобразится в заголовке Вашего браузера, только не забудьте почистить кэш браузера, чтобы все отображалось корректно.

Я установил вышеуказанный код в файле hedear.php вот скриншот:

 

Теперь давайте поговорим о том, если Вы не догоняете как сделать это все при помощи вышеуказанного кода, то можно установить логотип на сайт при помощи различных плагинов. Плагин Easy Favicons как нельзя кстати подходит для решения указанной задачи.

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

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

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

 С уважением, Сергей Иванов

creationsait.ru

Как сделать иконку в формате ico: быстро и качественно

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

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

Незаметный элемент, который откладывается в подсознании каждого

Фавикон – это маленькая картинка. В Яндексе она появляется рядом с названием портала уже в поиске, а также обязательно отображается в браузере, стоит вам открыть ресурс.

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

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

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

Расскажу историю о том, как иконка для сайта сыграла со мной злую шутку. Мне было нужно скачать какую-то книгу. Увидел я знакомый фавикон, дизайн тоже я видел не в первый раз. Отлично, я тут уже был! Нажал на скачивание практически не задумываясь. Не успел сохранить, как антивирусник заверещал диким криком, а комп было уже не спасти, пришлось переустанавливать систему. Только в этот момент я вспомнил откуда я знаю этот сайт и хорошо его помню. Точно такая же ситуация случилась около года назад, на этом же ресурсе.

Как создать фавикон всего за 2 минуты

Иконка для вашего сайта может быть в формате png или ico, размером 16 х 16 пикселей.

Вы можете воспользоваться конвертером и создать фавикон из любой картинки. Например, тут http://www.icoconverter.com/. Выберите файл.

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

Выбираем 16 пикселей. Некоторые предпочитают изображения в 8 бит (показатель Bit depth). Тогда картинка будет грузиться быстрее. Мне кажется, что это уже не особо актуально. Используйте красивые и качественные вещи. Это будет гораздо полезнее.

Итак, казалось бы, все. Однако, у меня вылезает ошибка. Дело в том, что размер изображения превышает допустимые нормы. Картинка должна быть не более 3 мб.

Можно сжать и обрезать ее в Photoshop или Paint, но я покажу вам другой вариант. Если вы скачали изображение в гугле, то найдите его вновь, а затем запустите «Поиск по картинке».

Теперь выберите «Маленькие».

Скачайте то же самое фото, но меньшего размера.

Конвертируем снова.

Готово. Фавикон уже в ваших загрузках, можно добавлять на сайт.

Где искать готовые иконки

Более простой и честный способ обрести иконку скачать ее с онлайн сервиса http://www.iconsearch.ru/. Использование этих картинок разрешено администрацией и не преследуется по закону. Никакого авторского права. Введите любое название в поисковую строчку и готово.

Находите изображение в формате png и ico, скачивайте и устанавливаете на сайт.

Но что делать, если хочется создать своими руками? В этом нет ничего сложного.

Творческая работа для профессионалов и рвущимся в специалисты

Любое дело – это хорошо. Круто, если вы тянетесь к новым знаниям и готовы делать всякие мелкие штучки, чтобы развивать свои способности. Если у вас есть желание самому придумать что-то интересное для портала, то вам понадобится бесплатный сервис: http://favicon.ru/.

Выбираете цвет.

Рисуем в предложенном для этого поле.

Параллельно следите за результатом. Затем скачиваете и готово.

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

Затем кликните «Далее».

И ваша картинка превратится в 8-битный фавикон. Воспользуйтесь прозрачностью, чтобы избавиться от фона.

Вот такой результат у вас получится. Не знаю как вам, но мне, откровенно говоря, он не особенно нравится.

Я бы с большим удовольствие использовал для этой работы фотошоп (Как быстро научиться работать с Photoshop). Создал бы иконку, сохранил ее в png, а затем конвертировал при помощи http://www.icoconverter.com. Да, работы значительно больше, зато результат будет интереснее и красивее. Хотя, выбирать вам.

Посмотрите видео, в котором парень за 9 с небольшим минут, создает потрясающую иконку.

Если вам понравился этот ролик и вы хотите более углубленно изучить фотошоп, то порекомендую вам курс Зинаиды Лукьяненко (Фотошоп с нуля в видеоформате VIP 3.0). Буквально за несколько недель вы овладеете всеми навыками, которые нужны для работы с этой программой.

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

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

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

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

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

Удачи вам в ваших начинаниях. До новых встреч.

start-luck.ru

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

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

Привет всем друзьям и читателям — Sozdaiblog.ru!

Если Вы поднимите свой взгляд  вверх и посмотрите на окно ввода вашего поисковика, то слева от URL – названия блога, каждый сможет увидеть маленькую картинку.

Эта картинка называется – «Favicon.iso»(Фавикон), а по простому – «Иконка».

И сегодня, я Вам расскажу, как сделать иконку для сайта на WordPress.

Многие говорят, что фавикон не особо нужен, но я не могу с этим согласиться.

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

А теперь, посмотрите на закладки и скажите, какой сайт первым привлёк Ваше внимание?

Вот, то-то и оно.  Да и вообще, мне лично нравиться, как он смотрится в уголке моего браузера.

 

Как сделать Иконку для сайта на WordPress.

Сделать фавикон не сложно, для этого подойдёт любой графический редактор. Не знаю, как Вы, но я пользуюсь Adobe Photoshop.

Редактируете в редакторе, любую понравившуюся Вам картинку и сохраняете её в формате PNG или GIF, с размером 16х16px или 32х32px.

Теперь, её нужно загрузить на хостинг в папку с темой сайта.

Сделать это быстро, можно с помощью ftp-клиента.

Научиться обращаться с ftp-клиентом Вы сможете, прочитав статьи:

 

 

Вот такой путь должен получиться у вашей картинки:

 

  • domains/Ваш сайт /wp-content/themes/картинка.png

 

Далее нам нужно внести изменения в файле — «header.php».

Для этого заходим в админку WordPress, раздел – Внешний вид => Редактор:

 

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

 

И в правой колонке выбираем файл – «header.php»:

 

сделать фавикон

 

Тут, Вам нужно найти теги — <head> </head> (обычно они в начале) и перед закрывающим тегом </head> вставить следующий код:

 

<link rel="shortcut icon" type="image/png" href="http://Имя вашего сайта /wp-content/themes/Картинка.png"/>

 

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

Вообще в Интернете очень много сайтов, с помощью которых можно сделать фавикон.

Вот один из них:

 

 

Заходите и загружаете любую картинку с компьютера или интернета, нажимаете – «Создать Favicon.iso»:

 

сделать фавикон

 

Сайт автоматически обработает и сгенерирует Вашу иконку, после чего предложит её скачать:

 

сделать фавикон

Как создать анимированный favicon.iso.

Для того чтобы создать анимированный favicon, Вам нужно найти, или сделать в графическом редакторе, анимированную картинку, но исключительно в формате – GIF.

Затем, по той же схеме прописать следующий код:

 

<link rel="shortcut icon" type="image/gif" href="http://Имя вашего сайта /wp-content/themes/Картинка.gif "/>

 

Делайте всё точно, как я описал и будет Вам счастье.

На этом всё!

Думаю я смог донести до всех, как сделать иконку для сайта.

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

Расскажите, а Вы используете иконку для сайта?

На сегодня всё. Удачи.

С уважением, Денис Черников!

Интересное по теме:

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

sozdaiblog.ru