Универсальный способ создания фавиконов. Универсальный способ создания фавиконов Знак денег favicon

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

Создать значок для собственного ресурса довольно просто: вы находите подходящую картинку или рисуете ее самостоятельно, используя графический редактор, а затем сжимаете изображение до нужного размера — обычно, 16×16 пикселей. Полученный результат сохраняете в файл favicon.ico и помещаете в корневую папку сайта. Но и эту процедуру можно значительно упростить при помощи одного из Favicon-генераторов, доступных в сети.

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

Способ 1: Favicon.by

Русскоязычный онлайн-генератор фавиконок: простой и наглядный. Позволяет нарисовать значок самостоятельно, пользуясь встроенным холстом 16×16 и минимальным перечнем инструментов, таких как карандаш, ластик, пипетка и заливка. Имеется палитра со всеми RGB-цветами и поддержкой прозрачности.

При желании вы можете загрузить в генератор готовое изображение — с компьютера или стороннего веб-ресурса. Импортированная картинка также будет помещена на холст и станет доступной для редактирования.

На выходе вы получаете графический ICO-файл с названием favicon и разрешением 16×16 пикселей. Этот значок уже готов для использования в качестве иконки вашего сайта.

Способ 2: X-Icon Editor

Браузерное HTML5-приложение, позволяющее создавать детализированные значки размером вплоть до 64×64 пикселей. В отличие от предыдущего сервиса, X-Icon Editor имеет больше инструментов для рисования и каждый из них может быть гибко настроен.

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

Если вы хотите сохранить детали изображения, которое намерены превратить в фавиконку, X-Icon Editor отлично для этого подойдет. Именно возможность генерации значков с разрешением 64×64 пикселей и является главным преимуществом этого сервиса.

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

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

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

Способ 1: X-Icon Editor

Этот сервис является наиболее функциональным решением для создания ICO-картинок. Веб-приложение позволяет вам детально прорисовать иконку вручную либо же воспользоваться уже готовым изображением. Главным преимуществом инструмента является возможность экспорта картинки с разрешением вплоть до 64×64.

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

Способ 2: Favicon.ru

При необходимости сгенерировать значок favicon с разрешением 16×16 для веб-сайта, отличным инструментом также может служить русскоязычный онлайн-сервис Favicon.ru. Как и в случае с предыдущим решением, здесь вы можете как самостоятельно нарисовать иконку, раскрашивая каждый пиксель отдельно, так и создать favicon из готовой картинки.

Как результат, на вашем ПК сохраняется файл с расширением ICO, представляющий собою картинку размером 16×16 пикселей. Сервис отлично подойдет для тех, кому требуется всего лишь конвертировать изображение в маленькую иконку. Впрочем, и проявлять фантазию в Favicon.ru совсем не запрещается.

Способ 3: Favicon.cc

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

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

Способ 4: Favicon.by

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

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

Способ 5: Online-Convert

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

Как видите, создать иконку ICO при помощи сайта Online-Convert совсем несложно, и делается это буквально за пару кликов мыши.

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

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

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

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

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

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

#2. Не используйте стандартные значки. Многие после создания сайта на той или иной CMS, оставляют значок , ничего, не меняя. В результате в выдаче поисковой системы может находиться не один сайт с таким значком, а множество. Этим вы не как не выделите свой сайт, поэтому используйте только уникальные иконки Favicon созданные специально для вашего сайта. Сюда же можно отнести ситуацию, когда используют иконки из различных коллекций или элементов интерфейса других сайтов. Помните для того чтобы выделяться вам нужна уникальная Favicon.

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

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

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

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px , для этого пройдите в меню "Файл" >> "Новый..." или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px , но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ "W" с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента "Заливка" (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент "Текст" (Т) добавил символ "W" и задал ему следующее значение цвета #FAC31D.

Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню "Слой" >> "Стиль слоя" >> "Обводка" , выбрать цвет и размер обводки.

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню "Слой" >> "Объединить видимые" или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню "Фильтр" >> "Размытие" >> "Размытие по Гауссу..." и установить радиус 0,3 пикселя.

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

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню "Изображение" >> "Размер изображения" и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение.ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате.ico. Поэтому сохраните его в формате.png, для этого пройдите в пункт меню "Файл" >> "Сохранить как..." и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат.ICO

После этого мы конвертируем его в формат.ico при помощи сервиса . Зайдите на данный сервис и при помощи кнопки "Обзор" выберите ранее сохраненный файл в формате PNG после чего нажмите на кнопку "Создать favicon.ico".

После этого на загрузившейся странице появится ссылка "Скачать favicon.ico!" кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется "public_html". Затем, в каждую страницу вашего сайта, перед закрывающим тегом добавьте следующие строки:

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

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

В некоторых темах в WordPress и Joomla уже могут быть прописаны свои пути к файлу favicon.ico в таком случае удалите их и замените на свои.

Если вы используете, какую либо другую CMS то все делайте по аналогии.

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

Материал подготовлен проектом:

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

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

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

Что такое фавикон и зачем он нужен

Несмотря на то, что фавикон – это очень маленький графический объект, он крайне важен в дизайне сайта и в целом.

Кликните , чтобы увеличить картинку.

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

Во-вторых , фавикон выделяет ваш сайт среди прочих веб-ресурсов в списке поисковой выдачи. Сайт без этой мини-иконки будет блекло смотреться и проигрывать конкурентам. Одним словом, фавикон – это просто “must have” для сайтов.

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

Создание дизайна фавикона

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

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

Не используйте текст

Следует отказаться от использования текста, потому что из-за небольшого размера фавикона надписи будут нечитаемыми. Поместите на иконку 1, максимум 2 буквы – например, первые в названии вашей компании или веб-ресурса; в этом случае их еще можно будет различить.

Пикселизация фавикона

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

Это фрагмент полноразмерного логотипа Facebook после его уменьшения до размера 32×32. Легко заметить, что по краям изображение «плывет». Чтобы избежать такого дефекта, следует провести редактирование на пиксельном уровне.
При работе с иконками я предпочитают использовать программы для редактирования растровых изображений (например, Photoshop или Pixelmator). Сначала я уменьшаю полноразмерный логотип до размера 64×64 пикселя, поскольку это самый большой фавикон, который мне понадобится. Труд очень кропотливый, может занять целый час, а то и два, но зато результат получается просто отличный.
Если у вас нет времени и навыков в подобных операциях, лучше использовать онлайн сервисы, такие как Logotizer.ru

Размер фавикона

Получив иконку размером 64×64, я точно так же создаю иконки размером 32×32, 24×24 и 16×16 пикселей. У каждой из них свое предназначение:

– 64×64 – “Список для чтения” в Safari и Windows
– 24×24 – Закрепленные сайты в IE9.
– 32×32 – Для экранов с высоким разрешением.
– 16×16 – Обычно используется в таких браузерах, как IE, Safari, Chrome и т.д.

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

Форматы фавикона

Раньше, когда поддерживались только файлы формата Windows ICO, мы могли сэкономить время, сохранив фавикон размером 16×16 в формате GIF и дав ему расширение.ico. Такой прием работал безотказно! Но теперь в этом методе нет необходимости, поскольку инструменты для создания файлов ICO можно легко найти в Интернете. Более того, сейчас для фавиконов используются и , но самыми распространенными все же являются только следующие два.

ICO

Пальма первенства принадлежит формату ICO. В отличие от файлов PNG, файлы ICO могут иметь разное разрешение и битовую глубину (что отлично подходит для Windows). Браузер Internet Explorer использует фавиконы различных размеров (например, 32-пиксельные иконки для панели задач Windows 7), и поэтому в данном случае формат ICO является единственным вариантом.

Файлы PNG отличаются большим удобством, поскольку для их создания не нужны никакие специальные инструменты. Этот формат поддерживает альфа-канал и позволяет создавать файлы самых маленьких размеров. Пожалуй, единственный недостаток формата PNG заключается в том, что он не поддерживается в браузере Internet Explorer.

Есть и другие варианты:

– Форматы GIF и анимированный GIF не имеют никаких преимуществ, кроме совместимости с очень старыми браузерами.
– Формат JPG использовать не рекомендуется, даже если изображение представлено в виде фотографии. Этому формату недостает четкости PNG, а единственное достоинство заключается в более плавных переходах между цветами – нюанс, который на очень маленьком изображении совершенно незаметен.
– SVG мог бы стать отличным вариантом, если бы больше браузеров поддерживали фавиконы этого формата. Пока же имеется совместимость только с Opera.
– Также существует так называемый “подформат” PNG – APNG (анимированный PNG), который поддерживается в Firefox и Opera. Однако целесообразность его использования остается под вопросом. Анимированный фавикон может отвлекать внимание и даже раздражать пользователя.

Создать фавикон онлайн – инструменты и онлайн сервисы

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

Logotizer

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

Как создать фавикон с помощью онлайн генератора Logotizer

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

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

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

Ниже блока “Форма” расположена коллекция фигур (символов). Их не так много, жаль, что нельзя загружать свои варианты; но выбор все равно достаточно интересный.

Меняйте цвет, размер, расположение фигур! Одним словом, экспериментируйте, благо, сервис позволяет это сделать.

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

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

Если вы решили, что какой-то слой фавикона вам временно мешает или совсем не нужен, вы можете просто его скрыть.

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

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

После оплаты пользователь получает сразу 10 фавиконок разных размеров под все необходимые на сегодняшний день устройства (Аpple touch icon, Microsoft Application Icons и другие).

Сам файл favicon.ico является мультиразмерным и содержит в себе иконки 4 размеров в 1 файле (16px, 24px, 32px, 64px). Соответственно, если добавить сайт в закладки браузера или открыть историю – можно будет наблюдать иконки разного размера, но отображаться они будут четко и без размытия.

В целом сервис хороший. Простой, удобный, ничего лишнего.

RealFaviconGenerator.net

– это более простой фавикон-генератор, который позволяет создавать фавиконы для любых платформ. Более того, на ресурсе можно протестировать фавикон. Введите URL своего сайта, и вы увидите, как ваш фавикон выглядит в каждом браузере и в каждой операционной системе. Real Favicon Generator также подскажет вам, как исправить недостатки и сделать ваш фавикон еще лучше.

Favicon.by

Favicon.by – еще один бесплатный и простой в использовании генератор фавиконов, который конвертирует файлы PNG, JPG и GIF в формат.ico. Загрузите изображение с вашего компьютера, выберите размер (16x16px или 32x32px) и нажмите на кнопку “Создать”. Чтобы сохранить полученный фавикон на своем сайте, следуйте указаниям.

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

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

Добавить фавикон на сайт можно, сделав несколько правок в HTML – коде страницы сайта.

Шаг 1: Загрузите файл “favicon.ico” на свой хостинговый сервер.

Для этого зайдите в свой FTP-сервер по этой ссылке:
ftp://[email protected]
Введите свои имя пользователя и пароль. Их можно получить в панели администратора вашей хостинговой компании.
Загрузите файлы с фавиконами в корневой каталог. Корневой каталог обычно называется “public_html” или “www”.

Шаг 2: Добавьте фавикон в HTML.

Держа окно FTP-сервера открытым, скачайте файл “index.html” или “header.php”.
Затем вам нужно загрузить код. Загружаемый код зависит от вашего веб-сайта.
Если ваш сайт на HTML, найдите область HEAD в файле index.html и вставьте следующий код:

Если ваш сайт на WordPress, найдите область HEAD в файле header.php и вставьте следующий код:

/favicon.ico” />

При помощи этих кодов браузеры смогут найти ваши фавиконы.
Итак, вы установили свой фавикон!

Как добавить фавикон на WordPress и другие платформы

Если ваш ресурс базируется на WordPress или другой CMS, то добавить фавикон на сайт очень просто. В целом алгоритм добавления фавикона для разных платформ будет одинаковым.
1. Вам нужно зайти в консоль сайта.
2. Найти раздел “Дизайн” или “Внешний вид”.

3. Зайти в раздел “Настройки темы” и найти там “Фавикон”.

4. Загрузить фавикон из вашего компьютера.

5. Сохранить и обновить страницу.

Как создать более сложные фавиконы

В этой статье рассмотрены простые и быстрые способы создания фавиконов, совместимых с практическим любыми браузерами и операционными системами. Но когда дело касается веб-дизайна и разработки, предела совершенству нет. Если вы хотите научиться делать более сложные фавиконы, тач-иконки для главных экранов iOS, иконки для интерфейса Metro в Windows, иконки для Google TV и многое другое, я рекомендую вам ознакомиться с этими материалами: favicon cheat sheet . Там собрана полная информация по теме и приведены хорошие источники. Это отличный вариант для тех дизайнеров и разработчиков (включая меня), кто постоянно стремятся расширять свои знания.

При помощи Favico.js вы можете создавать динамические фавиконы с цифрами.

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

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

Как создать фавикон для веб-сайта – советы и сервисы обновлено: Февраль 7, 2018 автором: admin

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

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

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

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

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

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

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

   

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

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

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

   

   В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 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 — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки ).
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. Iconj — достаточно большая коллекция значков, разработанных другими людьми и выложенных в общий доступ
2. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox
3. The Favicon Gallery — еще чутка подходящих по размеру иконочек

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

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

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

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

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

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

Теперь, зная этот путь, вы можете опять подключиться по протоколу 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 , следующие строчки кода:

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

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

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

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

Вам может быть интересно

Онлайн FTP клиент Net2ftp и Google Alerts - полезный сервисы для вебмастеров
Анализ сайта в бесплатных онлайн сервисах Pr-cy, Cy-pr, Be1, Xseo и других
Иконки, значки, фоны, картинки и логотипы для сайта (онлайн-сервисы IconFinder, Freepik, PSDGraphics и другие)
Юзабилити - как сделать свой сайт удобным для посетителей и попытаться их удержать как можно дольше за чтением ваших статей
MegaIndex Tools - набор инструментов для вебмастеров и оптимизаторов
Как проверить кроссбраузерность верстки сайта в Browsershots и настроить отправку пинга при появлении новых материалов
Http - что это такое, как просмотреть заголовки и проверить код ответов сервера, что означают коды 200, 301, 302, 404 и 500
Кросспостинг - что это такое и как его правильно проводить
Как раскрутить сайт самому и бесплатно