Фавикон коллекция – Коллекция favicon ico. Скачать фавикон для сайта


23.08.2019 Facebook Twitter LinkedIn Google+ Советы художника


Содержание

Генератор фавиконов для сайтов онлайн, как установить фавикон на сайт?

Что такое Фавикон (Favicon)?

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

В переводе с иностранного обозначает «иконка для избранного»

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

Фавикон необходим:

  1. Для создания респектабельного вида.
  2. Для возможности выделиться из общей массы пользователей.
  3. Для придания узнаваемого облика своему сервису.
  4. Для преимущественного выбора конкретного сайта. При вводе пользователем поискового запроса, выдается информация в поисковой системе множество результатов. Обычно пользователями выбирается не только первые по рейтингу сайты, но и привлекательные по фавикону.

В каком формате я получу Favicon?

Для сайта используется Фавикон размерами 16х16 пикселей, с расширением ico. Такое расширение обычно используется для хранения «иконок».

Online генераторы и коллекции favicon

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

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

Ведь так важно, чтобы он был оригинальным и не встречался в свободном доступе сетей интернета. Для этого можно воспользоваться предоставляемой информацией на сайте .http://favicon.ru/

Коллекции и галереи Фавикон

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

Наиболее распространенные сервисы галерей Фавиконов будут предоставлены ниже:

  1. http://www.thefavicongallery.com/. Сервис небольших размеров, ограниченный выбор, однако тематика разнообразная. Отличается простотой скачивания и дальнейшего использования фавиков. 
  2. http://www.iconj.com/ . В сервисе присутствуют Фавиконы с анимацией. Неудобством использования сайта является разбитие общего количества картинок на множество страниц, поэтому, чтобы выбрать понравившийся, необходимо потратить достаточно времени для поиска.
  3. http://www.favicon.cc/. Хороший выбор неанимированных Фавиконов. 
  4. http://www.favicon.co.uk/. Крупный сервис, для скачивания, достаточно нажать на картинку Фавикона и указать адрес скачивания на свое устройство. 
  5. http://favicon-generator.org/. Небольшой сайт, маленькая коллекция, но присутствует множество тем. Предоставляется возможность не просто воспользоваться готовым Фавиконом, а и самостоятельно создать собственный шедевр.


Лучший генератор Фавиконов

Ссылка на генератор: www.xiconeditor.com

При помощи рассматриваемого генератора Фавиконов можно запросто его создать из любого изображения или из фотографии. Для этого необходимо:

  1. Зайти на сайт xiconeditor.com
  2. Произвести выбор шаблона 16х16:
  3. Импортировать файл:
  4. Нажать на кнопку «загрузить»:
  5. Загрузить файл.
  6. Произвести редактирование изображения путем его обрезки. Нажатием кнопки «ОК» подтверждаем согласие с окончанием создания фавикона:
  7. Посмотреть на готовый Фавикон путем нажатия кнопки «предварительный просмотр»:

Проблемы с прозрачностью у сервиса генератор фавикон

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

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

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

Я уже смог сделать фавикон онлайн. Что мне с ним дальше делать?

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

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

Преимуществом создания Фавикона с нуля будет являться его высокая уникальность.

Для этого можно воспользоваться:

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

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

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

  • Генератор Amichurin.Appspot.com. С его помощью  можно самостоятельно создавать картинки путем рисования. Из изображения в данном сервисе не удастся создать Фавиконы.
    Выглядит он следующим образом:
  • Генератор Favicon-Generator.org. Он позволяет оформлять различную цветовую гамму фона. Основной принцип работы с ним мало чем отличается от остальных видов генераторов.


Favicon из готового изображения

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

  1. Загрузить изображение на сервер.
  2. В случае необходимости проведения обрезки картинки, провести ее.
  3. Если в сервисе предусмотрены дополнительные функции в плане оформления дизайна Фавикона, задействовать их по желанию.
  4. Сохранить получившийся Фавикон в формате ico.

Сервис Favicon.ru

При помощи рассматриваемого сервиса предоставляется возможным:

  1. Самостоятельно изготовить Фавикон по подготовленному заранее шаблону.
    • Из готового изображения;
    • Рисуя по пикселем картинку.
  2. Заказать Фавикон у профессионалов. В такой ситуации они помогут создать неповторимый уникальный образ.

Сервис Favicon.cc

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

После обработки картинки, обрезки ее, придания прозрачности, или еще каких – либо ей дополнительных параметров, Фавикон сохраняется в формате ico.

Как добавить favicon на блог WordPress?

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

Шаг второй. Загрузка файла в корневой каталог на сервере. Для этого необходимо:

  1. Открыть корневую карту сайта.
  2. Открыть файл php и вставить туда код:
  3. Обновить страницу, при этом не используя кеш.

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

stasmatveev.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

Сервис с 308 000 иконок (Favicon) для сайта

Всем привет !

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

Кто не знает вот где отображается favicon 

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

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

  • Обзор — тут публикуются наборы иконок, их авторы, и что само главное картинки одного стиля.

  • Прислать — раздел в котором вы можете отправить ссылку на страницу с наборами иконок, которых нет в сервисе, также можно предложить свою кандидатуру, как дизайнера.

Как скачать понравившуюся картинку ?

Для начала нам надо выбрать картинку, щёлкаем на неё, выбираем расширение (ico icns png) там же есть вкладка другие размеры в которой можно выбрать удовлетворяющий вам размер. Далее нажимаем скачать PNG или Ico смотря, что вам нужно, после этого пойдёт загрузка картинки. Где расположены кнопки Скачать в правом столбце есть кнопка преобразовать, в нужный формат.

Ну впрочем и всё

P.S читайте статью про создание логотипа без знаний Photoshop. Также смотрите видео про парня, отлично владеющим своим телом.

cms-all.ru

Создаем и устанавливаем красивый фавикон (favicon) для сайта

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

Favorite Icon (“значок для избранного”) — именно так расшифровывается favicon.ico. Он был придуман еще в прошлом веке. В марте 1999 года, браузер «Internet Explorer 5» стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за 16 лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим. Также расскажу о том, как можно нарисовать собственную иконку или сгенерировать ее из графического файла. Не обойду вниманием и сайты, где можно выбрать и скачать красивый favicon для своего сайта.

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

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

В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается, и можно встретить ее в таких форматах, как GIF, JPEG и PNG. Эти форматы поддерживаются и всеми современными интернет-браузерами, за исключением только поддержки JPEG в Internet Explorer.

Есть два основных способа создания иконки. Первый — ручная прорисовка favicon на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – работа уже с готовыми иконками или изображениями. Рассмотрим оба варианта, и пойдем по порядку…

Онлайн-сервисы для создания фавикон

Их принцип достаточно прост. Вам доступно поле для рисования, размером 16х16 квадратиков, каждый из которых символизирует пиксель. И самый простой набор инструментов в виде карандаша, ластика и т.д. Где вы, притворившись художником, начинаете рисовать свой favicon.

Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Таких сервисов существует несколько, вот только некоторые из них:

  1. Favicon.ru – русскоязычный сервис, скриншот из которого вы видите чуть выше. Позволяет как рисовать, так и конвертировать из других форматов в формат ICO.
  2. Favicon.cc – англоязычный сервис, с аналогичными возможностями, но поддерживающий создание анимированных иконок.
  3. Favicon.by – русскоязычный сервис (судя по домену белорусский). Функционал, также аналогичен предыдущим. Анимация не поддерживается, но есть возможность указав адрес сайта, «утащить» с него иконку для последующей переделки в редакторе.

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

Использование готовых иконок для сайта

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

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

  1. IconSearch.ru – русскоязычный сервис, с приличным набором иконок. Размеры иконок от 16х16 до 128х128 пикселей. Есть возможность сохранения иконки в форматы ICO и PNG.
  2. IconSeeker.com – аналогичный сервис, только англоязычный. Больших отличий нет, за исключением того, что попадаются иконки размера 256х256.
  3. IconFinder.com – это один из моих любимых поисковиков иконок. Там правда много платных иконок, но и среди бесплатных есть что выбрать. Помимо упомянутых уже ICO и PNG форматов, можно скачать в SVG, или даже в AI (векторная графика Adobe Illustration). Иконки размерностью до 512х512 пикселей.

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

Прозрачность и размер иконки

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

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

Фавикон может быть использован и больше чем 16х16 пикселей. Например, размер моего favicon.ico составляет 256х256 пикселей. На компьютере или ноутбуке вы, конечно, вряд ли заметите разницу, т.к. она масштабируется автоматом. А вот в мобильных браузерах (на вашем смартфоне или планшете), большие и маленькие иконки могут отображаться о разному.

Так в мобильном Google Chrome, вместо иконки 16х16, можно увидеть цветной квадрат с первой буквой из названия сайта по середине. Другие браузеры могут растягивать маленькую иконку, что выглядит визуально не очень красиво. Доля мобильного трафика сегодня высока, и может достигать 20-25%. И с каждым годом только растет, поэтому, подумать о нем на будущее будет не лишним.

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

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

Если стандартной иконку и вас нет, и в админке она тоже не меняется, то необходимо прописать небольшие строчки в HTML код вашего сайта. Их нужно размещать между тегов <head> и </head>. У разных CMS структура шаблонов разная, поэтому, иногда приходится поискать в каком файле шаблона есть эти теги. У WordPress, например, этот файл называется «header.php», а у OpenCart – «header.tpl».

Если у вас иконка в формате 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»>

Данная запись справедлива, если фавикон находится в корне сайта. Если он имеет иной путь, то перед «/favicon.ico», нужно записать путь к файлу. Например, такой: «http://мой-сайт.ru/моя-папка/favicon.ico».

Код для иконки в формате GIF:

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

<link rel=»icon» href=»/favicon.gif» type=»image/gif»>

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

Код для иконки в формате PNG:

<link rel=»icon» href=»/favicon.png» type=»image/png»> <link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

<link rel=»icon» href=»/favicon.png» type=»image/png»>

<link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

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

sa1nikov.ru

Favicon для сайта. Создать favicon и установить на сайт

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Для чего используется favicon

Favicon — это изображение размером в 16х16 пикселей, которое отображается в адресной строке при посещении сайта.

Фавикон не просто привлекает внимание посетителя, а имеет свои положительные стороны:

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

 

Favicon для сайта: принцип работы поисковых роботов

Обычно с фавиконом больше всего работает такой робот, как Яндекс. Боты или роботы монотонно запрашивают главную страницу и выходят на favicon.ico, который располагается в корневой папке. На Яндексе иконка перекодируется в 16х16 пикселей формата PNG. Использование иконок в Яндексе имеет свои преимущества: даже если ваш ресурс расположен не на первых позициях, то использование запоминающегося изображения привлечет посетителей в любом случае.

Как сделать иконку более яркой?

Для этого необходимо следующее:

  • Если вы не собираетесь использовать логотип в качестве иконки сайта, то постарайтесь просто сделать иконку эксклюзивной. Для того чтобы пользователь обратил свое внимание на изображение и запомнил его, старайтесь менять его к праздникам. Например, приближается Новый Год: используйте в изображении сочную елку, яркого Деда Мороза или Снегурочку и т.д.
  • Иконка должна соответствовать тематике интернет-ресурса. Согласитесь, если у вас на продвижении сайт медицинской тематики, то изображать танк в виде иконки неестественно.
  • Вдохновитесь фавиконами зарубежных сайтов со схожей тематикой. Выберите идею, преобразите ее и создайте свою, уникальную иконку.

 

Как сделать favicon

Способ 1. Скачать готовые favicon на сайте

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

Способ 2. Создать уникальную иконку сайта favicon в Фотошопе

  1. Чтобы сохранить favicon в формате ico, надо скачать плагин.
  2. После того как вы успешно перешли по ссылке и скачали файл, разархивируйте его в папку «File Formats». Найти ее можно по адресу С:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats.
  3. На время установки, закройте программу Photoshop.

Если это покажется вам слишком хлопотным, то вам помогут онлайн-сервисы по генерации картинок из форматов jpg, png и gif в ico.

Способ 3. Онлайн-сервисы

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

Порядок создания:

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

 

Примеры онлайн-сервисов:

favicon.cc

Для того, чтобы создать фавикон, нажимаем Create New Favicon и рисуем с помощью инструментов:

  • pick existing color — инструмент-пипетка, помогает выбрать цвет, который уже использовали для рисования;
  • move — двигать нарисованное изображение;
  • transparent – стереть нарисованный пиксель.

После сохраняем рисунок на компьютер, нажав Download Favicon. Чтобы загрузить свою картинку, кликаем Import Image, загружаем файл и так же редактируем.

favicon.ru

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

Способ 4. Самый идеальный

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

 

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

  1. Подключаемся по FTP-доступу к сайту через программу Total Commander.
  2. Загружаем иконку в корневую папку сайта. В зависимости от системы управления сайтом корень может называться по разному, например public_html, htdocs, www и т.п. В этой папке вы должны найти файл index.php.
  3. Открываем файл index.php или header.php и между тегами
    вставляем вот такой html код:

Первая строка для поисковой системы Internet Explorer с атрибутом rel=»shortcut icon». Остальные браузеры распознают фавикон по значению rel=»icon».

 

Как изменить фавикон для Joomla, WordPress, UCOZ?

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

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

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

Вычислив адрес расположения иконки, нужно заново подсоединиться к сайту через FTP и поменять старый файл favicon.ico на новый.

Как прописать фавикон в шаблоне для Joomla, WordPress, UCOZ?

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

  • Рассмотрим сайты на Joomla. Как правило, на этих сайтах файл favicon заливается в папку с шаблоном. Путь до используемой иконки прописывается в файле index.php.

Код будет выглядеть следующим образом: templates/адрес/favicon.ico.

  • Что касается сайтов, созданных на WordPress, то путь до файла favicon.ico задается непосредственно в используемой теме. В соответствии с этим, картинка будет лежать по адресу: /wp-content/themes/адрес/favicon.ico
  • Существует ряд сайтов, созданных в системе uCoz. Для того чтобы сменить фавиконку, следует залить файл favicon.ico в корень каталога посредством FTP-соединения.

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

 

Почему favicon не отображается в выдаче?

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

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

Яндекс — http://favicon.yandex.net/favicon/www.site.ru

Google — http://www.google.com/s2/favicons?domain=www.site.com

 

Заменить www.site.ru и www.site.com на домен вашего сайта. Например, http://favicon.yandex.net/favicon/semantica.in

Теперь вы знаете, как сделать иконку для вашего сайта и успешно загрузить ее.

 

semantica.in

Что такое favicon: как создать и установить

Многие пользователи интернета не знают, что такое фавикон, хотя регулярно сталкиваются с ним во время работы в сети. Слово favicon происходит от английского словосочетания favorite icon – избранная иконка или значок. Эта пиктограмма отображается во вкладках браузеров перед названием страницы (которое выводится с помощью тега title) и в качестве иконки в закладках.

Где можно увидеть favicon сайта?

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

Более подробно об иконке сайта

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

Favicon – это отображаемая в открытой вкладке браузера, левее от названия открытой странички, пиктограмма, так называемый мини-логотип. Является своеобразной визитной карточкой ресурса, независимо от движка (CMS), на котором тот создан, установленной темы и используемого шаблона. Пиктограмму можно встретить на сайтах под управлением как популярных CMS, таких, как WordPress, Bitrix, Joomla, Drupal, так и на менее распространенных. Изображение имеет размеры 16×16 пикселей и зачастую хранится в формате ico.

Назначение favicon

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

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

Favicon в поисковой выдаче Яндекса

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

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

Все эти факторы могут повлиять на увеличение посещаемости страниц вашего сайта.

Способы создания favicon

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

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

Разберемся с каждым способом подробнее.

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

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

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

  1. www.iconj.com/favicon-gallery-page1.html – содержит более 4 тысяч изображений, позволяет скачивать готовые решения необходимого размера в форматах ico и gif. После регистрации появится возможность добавления значков в избранное. Скопировав HTML-код, можно быстро вставить его в код своего сайта.

Добавление иконок в избранное на сайте ICON J

  1. www.favicon.cc – большая коллекция значков, которые можно найти по дереву тегов или путем перелистывания страниц. Из функционала доступны загрузка в формате ico, online-редактирование оригинальной пиктограммы, конвертирование картинки в значок и просмотр новых/популярных файлов.

Сайт favicon.cc

  1. www.freefavicon.com/freefavicons/objects – крупнейший тематический каталог, где можно отыскать и загрузить иконку. Файлы рассортированы по категориям для удобства выбора и названы согласно своему содержимому.

Категории для поиска фавикон на сайте freefavicon.com

Онлайн генераторы

При помощи специализированных сервисов нужную favicon можно создать самому за несколько минут.

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

Создание с помощью онлайн-редактора Favicon.cc

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

Регистрация на сайте Logaster.ru

  1. www.favicon-generator.org – простой сервис, создающий favicon из выбранного изображения без возможности его редактирования или обрезки.

Сервис favicon-generator.org

  1. www.michurin.net/online-tools/favicon-editor.html – узконаправленный ресурс, где после загрузки картинки в jpeg, bmp или gif формате она будет уменьшена до 16 пикселей по обеим сторонам без сохранения пропорций, а число цветов уменьшится до 16 для минимизации размера файла на выходе. Дополнительно доступна функция модификации готовых ico.

Онлайн-редактор иконок favicon.ico

  1. www.favicon.by и favicon.ru поддерживают рисование собственных пиктограмм и превращение области или целого изображения в фавикон. Есть инструменты заливки и пипетка.

Рисование собственных пиктограмм

  1. www.favicomatic.com превратит загруженный графический файл в ico размером 16×16, загрузит его на ПК и сгенерирует HTML-код для вставки на сайт.

Фавикон генератор Favic-o-matic

  1. www.antifavicon.com – генератор простых favicon с текстовыми надписями, в котором пользователь задает текст, выбирает цвет фона, букв и границы, и получает готовую иконку.

Генератор favicon с текстовыми надписями

Графические программы

При помощи IconFX, Axialis IconWorkshop и подобных графических редакторов можно легко создать иконку для любого портала, но лишь при условии владения пользователем базовыми навыками работы с подобными приложениями. Если вы работаете в Photoshop, загрузите для него расширение под названием ICOFormat, тем самым добавив поддержку импорта иконок в формате ico.

Расширение ICOFormat

Через IconFX и альтернативы, можно как нарисовать, так и конвертировать картинку или ее часть в иконку, отредактировав ее, выбрав цвет и размер.

Создание нового рисунка в IconFX

Добавление на сайт

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

<head> … <link rel=»shortcut icon» type=»image/x-icon» href=»директория_хранения_файла/favicon.xxx»> … </head>

<head>

<link rel=»shortcut icon» type=»image/x-icon» href=»директория_хранения_файла/favicon.xxx»>

</head>

Где атрибут href содержит относительный или полный путь к файлу на сервере, а rel сообщает браузеру о том, что этой строкой задается фавиконка сайта.

Ответы на популярные вопросы

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

Делаем иконку из картинки или фото

Множество графических редакторов, специализирующихся на работе со значками, позволяют конвертировать png, bmp, jpeg и прочие форматы в ico с возможностью обрезки исходного файла и редактирования результата. На примере IcoFX это делается следующим образом:

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

Создания иконки из изображения

  1. После редактирования сохраняем полученный ico-файл и загружаем его на сайт.

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

Делаем прозрачный фавикон

Известно, что среди распространенных графических форматов прозрачность поддерживается файлами с расширением png. В качестве исходника берем файл png и конвертируем его в фавикон с помощью Photoshop (установив перед этим плагин ICOFormat), иного графического редактора или онлайн-сервиса, поддерживающих прозрачный слой, например, Favicon.cc.

Как получить анимированную иконку

Создать анимированный favicon поможет специализированный сервис:

  1. Переходим по ссылке favicon.htmlkit.com/favicon/.
  2. Жмем «Обзор» и указываем путь к первому слайду (кадру) анимации.

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

  1. Кликаем по кнопке «Add another image», дабы добавить второй кадр и указываем желаемую картинку, и так со всем кадрами.
  2. По окончании добавления слайдов щелкаем «Download FavIcon Package».

Скачивание FavIcon Package

Как скачать favicon?

Пиктограммы, как правило, лежат в открытом доступе. Простейший способ копирования фавиконки с чужого сайта заключается в переходе по адресу: www.google.com/s2/favicons?domain=1 или favicon.yandex.net/favicon/1, где единицу в обоих случаях заменяем на URL площадки.

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

Также помогает дописывание /favicon.ico в конце корня сайта, к примеру, www.youtube.com/favicon.ico.

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

Допишите /favicon.ico в конце названия сайта

Что делать если не отображается фавикон в Яндексе

Если в поисковике не визуализируется недавно добавленная пиктограмма, скорее всего проблема кроется в следующем:

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

Заключение

Добавление favicon способно не только сделать сайт красивее, но и повысить количество его посетителей. А как это сделать, вы уже знаете!

Автор статьи:

Олег Скрып

Руководитель компании ApollonGuru, ментор SEO-материалов vc.ru. В интернет-маркетинге с 2012 года. Люблю чтобы все было четко.

Будем признательны за каждый лайк:


« Older Article

Next Article »

apollon.guru

Как создать и как установить фавикон Favicon.ico на сайте

Приветствую всех читателей! Сегодня мы выясним, что такое favicon и зачем он нужен сайту. Favicon с английского переводится, как — «иконка избранного». Когда вы заходите в браузере на любой сайт, то рядом с url вы можете видеть маленькую картинку, можно ее наблюдать рядом с закладкой. Также вы можете ее видеть в различных табах программ и самое главное в результатах выдачи запроса Яндекса и Google. Одним словом эта картинка позволяет выбрать сайт из множества других, а также украшает сайт.

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

Как сделать favicon.ico? Все очень просто. Здесь можно пойти двумя путями: использовать программы или интернет сервисы. Давайте рассмотрим оба варианта.

Создание Favicon.ico в различных программах

Icon Empire — наиболее навороченная программа. Она может создавать различные иконки не только для WEB, но и на Windows. Программа может делать, как анимированные, так и обычные картинки с глубиной цвета до 32 бит. За основу можно взять любую картинку.

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

Favicon Create — могу сказать, что очень простая по-моему мнению программка. Для создания иконки вам понадобится готовая картинка в формате *.jpg, *.jpeg, или *.bmp. Устанавливаем программу, выбираем картинку, выбираем размер и глубину цвета, нажимаем кнопку старт. Все готово.

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

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

www.favicon.ru — как раз на нем-то я и делал себе иконку. Отличный русский сервис для создания иконок. Позволяет создавать favicon из картинки, загрузив ее на сайт.

www.favicon.by — тоже сервис на русском языке для создания иконок.

htmlkit.com — тоже на русском.

tools.dynamicdrive.com — этот сервис на английском.

Установка Favicon.ico на сайт

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

  1. Переименовать полученную иконку в favicon.ico
  2. Загрузить полученный файл к себе на сервер ( например с помощью filezilla) в корневую папку ( обычно это public_html )
  3. Добавить код между тэгами <head></head>:

[stextbox id=»info» mode=»css»]Если у вас joomla, то устанавливаем код в index.php вашей установленной темы. Темы находятся в папке templates.
Если у вас сайт на платформе wordpress то переходим в Внешний вид — редактор — header.php.[/stextbox]

[stextbox id=»grey»]Код для вставки между тэгами <head></head>

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>[/stextbox]

Где скачать Favicon.ico, коллекции фавикон

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

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

» www.audit4web.ru/info/favicon — большая коллекция иконок для сайта

» www.iconj.com/gallery.php — кроме галереи иконок присутствует редактор для создания иконки для сайта

» www.favicon.cc — есть возможность просматривать недавно созданные иконки пользователями, а также создать самому

Как создать установить анимированный favicon.ico на WordPress

Установка анимированной иконки на сайт ничем не отличается от обычной. Разве что, совсем небольшое отличие в коде: анимированный favicon будет иметь разширение GIF, а следовательно надо изменить код так:

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

Стоит знать, что в выдаче Яндекса иконка будет иметь статистичный формат -> она будет преобразована из анимированной в обычную в формат PNG.

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

 

iglous.ru

Comments