Как сделать favicon — мини логотип для сайта или блога? Как сделать фавикон для сайта


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

Всем привет! Сегодня я решил сделать для своего блога SEO-Mayak.com новенький фавикончик и заодно, в рамках рубрики «WordPress для новичков«, я расскажу о разных онлайн сервисах, с помощью которых можно создать уникальную картинку или сгенерировать фавикон из какого-нибудь готового изображения.

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

Что такое фавикон и зачем он вообще нужен? Фавикон по англ. пишется как Favicon и переводится дословно — «Любимая иконка», но в Викопедии приводиться другой перевод — «Значок для избранного».  Фавикон можно сравнить с логотипом, уменьшенным в несколько раз и имеющим расширение .icon.

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

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

Фавиконы бывают в виде обычной или анимированной картинки, а еще в  виде зD изображения, на это уже добиваются средствами Фотошоп.

Фавиконы в виде обычной картинки

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

Давайте рассмотрим такой пример.  Вот хочу я создать сайт по тематике — «Туризм и путешествия», так какую же картинку я могу подобрать для фавикона. Буду руководствоваться двумя ранее известными мне правилами.

Правило №1.

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

Правило №2.

Картинка должна быть квадратной и весом не более 150 kB.

После не долгих поисков я нашел вроде бы подходящую картинку с изображением воздушного шара соответствующую вышеперечисленным правилам:

Теперь мне надо ее преобразователь в формат .icon  и уменьшить до размеров 32х32 пикселя.

Для преобразования картинок в фавиконы существуют специальные серверы и я воспользуюсь одним из них — tools.dynamicdrive.com.

Достаточно выбрать изображение и загрузить его на сервер, затем выбрать формат и нажать кнопочку — «Greate Icon»:

И после обработки получаем два две картинки 32х32 и 16х16. Одна картинка это иконка для рабочего стол а вторая для адресной строки, закладок и поисковых систем.

Если на картинке размером 32х32 еще можно разобрать силуэт воздушного шара, то на изображении форматом 16х16  уже плохо понятно, то ли это какае-то луковица или перевернутая груша 🙂

Из этого следует. что существует еще одно требование к картинке для фавикона.

Правило №3..

Объект на картинке должен иметь небольшой размер в реальном мире. Для фавикона не годятся изображения самолетов, кораблей, воздушных шаров и т.д.

Поэтому я немного опустился на землю и нашел другое изображение. Давайте попробуем его:

Отлично, посмотрим, что получается после обработки:

Ну вот, совсем другое дело. Скачиваем фавикон на свой компьютер нажимая — «Download FavIcon».

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

Как сделать анимированный фавикон

Анимированные фавиконы просто супер!  К сожалению не все браузеры поддерживают анимацию в адресной строке и в закладках, но тем не менее они безусловно привлекают внимания пользователя и тем самым способствуют хотя бы не больному увеличению трафика. Для создания анимированных фавиконов есть хороший онлайн сервис favicon.cc. Сервис буржуйский, но страницу можно перевести на русский посредством функций браузера и получится вполне читабельно:

На левую панель вообще не обращаем внимания, в принципе сервис уже готов к работе и осталось выбрать цвет или цвета будущего рисунка. Я для примера нарисую кастрюлю 🙂 С помощью зажатой левой клавиши мышки водим по квадратикам и они закрашиваются в нужный цвет, а если надо стереть лишнее, то нажимаем по квадратику правой кнопкой мыши. Я покажу Вам в качестве примера простенькую анимацию, состоящую всего из 2 изображений. Первое изображение:

После того, как рисунок готов нажимаем — «Использование анимации»  и выпадет панель со следующими функциями:

Выбираем — «Добавление новых кадров» и уже на чистом поле рисуем вторую часть анимации:

Чуть ниже можно посмотреть на результат и скачать готовый файл:

Как выглядит мой «шедевр»? 🙂

Конечно это самый простой пример анимации, а есть анмированные фавиконы состоящие и 6 эпизодов, но это уже «мультфильмы» какие-то.

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

Наверное у Вас в Фотошоп отсутствует формат . icon, но это не беда, сейчас мы это дело поправим. Скачиваем архив плагина ICOFormat для Adobe Photoshop и распаковываем его в папку —  C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats. Запускаем фотошоп, загружаем любое изображение и пробуем его сохранить в формате .icon

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

Как установить фавикон на сайт

Установка фавикона минутное дело и описывать даже особо нечего. Значит, у нас уже есть файл размером 32х32 пикселя и на надо всего лишь закачать его в корень сайта с помощью FTP клиента, туда где находятся папки wp-admin, wp-content и wp-includes. Кстати совсем не обязательно помещать файл в корень блога, можно закинуть его и в другое место, но тогда надо правильно указать путь к нему в файле header.php.

Если мы все же поместили файл с фавиконом в корень сайта, то в файле header.php перед закрывающим тегом </head> надо прописать следующее:

<link href="http://Ваш сайт/название картинки.ico" rel="shortcut icon" /> <link href="http://Ваш сайт/название картинки.ico" rel="icon" type="image/x-icon" />

Вот в принципе и все, фавикон на сайт установлен!

Сервисы готовых фавиконов

Кому лень самому заморачиваться, у тех есть вариант выбрать и скачать готовый фавикон со следующих сервисов:

iconj.com — большой выбор фавиконов.

audit4web.ru — тут тоже много иконок.

Набор приколов:

На сегодня у меня все. Чтобы узнать больше, подпишитесь на обновления блога. Как вам статья?

С уважением, Виталий Кириллов

seo-mayak.com

Как сделать favicon для сайта или блога? Делов на 5 минут

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

как сделать favicon

Давайте для начала разберем, что такое favicon? Favicon – полное звучание с английского FAVorites ICON, что в переводе означает (очень маленькое изображение), предназначенное для «Избранного».

Чтобы было понятней, смотрите снимок с экрана, в результатах поиска Яндекс, favicon имеет такой вид:

Результаты поиска яндекс

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

примеры иконок

А так она выглядит сейчас на моем сайте, она мне не нравится, сразу говорю, поэтому пишу данный пост и заодно переделываю еe себе 🙂

моя старая иконка

Favicon (фавиконки) бывают разных размеров, от самых малых 16×16 до самых крупных 64×64, с промежутками 24×24, 32×32 и 48×48, но стандарт считается — 16×16. Более крупные фавиконки используют для создания ярлыков на рабочем столе или в отдельной папке, для хранения веб–страниц.

Если у вас еще нет своего мини логотипа, то немедленно займитесь им!

Как сделать favicon – онлайн сервисы

Как сделать favicon используют различные сервисы? На самом деле, это самый удобный вариант, сроки изготовления 2-3-5 минут. Размеры должны быть строго в рамках 16×16 пикселей, а расширение .ico, gif, png, jpg  и т.д., полностью будет выглядеть так: фавикон.ico

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

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

Все довольно просто и интуитивно понятно, просто попробуйте и сами в этом убедитесь.

Следующий сервис это favicon.ru – сразу скажу, что это не лучший сервис на данный момент, но все же им можно пользоваться. Есть два варианта использования:1) Сделать favicon путем загрузки изображения

загрузка изображения

2) Нарисовать самому.

нарисовать фавиконку

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

картинка-блог

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

скачать фавикон

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

После того, как favicon’ka лежит у вас на компьютере, ее нужно загрузить в корневой каталог блога. Корневой каталог – это адрес http://life-crazy.ru/favicon.ico, именно здесь поисковые машины ищут фавиконку.

Так как у меня блог на движке wordpress, пример я буду показывать на нем, хотя смысл практически везде один. Существует множество различных тем, где фавикон лежит по другому адресу, к примеру: адрес_сайта.ру\themes\название_шаблона\images\фавикон.ico. В таком случае вам просто нужно заменить иконку по этому адресу, или прописать другие пути.

Итак, подключаемся по ftp (см. статью «Правильная настройка filezilla») и закидываем туда созданную иконку. Далее нужно покопаться в файле шаблона header.php, и поискать нечто подобное с:

&lt;link rel="icon" type="image/x-icon" href=" /favicon.ico"&gt;

&lt;link rel="icon" type="image/x-icon" href=" /favicon.ico"&gt;

Если подобной строки нет, то смело вставляйте эти две строчки между тегом <head></head>:

&lt;link rel="icon" href="http://life-crazy.ru/favicon.ico" type="image/x-icon"&gt; &lt;link rel="shortcut icon" href="http://life-crazy.ru/favicon.ico" type="image/x-icon"&gt;

&lt;link rel="icon" href="http://life-crazy.ru/favicon.ico" type="image/x-icon"&gt; &lt;link rel="shortcut icon" href="http://life-crazy.ru/favicon.ico" type="image/x-icon"&gt;

Вот так это выглядит у меня, не забудьте поменять адрес сайта:

установка кода

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

Можно скачать favicon уже готовый!

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

1. http://www.audit4web.ru/favicon/ – больше чем 15000 иконок.2. http://www.iconj.com/ – больше 18000 иконок, встречаются даже gifki -  анимированные иконки. Присутствует генератор, довольно таки не плохой.

Чтобы бы сохранить понравившуюся картинку, нажмите на ней ПКМ и выберете пункт «Сохранить изображение». Сохраняйте к себе на локальный компьютер. Схема установки, такая же, как и в первом варианте!

Что, не нашли? Идем дальше.

Онлайн генератор — http://www.favicon.cc — принцип такой же, как и в первом варианте, можно нарисовать, а можно загрузить картинку, воспользовавшись пунктом «Import Image» и сохранить себе на ПК, действия для загрузки такие же, как и первом варианте.

Рисовалка иконок

Вот еще один сервис, на котором остановился я — http://www.chami.com/HTML-Kit/services/favicon , здесь также можно загрузить картинку, но я поступил иначе, я воспользовался вторым пунктом, это пункт, который позволяет сделать фавикон из аккаунта twitter’a.

аккаунт твиттера

В комплекте поставляется иконка в формате .ico и gif. Если хотите сделать, чтобы мини логотип у вас двигался, то есть был анимированный, то закиньте в корневую директорию 2 файла, предварительно скачав архив:

скачать favicon

favicon.ico и animated_favicon1.gif, единичку можно стереть — animated_favicon.gif.

Соответственно в настройках тоже нужно указать, что иконка у вас анимированная. Также между тегом <head></head> вставляйте кусочек этого кода:

&lt;link rel="shortcut icon" href="http://life-crazy.ru/favicon.ico" &gt;  &lt;/link&gt;&lt;link rel="icon" type="image/gif" href="http://life-crazy.ru/animated_favicon.gif" &gt;  &lt;/link&gt;

&lt;link rel="shortcut icon" href="http://life-crazy.ru/favicon.ico" &gt;  &lt;/link&gt;&lt;link rel="icon" type="image/gif" href="http://life-crazy.ru/animated_favicon.gif" &gt;  &lt;/link&gt;

В нем замените только адрес сайта. Анимация мне не понравилась, поэтому с этого сервиса я взял просто фавикон.ico и прописал код, как в самом первом варианте.

В сети множество различных генераторов, вот еще несколько:

Хороший сервис на русском — http://www.favicon.by, в использовании очень прост.

* http://www.cy-pr.com/tools/favicon/* http://genfavicon.com/* http://www.tools.dynamicdrive.com/favicon/* http://favicon-generator.org/* http://www.faviconfactory.com/* http://shaheeilyas.com/favicon/

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

Отпишите в комментариях, каким сервисом пользуетесь вы? И есть ли фавиконка вообще у вас на блоге или сайте?

Рекомендую подписаться на обновления блога и следить за новостями, вскоре очень много полезного и интересного!!!

My Dream

С уважением, Михед Александр.

life-crazy.ru

Как сделать и установить фавикон для сайта (favicon)

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

Также рассмотрим бесплатные сервисы (онлайн генераторы) помогающие значительно упростить задачу и за несколько минут создать фавикон.

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

Это изображение называется Фавикон  (читаем Favicon).

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

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

Фавикон (favicon) что за атрибут?

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

Словоформа Favicon состоит из пары слов английского языка Favorites Icon (воспользуйтесь переводчиком). Почти для каждого интернет проекта есть свой мини-логотип, который отображается на закладке браузера. Размер файла иконки составляет 16×16 пикселей и имеет расширение ico (хранилище иконок для Windows).

Отображение фавикона на закладках браузера

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

Чем полезен Favicon для сайта?

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

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

Отображение фавикона в поисковой выдаче

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

Способы создания Фавикон для сайта

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

Готовые коллекции Фавикон

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

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

Если же нет идей по поводу картинки, то можно попросту сделать рисунок с изображением одной или нескольких букв, по которым можно было бы узнать название или тематическое содержание сайта. Например, на сайте Одноклассники.ру на фавиконе размещены буквы «OK», по которым можно сразу узнать, что это за социальная сеть.

Ресурсы с иконками:

  1. http://www.thefavicongallery.com/ - небольшая коллекция изображений разных тематик. Всего в коллекции около 300 иконок. Каждую будущую фавиконку можно просмотреть в увеличенном виде, а затем сохранить на свой компьютер
  2. http://www.iconj.com/ - содержит более 3 тысяч изображений для фавикон. Сервис позволяет сохранять изображения в разных графических форматах.
  3. http://www.favicon.cc/ - огромнейший банк favicons, количество которых на момент написания статьи 228 839 штук. Единственный минус, что на одной странице находится 20 иконок, и чтобы выбрать понравившуюся придется долго листать.
  4. http://www.favicon.by/ - не знаю количество, но очень много готовых иконок, при нажатии на понравившуюся, фавиконка сразу скачивается на компьютер.
  5. http://www.flaticon.com — ресурс с огромным количеством готовых иконок, на все случаи жизни, которых на момент написания статьи более 384 тыс. сгруппированных по 7 тыс. группам. Иконки можно скачать в разных форматах с необходимым разрешением.

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

Графические редакторы

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

Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.

Картинки в поисковых системах

Самый простой, но довольно эффективный способ для поиска будущего фавикона соответствующего тематике Вашего веб-сайта.

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

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

Иконки в Яндекс.Картинках

Онлайн сервисы создания Favicon

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

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

Вот список наиболее популярных сервисов для онлайн создания фавикон:

  1. http://www.favicon.cc/ — англоязычный сервис создания Favicon
  2. http://favicon.ru/ — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
  3. http://www.favicon.by/ — имеет два интерфейса, русский и английский. Очень мне понравился этот сервис, рекомендую и Вам.

Устанавливаем Favicon на сайт

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

Разберем наиболее популярные варианты установки favicon.

Плагин — простейшее решение

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

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

  1. Использовать свой граватар (gravatar), для этого у Вас должен быть настроен глобально распознаваемый аватар. Как правило это фото владельца блога. Не рекомендую использовать данную опцию, после установки Вы сами поймете почему.
  2. Заранее подготовленный файл с изображением. Для этого необходимо указать внешний URL картинки.
  3. Готовые фавиконы зашитые в плагин по умолчанию, коих ровно 100.

Установка фавикона с помощью плагина

Встроенные возможности WordPress

Почти у всех платных (и некоторых бесплатных) тем для WordPress есть встроенная возможность добавить Фавикон на свой блог. Например данная опция для темы моего блога выглядит так:

Встроенная возможность в WordPress

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

Установка с помощью кода html

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

Первым шагом подготовленный файл иконки (16×16 pix) необходимо загрузить на сервер Вашего хостинга, в корневую папку Вашего сайта (папки www или public_html) . Сделать это можно из админки хостинга, либо как вариант воспользоваться службой FTP в Total Commander.

Далее в файл index.html (если у Вас лендинг или подписная страница), или в файле header.php (если у Вас сайт на одной из популярной CMS) внутри тега <head> необходимо прописать следующий код:

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

После этой процедуры Фавикон порадует своим появлением на вкладке браузера Вашего сайта. Если он не появится рекомендую очистить кэш браузера используя сочетание CTRL+R.

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

P.S. Рекомендую посетить страницу РЕКОМЕНДУЮ, где собраны качественные, а главное бесплатные курсы.

С Уважением Дмитрий Леонов | leonov-do.ru

Рекомендую прочитать похожие статьи:

Новости блога Получай обновления первым!

Согласен (-на) с политикой конфиденциальности и обработки персональных данных

leonov-do.ru

Как сделать favicon для сайта

Здравствуйте! У вас еще до сих пор нет favicon для сайта? А она важна для продвижения вашего сайта, т.к. делает его запоминающимся и уникальным. Особенно, если Ваша favicon будет оригинальная, т.е. не стоит делать ее такой, как у конкурента. Итак, если Вы хотите узнать как сделать фавикон для сайта, следуйте простым инструкциям, изложенным ниже в данной статье.

Содержание:

Как выглядит favicon и что это такое

Favicon (сокр. от favorite icon) – это маленькая квадратная иконка, которая отображается на вкладке страницы рядом с ее заголовком и также в закладках браузера.

Favicon для сайта

Создание favicon по шагам

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

Создаем изображение

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

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

Создаем файл favicon.ico, c помощью онлайн-генератора

Загружаем картинку на данный сайт. Изображение должно быть размером менее 50 кб. Нажимаем кнопку «Iconify». Дожидаемся, когда сервис сформирует иконку и скачиваем файл favicon.ico.

Загрузка favicon на сайт

Теперь осталось всего лишь загрузить файл favicon.ico в корневую папку сайта через FTP или web-интерфейс, предоставляемый хостингом. Браузер автоматически будет отображать файл favicon.ico, находящийся в корне сайта.

Какого размера фавикон

Фавикон может быть размером 16×16, 32×32, 48×48 пикселей. В любом случае это квадрат. Какого размера фавикон выбрать решайте сами, расскажу лишь об отличиях между ними. Разница будет заключаться в качестве отображения и объеме файла. Фавикон размером 16×16 будет весить примерно 1 кб, 32×32 — 6 кб, 48×48 — 34 кб.

Поиск favicon в интернете

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

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

Если у вас после этих действий все еще не отображается favicon, проверьте правильно ли Вы указали папку для копирования файла. Для этого наберите в браузере http://yoursite.ru/favicon.ico. В браузере должна отобразиться ваша иконка. Также может потребоваться обновить кэш браузера. Это можно сделать, нажав комбинацию клавиш Ctrl+F5.

Favicon для сайта

Если не отображается favicon в Яндексе, не спешите сильно огорчаться.

Пример favicon в Яндексе

Для того, чтобы favicon появился в Яндексе, должно пройти примерно 2 месяца.

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

С уважением, Евгений Кузьменко.

ekuzmenko.ru

Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

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

Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами. Ну, и естественно мы поговорим о том, как настроить и подключить их к своему сайту.

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

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

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

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

Фавикон для сайтов

Фавикон для сайтов

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

Favicon в закладках браузера

Favicon в закладках браузера

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

Отображения фавикона в выдаче поисковой системы Яндекс

Отображения фавикона в выдаче поисковой системы Яндекс

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

Естественно, что для проверки своего сайта вам нужно будет в конце приведенной ссылки вместо URL-адреса моего блога написать свой.

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

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

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

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

В принципе, чтобы создать favicon, вовсе не обязательно использовать какие-либо специальные онлайн генераторы, хотя это довольно удобно и просто. Можно попытаться сделать его в Photoshop, но он по умолчанию, к сожалению, не умеет сохранять изображения в формате ICO. Поэтому для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин.

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

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

Как создать Favicon онлайн и где можно скачать их коллекцию

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

  1. Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».

    Создать фавикон онлайн

    Создать фавикон онлайн

    В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

    Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

    Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона, которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

    Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконокFavicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

    В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

    Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

    На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.
  2. Favicon.ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.

    Создать фавикон онлайн

    Создать фавикон онлайн

    Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.

  3. Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа.

    Онлайн генератор логотипов для создания фавиконов

    Онлайн генератор логотипов для создания фавиконовДля того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

  1. FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
  2. AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
  3. FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
  4. Iconj — примечательно то, то созданную иконку вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
  5. DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
  6. Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
  7. Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
  8. Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
  9. Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
  10. Фавикон-генератор — простенько и со вкусом...

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

  1. Галерея иконок для сайта favicon.ico — более чем 15000 мини-логотипов для вашего сайта на любой вкус и цвет
  2. Iconj — достаточно большая коллекция значков, разработанных другими людьми и выложенных в общий доступ
  3. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox
  4. The Favicon Gallery — еще чутка подходящих по размеру иконочек

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

Если поставить фавикон таким образом у вас не получилось, то возможно вам придется очистить кэш вашего браузера, т.к. часто бывает, что из кэша загружается старая версия. Можете попробовать открыть ваш сайт в FireFox, у меня он лучше всего реагирует на проводимые изменения без очистки кэша. Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить?

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

Как узнать путь до Favicon.ico на вашем сайте

Как узнать путь до Favicon.ico на вашем сайте<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки/favicon.ico" />

Также возможен и такой вариант задания служебной гиперссылки link:

<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

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

<link rel="shortcut icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" /> <link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php из папки с используемой вами темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете header.php в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

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

<link rel="shortcut icon" href="/img/favicon.gif" type="image/gif" > <link rel="icon" href="/img/favicon.gif" type="image/gif" >

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме

Рубрика: Как самому раскрутить сайт, Тестируем онлайн-сервисы

ktonanovenkogo.ru

Как сделать фавикон (favicon.ico) для сайта

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

Как сделать фавикон (favicon.ico) для сайта

Что же это за птица такая и зачем он нам нужен? Начнем, пожалуй, с простого определения данного понятия.

Итак, Favicon представляет собой некоторую аббревиатуру, сокращение от английских слов “Favorite” и “Icon”. На русский это можно перевести, как «значок для избранного», значок для веб-страницы или сайта целиком.

Отображается эта картинка размером 16х16 пикселей рядом с адресом сайта или его именем в закладках и прочих блоках интерфейса. Вот вам примеры различных фавиконок.

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

Значение фавиконки для сайта

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

Во-вторых, в поисковой выдаче при формировании сниппета в Яндексе сайт всегда показывается с этим значком. Если хотите выглядеть «опрятно» и привлекать внимание, то придется найти генератор фавиконки в интернете и создать ее, но об этом немного позже.

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

Попросту говоря, этот значок является еще одним средством увеличить популярность и посещаемость вашего ресурса.

Вот вам пример запроса и списка сайтов к нему подобранного.

Пример фавиконок в Яндексе

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

1)    «Найдите» свой сайт с помощью поисковика Яндекс. Если изображение уже загружено, то оно будет видно.

2)    Попробуйте вставить в адресную строку своего браузера http://favicon.yandex.net/favicon/site.ru, где site.ru будет названием вашего ресурса.

3)    Если пользуетесь инструментом Яндекс.Вебмастер, то сможете проверить состояние своих фавиконок с его помощью (они отображаются рядом с сайтами).

Генератор favicon онлайн и коллекции готовых значков

Думаю, всем очевидно, что этот «маленький» вопросик как-то надо решать. Я предлагаю вам несколько вариантов, точнее два с половиной.

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

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

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

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

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

Коллекции готовых значков

Где же можно подобрать более-менее приличный элемент, который сможет украсить ваш ресурс, придав ему необходимые шарм и привлекательность?

TheFaviconGallery

Ссылка. Элементарный сайт, содержащий более 450 различных изображений. Среди них есть и весьма симпатичные, и уже известные. На мой взгляд, подбор иконки здесь имеет смысл для отдельных страниц сайта. Ну, к примеру, страница посвящена каким-нибудь пунктам быстрого питания, а фавикон для нее выглядит, как значок Макдональдс. В этом смысле подобный «плагиат» смотрится вполне уместно.

Галерея фавиконок

Audit4web.ru

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

Фавиконы с помощью Audit4web.ru

Favicon.co.uk

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

Фавикон в Favicon.co.uk

Favicon.cc

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

Как создать favicon в Favicon.cc

Findicons.com

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

Фавикон онлайн в Findicons.com

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

Онлайн-генератор фавикон

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

Она может иметь целую кучу расширений от ICO до JPEG. Размер, обычно, составляет 16 на 16 пикселей. Самый элементарный способ сделать такую картинку — это взять и нарисовать ее в любом графическом редакторе, хоть в том же Пейнте. Правда, такой вариант подходит лишь тем, кто имеет хотя бы какой-то минимальный талант и навыки в этом искусстве. В противном случае ничего хорошего не выйдет.

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

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

Онлайн генератор фавикон Favicongenerator.com

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

Фавикон в Cy-pr.com

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

Фавикон для сайта с нуля

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

Antifavicon.com

Не надо бояться приставки «анти». Ресурс, как никакой другой, помогает создать достаточно оригинальный фавикон по той простой причине, что делается это здесь весьма интересным способом. Здесь можно сделать не какую-то картинку, а надпись на цветном фоне. Просто вводим нужные буквы и выбираем цвет. Как по мне, так вот этот способ можно назвать идеальным. Вспомните иконки ВКонтакте и Википедии. Все гениальное просто.

Сервис Antifavicon.com

Amichurin.Appspot.com

Перед вами рабочая область 16 на 16 квадратов. Каждый из них вы можете закрасить любым цветом, получив осмысленную или не очень картинку. Творите, сочиняйте, пробуйте. Кто знает, возможно у вас к этому талант и ваши фавиконы будут пользоваться таким спросом, что вы займетесь их продажей.

Фавикон в Amichurin.Appspot.com

Favicon.cc

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

Фавикон с нуля в Favicon.cc

что я тут нарисовал, сам ума не приложу

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

Favicon-Generator.org

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

Favicon в Favicon-Generator.org

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

Фавикон на заказ

 

Теперь же я бы хотел поговорить о таких интересных вещах, как анимированные фавиконы.

Создание анимированных favicon

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

До безумия элементарный в работе ресурс. Просто даем ему картинку и вписываем нужный текст. Все. Получаем и оцениваем результат. Файлы можно скачать в запакованном виде.

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

Белорусский сервис для создания фавикон - Favicon.by

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

Как сделать favicon? Полезные советы

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

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

В-третьих, я советую вам использовать рамку. Она красиво выделяет рисунок и не дает ему слиться с общим фоном.

В-четвертых, не надо делать значок слишком ярким и броским. Хорошо, конечно, если его запомнят, но плохо, если он будет отвлекать от содержания страниц ресурса. Здесь главное не переборщить.

Ну и в-пятых, интернет-браузеров много и все они работают по-разному. К примеру, тот же IE 6 не показывает эти элементы, только если сайт будет добавлен в «избранное».

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

Если говорить об обычном сайте, то подключение элемента осуществляется с помощью примерно вот такого HTML-кода:

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

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

Добавление иконки на блог в WordPress

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

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

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

Если она есть, удаляем и вставляем вот такие:

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

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

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

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

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

Можно ли заработать на создании фавикон?

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

Я попробую кратко изложить план действий человека, пытающего заработать на создании фавикон онлайн.

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

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

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

Ух… объемная же получилась статья. Надеюсь, и полезная. На этом у меня все. Пока-пока.

Загрузка...

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

life-webmaster.ru

Как сделать favicon ico (фавикон) для сайта за 5 минут в фотошопе?

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

Здравствуйте, уважаемые друзья! Сегодня я напишу о том, как сделать фавикон для сайта или блога. Причем, я рассмотрю 2 способа создания фавикона. Вы узнаете, как сделать favicon ico в фотошопе и при помощи онлайн сервиса ;-).

Перед тем, как перейти к прочтению этой статьи, я советую также ознакомиться с другими полезными постами, которые позволят улучшить ваш ресурс:  «Красивая страница 404 для сайта», «Как сказать спасибо за комментарий?», «Красивая подписка на комментарии в WordPress».

А теперь вернемся к теме поста. Если на сайте нет фавикона, то он теряет многое. Во-первых, фавикон способен увеличить посещаемость с Яндекса. Спросите как? Очень просто. Дело в том, что Яндекс рядом с заголовком Title показывает еще и фавикон сайта. И если заголовки и описания двоих ресурсов примерно одинаковые, но на одном будет фавикон, а на другом нет, то посетитель, скорее всего, перейдет на ресурс с фавиконом.

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

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

Для создания фавикона я буду использовать сервис www.favicon.cc. Пользоваться ним очень просто. Для начала вам нужно указать цвет, который вы будете использовать при создании фавикона. Для этого задайте оттенок и насыщенность.

После того, как вы выбрали цвет, начинаем рисовать фавикон. Если вы нарисовали что-то неверно, то это можно удалить. Для этого поставьте галочку возле инструмента «прозрачный».Вот я на за несколько минут сделал такой фавикон ;-).

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

Как сделать фавикон для сайта с готового изображения

Вы можете сделать фавикон с любого изображения. Это может быть ваша фотография, логотип сайта или что-то другое. Для этого нужно открыть программу фотошоп и загрузить туда изображения, которое вы хотите переделать на фавикон. Нажмите «Файл» — «Открыть».

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

Потом нужно уменьшить изображения до 16 рх. Для этого выбираем на панели инструментов Изображения – Размер изображения.

Указываем ширину и высоту 16 рх и нажимаем «Ок».

Теперь нам нужно сохранить фавикон на компьютер. Для этого выбираем на панели инструментов Файл – Сохранить как. Указываем название изображения, формат iso и нажимаем «сохранить».сохранить фавикон

Если вы умеете пользоваться программой фотошоп, то можете без проблем сделать фавикон для сайта с нулю. Для этого создайте новый файл с шириной и высотой 16 px, потом рисуйте там что угодно и сохраняйте этот файл в формате iso.

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

  • www.audit4web.ru/info/favicon
  • www.favicon.cc — уже знакомый сервис
  • www.iconj.com
  • www.favicon.co.uk/gallery.php
  • thefavicongallery.com
  • favicon-gallery.ru/gallery

Как сделать favicon для wordpress

После того, как вы сделали или скачали фавиконку, ее нужно как-то прикрутить до сайта. Я сейчас покажу, как это сделать на движке wordpress.

Сначала нужно закачать иконку на хостин по такому адресу: wp-content/themes/названия темы/images/

После этого зайдите в Панель управления – Внешний вид – Редактор, откройте файл header.php и пропишите там вод такой код, перед тегом </head>:

<link rel="shortcut icon" href="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/favicon.ico" type="image/x-icon" /> <link rel="icon" href="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/favicon.ico" type="image/x-icon" />

В этом коде нужно изменить:

  • vachevskiy.ru – укажите свой домен;
  • BusinessBlog – укажите названия своей темы;
  • favicon.ico – укажите названия своей иконки, которую вы загрузили на хостинг.

Теперь сохраните изменения и смотрите, что у вас получилось:favicon

Может быть и такое, что после обновления сайта вы не увидите никаких изменений. Это связано с тем, что браузер загружает ваш сайт не с сервера, а с кэша. Поэтому вам нужно очистить кэш в браузере.А если у вас на сайте есть плагин кэширования, например, Super Cache, то удалите кэш и там.

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

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

Ну, а теперь все, что касается вопроса, как сделать favicon ico для сайта. Всем пока.

vachevskiy.ru