Как создать фавикон для сайта

Создаем фавикон для Вашего сайта

фавикон для блога

Фавикон – это маленькое изображение (значок) слева от названия сайта во вкладке браузера.

Если Вы замечали: раньше у большинства сайтов мы видели в браузере одинаковые значки для блогов, созданных, например, на WordPress, и, также одинаковых, но других, созданных на Blogger. Но в последнее время все больше сайтов сразу бросаются в глаза из-за своих оригинальных фавиконов. Если в Вашем браузере открыто сразу большое количество вкладок (как это обычно бывает у меня), то это очень хорошо видно.

Также фавиконы мы можем увидеть в поисковой выдаче Яндекса рядом со ссылкой на сайт, в закладках и в «Избранном».

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

Создание фавикона для сайта

В любой графической программе (Paint тоже годится) создайте достаточно крупное квадратное изображение, залейте цветом, контрастным по отношению к цвету вкладки браузера.

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

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

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

И третий вариант: найти подходящую квадратную картинку в Интернете и скачать на свой компьютер.

Но изображение – это еще не фавикон. Чтобы его сделать , нужно воспользоваться специальным сервисом, например, этим: http://tools.dynamicdrive.com/favicon/.  Надо просто загрузить Вашу картинку и на выходе Вы получите фавикон.

создание фавикона для блогаНажимаете кнопку «Выберите файл», выбираете файл на компьютере (его размер не должен превышать 150 килобайт), и жмете кнопку «Create Icon» (у меня почему-то частично страница переведена на русский, поэтому на кнопках разные языки).

В находящемся ниже окне просмотра можно сразу оценить, как будет выглядеть в браузере заголовок Вашего блога. Вас этот вид устраивает? Тогда жмите «Download Favicon», чтобы сохранить на компьютер полученный файл. Расширение у него будет не совсем привычным: ico.

Установка фавикона на блог

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

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

как установить фавикон на блогИтак, мы с Вами установили фавикон на наши сайты  (блоги).

TEXT.RU - 100.00%

В заключение – маленький ролик для настроения:

Это тоже интересно:

Комментарии

  • Владимир пишет:

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

    • Нина пишет:

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

  • Olga пишет:

    Отличная информация! Особенно полезная для таких “чайников” как я. Спасибо.
    Отдельное спасибо за мультик. Вот что значит сила команды!

  • Татьяна пишет:

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

    • Нина пишет:

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

  • Вера пишет:

    Мультик классный. Но информация поста, очень нужная и полезная. А главное все понятно и просто изложено.

  • Самое главное в этом – сделать именно запоминающуюся картинку. Тогда все будет тип-топ.
    Спасибо Нин, за напоминание!

    • Нина пишет:

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

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

    • Нина пишет:

      Александр, я побывала на Вашем сайте. Спору нет: красиво и оригинально. Только у меня есть сомнения: каждый ли посетитель догадается, что по Вашим картинкам надо походить, чтобы найти, что есть что? И каждый ли будет догадываться?

  • Светлана пишет:

    Добрый день! И все-таки подобная информация не для “чайников”. Дело в том, что камнем преткновения бывает рекомендация: загрузите файл в корневую папку сайта. А как конкретно это сделать? Почему-то ВСЕ советчики этому не учат. Так что многие хорошие рекомендации были выброшены в корзину без надежды на применение.

    • Нина пишет:

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

    • Нина пишет:

      Светлана, статья “Как загрузить файл на хостинг в корневую папку сайта” готова: http://mojbiznes.ru/kak-zagruzit-fajl-na-xosting-v-kornevuyu-papku-sajta.html
      Надеюсь, теперь у Вас не останется вопросов по этому поводу. А если возникнут, пишите, я обязательно отвечу.

    • Андрей пишет:

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

  • Дмитрий пишет:

    С фавиконом сайт выглядит приятнее. Спасибо

  • Osip пишет:

    За такой хороший блог!

  • Андрей пишет:

    Спасибо, а то я никак не мог сообразить, что такое фавикон. А каковы должны быть геометрические размеры картинки?

  • Андрей пишет:

    Добрый вечер. Попробовал. Сделал и загрузил файл favicon.ico в папку public_html – никакого эффекта, загрузил в основную директорию – то же самое. Загрузил в domains/azaznobin.ru/public_html – тогда что-то появилось на закладке в браузере, но рассмотреть не возможно. Так зачем это нужно? У Вашего сайта в поисковике просматривается хорошая фотография (я и думал, что это фавикон), а у моего сайта в поисковике только название без картинки. Жаль здесь нельзя скрин отправить, я бы показал. Как сделать такую картинку, как около названия Вашего сайта в поисковике? Спасибо.

    • Не знаю, Андрей, что там у вас такое появилось, что рассмотреть невозможно. Значит, надо сделать другой ффавикон, четкий. У меня в брайзере на данный момент открыто 39 вкладок и все фавиконы легко различимы. Конечно, если Вы туда поместили картину известного художника, то ее рассмотреть будет невозможно, а какой-то контрастный текст, или силуэт, или… Вариантов множество. Но если вы считаете, что он ни зачем не нужен, значит, Вам и не нужен.
      По поводу фото в поисковиках, в Гугле, по крайней мере: в аккаунте Гугла надо прописать ссылку на Ваш сайт. Но в комментариях это подробно не объяснить, может, напишу статью.

  • Андрей пишет:

    Ну все ясно, надо не фото, а какую-то контрастную картинку-логотип. А вот по поводу фото в поисковике буду ждать. Спасибо.

  • Андрей пишет:

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

  • Андрей пишет:

    Ну вот, сменилось изображение. Если большой экран, то очень даже…

  • Ирина пишет:

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

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

  • Вроде бы ничего сложного, но я столько намучалась, пока установила фавикон! Что и говорить: “чайник” он и в Африке, “чайник”! :-) Конечно, рисунок сделала сама. Захотелось солнышко на зеленом фоне, а не свое фото, но пока фавикон появился – прошло чуть не месяц, я так волновалась, думала, что опять какой-то ляп сделала.

  • Ой, забыла поздравить с наступающим Рождеством! Всем мира, добра и счастья!

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

    • Да, во многих шаблонах имеется. Есть только два минуса в этом: что фавикон будет неуникальным, если кто-то установит такую же тему, или что те фавиконы, что предлагаются, могут не понравиться

  • Валентина пишет:

    Интересная статья о фавиконах. Я теперь попробую также заняться ими. Как хорошо, что на твоем блоге, Нина, не просто дают комментарии, а общаются между собой. Я много нового для себя узнала и от других, и тогда, когда ты им отвечаешь на их вопросы. Спасибо вам всем. А когда видишь, что и другим что-то непонятно, как и тебе, то тогда хоть проходит чувство отчаяния, не одна я такая. У меня, как и у Светланы, проблема с загрузкой файлов в корневую папку. Люди иногда забывают, что когда-то и они были новичками и говорят, забывая, что для нас это пока непостижимые вещи. Мой новый пост: Почему я решила создать свой блог?

    • Валентина, чтобы оставить ссылку на свою статью, надо не в форме комментария её писать, а ниже, после кнопки “Оставить комментарий” (не нажимая пока эту кнопку) поставить галочку в маленьком квадратике. Тогда развернется список из 10 последних Ваших статей, выбирайте одну из них и только после этого нажимайте на “Оставить комментарий”.
      Надеюсь, понятно объяснила?

  • Валентина пишет:

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

  • Виктория пишет:

    Большое спасибо, Нина, за ссылку на эту статью. Это именно то, что нужно :)

  • Галина пишет:

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

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">