Создаем фавикон для Вашего сайта
Фавикон – это маленькое изображение (значок) слева от названия сайта во вкладке браузера.
Если Вы замечали: раньше у большинства сайтов мы видели в браузере одинаковые значки для блогов, созданных, например, на WordPress, и, также одинаковых, но других, созданных на Blogger. Но в последнее время все больше сайтов сразу бросаются в глаза из-за своих оригинальных фавиконов. Если в Вашем браузере открыто сразу большое количество вкладок (как это обычно бывает у меня), то это очень хорошо видно.
Также фавиконы мы можем увидеть в поисковой выдаче Яндекса рядом со ссылкой на сайт, в закладках и в «Избранном».
Наверняка Вы тоже захотите сделать свой сайт выделяющимся среди всех остальных. Для этого нужно либо сделать свой значок, либо найти для себя подходящий на просторах Интернета.
Создание фавикона для сайта
В любой графической программе (Paint тоже годится) создайте достаточно крупное квадратное изображение, залейте цветом, контрастным по отношению к цвету вкладки браузера.
Внутри этого квадрата контрастным теперь уже к его фону цветом напишите текст (это могут быть Ваши инициалы, первые буквы названия сайта, аббревиатура Вашей компании, что угодно…). Но имейте в виду, что на картинке в браузере прочитать афоризм невозможно, поэтому максимум, что еще можно будет различить – это две буквы, как-то определяющие Ваш сайт.
Вместо текста туда можно вставить подходящее изображение, также контрастное.
Для тех, кто не надеется на свои способности к рисованию, существуют архивы изображений на Вашем же компьютере или в интернете (из любой картинки вырезать кусок квадратной формы – хоть из собственной фотографии: некоторые авторы сайтов так и сделали). В одной из статей я писала, как подготовить изображение для блога.
И третий вариант: найти подходящую квадратную картинку в Интернете и скачать на свой компьютер.
Но изображение – это еще не фавикон. Чтобы его сделать , нужно воспользоваться специальным сервисом, например, этим: http://tools.dynamicdrive.com/favicon/. Надо просто загрузить Вашу картинку и на выходе Вы получите фавикон.
Нажимаете кнопку «Выберите файл», выбираете файл на компьютере (его размер не должен превышать 150 килобайт), и жмете кнопку «Create Icon» (у меня почему-то частично страница переведена на русский, поэтому на кнопках разные языки).
В находящемся ниже окне просмотра можно сразу оценить, как будет выглядеть в браузере заголовок Вашего блога. Вас этот вид устраивает? Тогда жмите «Download Favicon», чтобы сохранить на компьютер полученный файл. Расширение у него будет не совсем привычным: ico.
Установка фавикона на блог
В принципе, установка его на блог сводится к загрузке файла фавикона в корневую папку блога (обычно это папка public_html). Закачать его на хостинг можно с помощью файлового менеджера самого хостинга, либо программой – менеджером типа Filezilla. В одной из статей я подробнейшим образом рассказываю о двух способах загрузки файла на хостинг.
Как только файл фавикона загрузится на сервер, можете обновить блог в браузере, и Вы увидите рядом с названием блога поставленную картинку.
Итак, мы с Вами установили фавикон на наши сайты (блоги).
В заключение – маленький ролик для настроения:
Комментарии
Безусловно важная функция! Всегда использую её на своих сайтах. Удобно как для других пользователей так и для себя лично. Это позволяет легко найти свой сайт или какой-либо другой, когда в браузере открыто множество различных вкладок! Советую пользоваться всем! Нина, спасибо!
Спасибо за отзыв, Володя! Согласна, что это, действительно, очень удобно. Значок узнаваем, и при прочих равных условиях сайт запоминается лучше. Некоторые блоггеры считают, что фавикон оказывает положительное влияние на продвижение сайта, другие с этим не согласны. Но в любом случае, лучше сделать, чем не сделать.
Отличная информация! Особенно полезная для таких “чайников” как я. Спасибо.
Отдельное спасибо за мультик. Вот что значит сила команды!
Да, каждый блоггер должен быть узнаваемым – это главное предназначение фавикона. И автор статьи большая умничка, что поделилась этим со всеми, подробно описав все действия!!! Не вижу кнопочек соц сетей? очень хочется поделиться с другими этой статьей!
Татьяна, блог находится в стадии реконструкции, поэтому кнопочек пока нет. Но в ближайшее время поставлю обязательно. Спасибо!
Мультик классный. Но информация поста, очень нужная и полезная. А главное все понятно и просто изложено.
Самое главное в этом – сделать именно запоминающуюся картинку. Тогда все будет тип-топ.
Спасибо Нин, за напоминание!
Алена, она в любом случае будет запоминающейся. У меня в браузере постоянно открыто штук 30-35 вкладок, и я сайты нахожу именно по картинкам, потому что названия уже не вмещаются. А вот когда нет картинок, приходится их перебирать, чтобы найти нужный
А я пошел уже дальше. И сделал логотипизованные курсоры для своих сайтов.
На парочке сайтов логотипизованные курсоры целиком основаны на фавиконах для этих сайтов.
Александр, я побывала на Вашем сайте. Спору нет: красиво и оригинально. Только у меня есть сомнения: каждый ли посетитель догадается, что по Вашим картинкам надо походить, чтобы найти, что есть что? И каждый ли будет догадываться?
Добрый день! И все-таки подобная информация не для “чайников”. Дело в том, что камнем преткновения бывает рекомендация: загрузите файл в корневую папку сайта. А как конкретно это сделать? Почему-то ВСЕ советчики этому не учат. Так что многие хорошие рекомендации были выброшены в корзину без надежды на применение.
Согласна с Вами, Светлана! Поэтому в следующей статье я, мне кажется, достаточно подробно расписала, как загрузить файл в корневую папку сайта. Но Ваше замечание учту, и постараюсь в ближайшее время описать это предельно подробно. Спасибо Вам за то, что не прошли мимо, а высказали свое мнение. Успехов!
Светлана, статья “Как загрузить файл на хостинг в корневую папку сайта” готова: /kak-zagruzit-fajl-na-xosting-v-kornevuyu-papku-sajta.html
Надеюсь, теперь у Вас не останется вопросов по этому поводу. А если возникнут, пишите, я обязательно отвечу.
Извините, я не отвечаю на Ваш вопрос, тем более Вы давно его решили. Просто решил заглянуть на Ваш сайт и был восхищен! Это ж картинка, чтож Вы его не продвигаете? Даже мне-деду уже-понравилось!!!
С фавиконом сайт выглядит приятнее. Спасибо
Для того и стараемся. И Вам спасибо!
За такой хороший блог!
Спасибо, а то я никак не мог сообразить, что такое фавикон. А каковы должны быть геометрические размеры картинки?
Андрей, геометрические размеры неважны, сервис делает размеры фавикона такими, какие надо.
Добрый вечер. Попробовал. Сделал и загрузил файл favicon.ico в папку public_html – никакого эффекта, загрузил в основную директорию – то же самое. Загрузил в domains/azaznobin.ru/public_html – тогда что-то появилось на закладке в браузере, но рассмотреть не возможно. Так зачем это нужно? У Вашего сайта в поисковике просматривается хорошая фотография (я и думал, что это фавикон), а у моего сайта в поисковике только название без картинки. Жаль здесь нельзя скрин отправить, я бы показал. Как сделать такую картинку, как около названия Вашего сайта в поисковике? Спасибо.
Не знаю, Андрей, что там у вас такое появилось, что рассмотреть невозможно. Значит, надо сделать другой ффавикон, четкий. У меня в брайзере на данный момент открыто 39 вкладок и все фавиконы легко различимы. Конечно, если Вы туда поместили картину известного художника, то ее рассмотреть будет невозможно, а какой-то контрастный текст, или силуэт, или… Вариантов множество. Но если вы считаете, что он ни зачем не нужен, значит, Вам и не нужен.
По поводу фото в поисковиках, в Гугле, по крайней мере: в аккаунте Гугла надо прописать ссылку на Ваш сайт. Но в комментариях это подробно не объяснить, может, напишу статью.
Ну все ясно, надо не фото, а какую-то контрастную картинку-логотип. А вот по поводу фото в поисковике буду ждать. Спасибо.
Ну почему? Многие делают фото фавиконом. Фото ведь тоже может быть контрастным.
Ну вот, сменил, но на браузере ничего не изменилось, наверное в кеш на хосте записалось, подожду, когда обновится, сейчас картинка должна будет хорошо просматриваться, специально подбирал контрастную.
Ну вот, сменилось изображение. Если большой экран, то очень даже…
Да, теперь что-то видно. Что – непонятно, но это и неважно, важно, что картинка отличается от других.
В самом начале жизни моего сайта, по подсказке школы, в которой училась сайтостроению, поставила плагин Favicon, выбрала картинку в архиве плагина и так и стоит она. Одно время хотела поставить другую картинку. Но мои постоянные читатели стали ругаться и просить вернуть на место этот фавикон. Сказали, что многие привыкли уже к этой картинке, а по другой могут не найти)))
Да, Ира, читатели привыкают. Я вот тоже во вкладках знакомые сайты ищу по фавикону. Да и в выдаче Яндекса их сразу узнаешь.
Но я не ставила фавикон по подсказке школы, поэтому мудрила сама. И предпочитаю не устанавливать плагины там, где без них можно обойтись.
Вроде бы ничего сложного, но я столько намучалась, пока установила фавикон! Что и говорить: “чайник” он и в Африке, “чайник”!
Конечно, рисунок сделала сама. Захотелось солнышко на зеленом фоне, а не свое фото, но пока фавикон появился – прошло чуть не месяц, я так волновалась, думала, что опять какой-то ляп сделала.
Бывает, что фавикон не сразу появляется. Но так долго! Удивительно!
Ой, забыла поздравить с наступающим Рождеством! Всем мира, добра и счастья!
Спасибо за поздравление, Лена! И тебя тоже с Рождеством! Счастья!
Очень полезная для новичков статья. Во многих современных шаблонах вордпресс уже имеется возможность установки фавикона из админку, очень удобно)
Да, во многих шаблонах имеется. Есть только два минуса в этом: что фавикон будет неуникальным, если кто-то установит такую же тему, или что те фавиконы, что предлагаются, могут не понравиться
Нет, там ничего не предлагается, загружаешь свою собственную картинку. Так что будет она уникальной или нет – только от автора зависит)
Просто я видела темы с предустановленными фавиконами. Мрак!
Но его, конечно, можно заменить. И если это можно сделать из админки, то очень удобно, бесспорно.
Интересная статья о фавиконах. Я теперь попробую также заняться ими. Как хорошо, что на твоем блоге, Нина, не просто дают комментарии, а общаются между собой. Я много нового для себя узнала и от других, и тогда, когда ты им отвечаешь на их вопросы. Спасибо вам всем. А когда видишь, что и другим что-то непонятно, как и тебе, то тогда хоть проходит чувство отчаяния, не одна я такая. У меня, как и у Светланы, проблема с загрузкой файлов в корневую папку. Люди иногда забывают, что когда-то и они были новичками и говорят, забывая, что для нас это пока непостижимые вещи. Мой новый пост: Почему я решила создать свой блог?
Валентина, чтобы оставить ссылку на свою статью, надо не в форме комментария её писать, а ниже, после кнопки “Оставить комментарий” (не нажимая пока эту кнопку) поставить галочку в маленьком квадратике. Тогда развернется список из 10 последних Ваших статей, выбирайте одну из них и только после этого нажимайте на “Оставить комментарий”.
Надеюсь, понятно объяснила?
Нина, я просто оставила комментарий не задумываясь о ссылках. А о том, чтобы ссылку получить, я не знала такого. Я считала, что вы все сообщаете друг другу о своих последних публикациях. Вот видишь, какой я дремучий новичок. Я теперь буду знать об этом.
Большое спасибо, Нина, за ссылку на эту статью. Это именно то, что нужно
С фавиконом действительно получается гораздо симпатичнее. Когда я его установила, появилась индивидуальность )))