Как сделать фавикон (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 несколькими способами.

FaviconGenerator.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"/>

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

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

<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">

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

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

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

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

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

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

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

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

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

 

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

Ваш комментарий

  1. Здравствуйте, уважаемый Кирилл Тараненко. Я вижу, что пишете вы хорошо, нету воды. Но в последнее ваши посты идут ни о чем, сама тема постов вода. Если вам не хватает идей для постов, то вам:
    Начать обучать своих читателей созданию сайтов на wordpress. Записей на эту тему можно написать великое множество. А то я смотрю ваши посты раньше (не содержание, а тему) и такое ощущение, что вы наобум берете тему и пишете про неё, даже не выяснив нужна ли она читателям.

    • Кирилл Тараненко:

      Здравствуйте, Vahan. Спасибо за отзыв.
      К сожалению, я не думаю, что читателям будет интересно изучать азы создания сайта на вордпресс. Честно говоря, стараюсь брать актуальные и полезные темы, которые бы заинтересовали новичков в блогинге. Даже немного удивлен такой реакцией.

    • Спасибо, нашла для себя фавикон! У вас больше всего информации нашла по фавиконам.