Favicon для сайта и логотип – в чем разница? Фавикон очки


5 креативных примеров использования фавиконов

Картинка - это больше, чем тысяча слов, даже если эта картинка - favicon размером 16x16 пикселей.

Фавикон (favicon; от favorite icon) появился с релизом Internet Explorer 5 в 1999 году.

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

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

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

Иногда фавикон является просто пропорционально уменьшенной версией логотипа компании.

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

Однако, с фавиконами можно сделать много чего интересного.

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

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

Дизайнеры часто не уделяют достаточного внимания фавикону и тратят на него мало времени.

Y8woLN0MFxox4Pb03vj1c0qIHDjp4C90ZywrsCw8

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

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

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

Сложный дизайн фавикона обычно выглядит не очень хорошо, потому что в таких размерах детали утрачиваются, и фавикон превращается в непонятное пятно. Например, фавикон Starbucks будет рзаборчивым, в то время как иконки Pizza Hut и Virgin при уменьшении до 16x16 пикселей будут выглядеть непонятно.

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

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

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

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

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

Этот пример взят из поста Михаэла Махемофф.

k2Xop17X06rAOsJJzPBxGld-PJTw2p5GpxiOVtzh

Код и техника подробно расписаны в этом посте. Автор предоставляет пошаговое руководство.

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

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

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

Youtube

XMiWPAFaf8C3tHLyVz55CRGTEozLcIpnn38LN2g1

Фавикон YouTube - это отличный пример креативного и в то же время простого дизайна. Вместо того, чтобы сжать основной логотип, YouTube использует красный знак "play". Любой, кто видит этот фавикон, сразу же понимает, что эта страница будет содержать музыку, видео и другой медиа-контент. Иконка также меняется в зависимости от текущего состояния видео. Если вы остановите видео, фавиконом станет пауза.

Sitepoint

o8KShRis0eXoA2msOY7qc6XxBvOfKkI3KhTN503O

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

Trello

X7VMS007M2YZjOmeLlCS1KivER6lHUigEvH94aUX

Фавикон Trello отображает выставленный вами цвет фона. Это также срабатывает с загруженными фонами.

Mixcloud

BQgHiC8rEnwl9LUOtCG_x7MW8MvG8asEMvi_maOz

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

Github

vNWVmJoP_rZzeeveDNm2F_n0FKsetJwar-jnXKHb

Фавикон Github, на котором изображён его маскот, меняет свой цвет в зависимости от текущего состояния системы.

Flickr

C3OGCQuMyGEGe3E0QWGJA_NAgJRpDmYyEMntB1I-

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

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

iC7bkjFEoTI7sqx_Lq6w1vBlj2sQWtriCfVAxalp Анимированная иконка Antilimit

Более полезный вариант использования интерактивных фавиконов - это динамичные иконки. Хотя сейчас большая часть сайтов и веб-приложений не используют динамичные фавиконы, в будущем это может стать стандартом. Gmail показывает в фавиконе количество непрочитанных писем и автоматически обновляется, если вы получаете новое письмо. Фавикон Google Calendar показывает текущую дату и обновляется каждый день.C5BHT0aaPsO8m5O4WBOfZR-Txv2TRVoSsyvHxRvr

Другой пример - это Campaign Monitor. Когда вы не залогинены, фавикон - это закрытый конверт; когда вы заходите в свой аккаунт, конверт открывается.

wgQtc_OY0qCx4f4xaHu3AdWty2GWZ0yJAWOjjA0R

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

Чтобы создать свой собственный динамичный фавикон, изучите урок "Notify Better.js: Creating a Dynamic Favicon and Title" от Onextrapixel.

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

Первый - это "Iconic History" Шан Хуанга. Это расширение для браузера позволяет вам превратить вашу историю посещений в сетку из фавиконов. Также в расширении имеются дополнительные опциии, вроде выделения сайтов, посещенных в какое-то определённое время суток (например с 12 дня до 5 вечера).

zJ1Sz15BtFPiJ_q_0ELEHPegNatizlxArDg09tnuСледующий фавикон - "Defender of the Favicons" от Матье "p01" Генри, который представляет собой полноценную игру, запускающуюся прямо в фавиконе. Она создана с помощью canvas и JavaScript (им и генерируется каждый фрейм игры). Далее это конвертируется в картинку в формате PNG, которая и используется в качестве фавикона. В связи с маленьким размером фавикона игра очень простая, но она прекрасно показывает, что можно сделать из фавикона.

TeF9pMTgJd9UpmbwqOVrEpZ4kAQLCYVOfxLMjZBy

Матье создал ещё две фавикон-игры, "Pong" и "Fav Race".

ab0dIz1jlOtJbvOzndQPbwx9gwi-Ehs0gRZQAd1X

В целом, использование фавиконов пока находится в "зачаточном состоянии". В связи с размером фавиконов, многие люди не считают, что им стоит уделять время, которое можно потратить на дизайн или разработку. Однако, с помощью нескольких скриптов вы можете увидеть преимущества использования необычных фавиконов. Динамичные уведомления могут быть следующим шагом эволюции фавикона. И, имея в качестве примера "Defender of the Favicons", мы понимаем, что с помощью фавиконов можно сделать ещё много чего, несмотря на их маленький размер.

Оригинал, переведённый Curpie.

spark.ru

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

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

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

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

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

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

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

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

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

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

Правило №1.

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

Правило №2.

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

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

favikon

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

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

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

favikon na sait

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

favikon na sait

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

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

Правило №3..

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

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

pal'ma

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

favikon na sait

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

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

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

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

favikon na sait

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

favikon na sait

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

favikon na sait

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

favikon na sait

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

favikon na sait

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

favicon

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

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

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

favikon na sait

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

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

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

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

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

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

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

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

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

favicon.co.uk — также можно что-нибудь выбрать.

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

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

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

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

seo-mayak.com

Создать фавикон онлайн | favicon.ico для сайта

14.12.2017 12:07

Обновления для Антиплагиата!

Функциональность инструмента Антиплагиат обновилась — исчезла строка "Исключить URL". Теперь эта функция работает автоматически при использовании вкладки "Проверить URL". Также, первая проверка инструмента осуществляется намного быстрее. Однако, если Вы нацелены проверить всё до деталей, нажимайте кнопку "Расширенная проверка".

24.11.2017 14:26

Black Friday! 40% скидка на рекламу!

Успейте заказать рекламу с максимальной скидкой! Оформить заявку можно на странице https://be1.ru/advertising/

15.11.2017 11:14

Теперь мы умеем определять региональную привязку сайта!

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

09.11.2017 12:07

Инструмент проверки позиций получил дополнительный функционал!

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

08.11.2017 09:45

Аудит сайта доступен каждому!

Be1 начал предоставлять свою первую услугу, благодаря которой можно получить чёткую инструкцию как продвинуть свой сайт на ТОП-овые позиции! Получите отчёт за 3 дня с готовыми решениями.

19.10.2017 16:01

Реклама на сайте Be1.ru

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

11.10.2017 16:18

Добавили историю позиций по запросам!

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

13.09.2017 16:15

Разработали составление конкурентного анализа

Это сводка, важных при продвижении, показателей, к которым необходимо стремиться, чтобы попасть в ТОП-1 выдачи Яндекс. Найти ее можно проанализировав сайт нажать в блоке о видимости на "отчёт".

27.07.2017 16:08

Разработали инструмент, который обнаруживает упущенную семантику!

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

20.07.2017 16:04

Разработали своё расширение под Chrome

Теперь анализировать сайты стало ещё проще! Скачайте в интернет-магазине Chrome наше расширение, установите его и получайте всю нужную информацию о любом сайте, на котором в данный момент находитесь,

be1.ru

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

С месяц назад для блога pervushin.com сделал я иконку, в простонародье favicon. Так вот после долгих размышлений, раздумываний и рассусоливаний я решил написать эпопею о создании своего favicon.ico. В этой статье Вы найдёте небольшие обзоры оказавшихся у меня на пути сервисов по созданию таких иконок, несколько ссылок где можно скачать уже готовые иконки и как эту самую готовую иконку установить на сайт. В конце поста как обычно Вас ждёт жирный бонус и сладкое. Спасибо за Ваши комментарии и RT pls.

Favicon.ico: как сделать и установить на сайт

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

Favicon.ico в адресной строке браузера

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

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

Favicon в результатах поиска Яндекс

У яндекса для это есть специальный робот, который ищет на сайтах фавикон, мой фавикон находится здесь http://pervushin.com/favicon.yandex.net/favicon/pervushin.com, понимаете да, чтобы проверить свой фавикон, поменяйте адрес сайта на свой. Так вот если Вы сменили иконку, то на яндексе она сразу не появится, ну максимум через месяц.

Создать favicon можно с помощью настольных программ, например Favicon Create или Icon Cool Studio, последняя кстати очень мощная, но лучше использовать онлайн сервисы :).

Favicon генераторы

Favicon.ru

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

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, для создания ярлыков можно включить два дополнительных размера 32х32 и 48х48, также на favicon.ru можно обрезать картинку, в случае если размеры её не пропорциональны.

Favicon.ico на favicon.ru

У меня была готовая картинка 50×50 пикселей, её я и закинул. После сервис показал мне как будет выглядеть иконка, если всё в порядке, то можно её тут же скачать, но мне не понравилось:

Готовая иконка

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

Графический онлайн редактор иконок

Favicon.cc

В отличие от первого подопытного на favicon.cc нам сразу предлагают воспользоваться своим графическим редактором. В центре расположен холст, состоящий из 16 горизонтальных и вертикальных квадратиков, каждый квадрат — пиксель, получается холст 16х16, т.е. favicon.ico.

Справа расположилась палитра цветов (оттенков) и несколько инструментов, а именно инструмент прозрачности, пипетка, для определения цвета на холсте и инструмент перетаскивания, которым можно таскать по холсту Ваше что-то там нарисованное :).

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

Графический онлайн редактор favicon.cc

Рисовать иконку в графическом онлайн редакторе? Мазахизм, не мой метод, потому слева от холста в основном меню кликаю на пункт «Import image»:

Импортируем готовое изображение на favicon.cc

Здесь всё довольно просто, указываем путь к изображению (нажатием кнопки «Обзор») и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый подходит к картинке с пропорциональными размерами всех сторон, моя 50х50, второй больше подходит к картинке с разными размерами, при этом варианте изображение сплюснет. Нажимаю кнопку «Upload» и вновь попадаю в редактор, но на холсте уже моя картинка, так сказать попиксельно. Если Вас устраивает конечный результат, можно скачивать иконку, мне не понравилась:

Конечный результат на favicon.cc

FavIcon from Pics

На очереди FavIcon from Pics, тупой такой, лёгкий до безобразия, ничего лишнего, но на нём я сделал свою фавиконку, которая сейчас стоит на pervushin.com, лучше чем здесь, мне не удалось сделать больше нигде. Самое удивительное, что из картинки которую загружаю (здесь тоже есть такая возможность) на сервис получается такая же шняга, как и у остальных, но этот сервис пошёл дальше, он делает favicon из аватарки твиттера! Кстати, если у кого нет твиттера, рекомендую завести, читаем здесь как, и присоединяемся ко мне :).

Favicon из twitter на FavIcon from Pics

Итак, я указал свой логин в твиттере @pervushin_com и нажал заветную кнопку «Generate Favicon«. Попадаем на следующую страницу с дополнительными настройками. Там всё на английском, но разобраться будет не трудно. Во-первых к своей иконке я добавил анимацию в виде бегущей строки «Sergey Pervushin.com». Далее настроил цвет — зелёный (green). Цвет фона прозрачный (transparent). Здесь же можно добавить иконки для iphone, ipad и т.д., но не переусердствуйте, помните про размер.

Готовая иконка favicon

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

Я свой favicon сделал и мне он нравится, но сервисов ещё очень много, вот ссылки на них, посмотрите, может Вам нужно что-то другое:

* http://pervushin.com/www.cy-pr.com/tools/favicon/* http://pervushin.com/genfavicon.com/* http://pervushin.com/www.tools.dynamicdrive.com/favicon/* http://pervushin.com/favicon-generator.org/* http://pervushin.com/www.faviconfactory.com/* http://pervushin.com/shaheeilyas.com/favicon/* http://pervushin.com/www.degraeve.com/favicon/* http://pervushin.com/michurin.com.ru/favicon-editor.shtml

Скачать готовый Favicon для сайта

Если Вам лень делать иконку, хотя чего уж тут лениться, дело 2-х минут, то можно скачать готовые, ниже несколько адресов, где этих favicon.ico завались:

1. http://pervushin.com/www.audit4web.ru/favicon/ — более 15000 иконок.2. http://pervushin.com/www.iconj.com/ — более 18000 иконок, кто больше? Есть также и анимированные. Также и генератор favicon есть, причём очень даже не плохой.

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

У меня движок на wordpress, будем исходить из него, но принципиально установка favicon на других движках или html страницах ничем не отличается и проходит она в два этапа: 1. Загрузка файла на сервер; 2. Прописываем специальные теги в движок. Всё на самом деле очень просто.

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

Закинул оба файла в корень pervushin.com, это favicon.ico и animated_favicon.gif и в файле своего шаблона header.php между тегом <head></head> прописал следующее:

<link rel="shortcut icon" href="http://pervushin.com//favicon.ico" > </link><link rel="icon" type="image/gif" href="http://pervushin.com//animated_favicon.gif" > </link>

Готово! Стильного Вам фавикона и удачной работы!

Snapshot / @pervushin_com в twitter

Сладкое на сегодня: Славная бабулька, с юморцом :).

Читаем дальше:

11 на запись "Favicon.ico: как сделать и установить на сайт"

pervushin.com

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

что такое фавикон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

установка фавикона вордпрессВстроенная возможность в WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

leonov-do.ru

Фавикон для сайта | ИТ Шеф

Статья, в которой рассмотрим, как сделать правильный favicon для сайта.

Фавикон (favicon) – это значок, который связан с определённым веб-сайтом или веб-страницей. Наличие фавиконки у сайта позволяет, как правило, сделать его более узнаваемым. Это связано с тем, что данный веб-сайт (каждая его страница) будет иметь значок, посмотрев на который пользователь будет знать, что это за ресурс. Иконку favicon сайта можно увидеть в различных элементах браузера, таких как вкладка, адресная строка, история посещений (журнал), панель закладок и др. Кроме этого иконку фавикон можно также обнаружить в результатах поиска Яндекс рядом с названием сайта. Ещё иконка favicon используется при размещении ссылки (на страницу сайта) на главном экране операционных систем iOS (Safari), Android (Chrome), Windows 8 и 10.

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

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

Главная страница сайта inkscape.orgГлавная страница сайта inkscape.org

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

  1. Используя сервис "Google Картинки" находим подходящие изображение двери и сохраняем его на компьютер.Изображение двери, найденное через поиск "Google Картинки"Изображение двери, найденное через поиск Google Картинки
  2. Открываем программу Inkscape и создаём в ней новый файл.
  3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
  4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).Векторизованный растр двериВекторизованный растр двери
  5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.Выравнивание изображения по центру содержимого страницыВыравнивание изображения по центру содержимого страницы
  6. Сохраняем файл (например, под именем door.svg).

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

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Главная страница сайта realfavicongenerator.netГлавная страница сайта realfavicongenerator.net

Для этого необходимо нажать на кнопку "Select your Favicon picture" и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

Настройка фавиконки сайта для iOS (Safari)Настройка фавиконки сайта для iOS (Safari)Настройка иконки favicon для Android (Chrome)Настройка иконки favicon для Android (Chrome)Настройка фавиконки сайта для операционных систем Windows 8 и 10ННастройка фавиконки сайта для операционных систем Windows 8 и 10Настройка favicon для закреплённых вкладок браузера SafariНастройка favicon для закреплённых вкладок браузера SafariНастройка параметров генерации favicon для сайтаНастройка параметров генерации favicon для сайта

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

Далее нажимаем на кнопку "Generate your Favicons and HTML code".

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

Основные шаги, которые необходимо выполнить для того чтобы установить favicon на сайтОсновные шаги, которые необходимо выполнить для того чтобы установить favicon на сайт

Установка фавиконки на сайт

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице "Install your favicon".

Основные шаги:

  1. Скачивание сгенерированного пакета (favicons.zip).Содержимое пакета favicon (форматы png, svg, ico)Содержимое пакета favicon (форматы png, svg, ico)
  2. Распаковка его в корень сайта
  3. Вставка HTML-кода представленного на странице в секцию head ваших страниц: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Проверка favicon у сайта

Проверка favicon сайта осуществляется с помощью ссылки, представленной в 4 пункте (check your favicon). Данное действие также можно осуществить через главное меню Favicon -> Favicon checker.

Чтобы приступить к валидации favicon сайта выбираем в представленной форме протокол сайта (http:// или https://), вводим доменное имя и нажимаем на кнопку "Check Favicon".

Валидация фавиконки сайтаВалидация фавиконки сайта

После этого убеждаемся, что favicon сайта прошёл проверку на сервисе realfavicongenerator.net и корректно отображается на всех платформах.

Индексация фавикон сайта поисковыми системами

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

С помощью следующих URL можно проверить, как поисковые роботы видят иконку фавикон у сайта:

  • Яндекс - https://favicon.yandex.net/favicon/имя_домена
  • Google - https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

Примечание: использование в качестве favicon анимированных изображений (gif) поддерживаются только некоторыми браузерами (Firefox). В других браузерах в качестве favicon будет использоваться статичное изображение.

itchief.ru

Favicon для сайта и логотип – в чем разница?

favicon-cover

Что такое favicon?

Favicon (фавикон) – маленькая иконка, которая отображается в браузере на вкладке с названием открытой страницы сайта:favicon1Кроме того, она показывается в списке закладок или на панели закладок:favicon2Размеры иконки на экране достаточно малы – всего 16 x 16 пикселей.

Зачем нужен фавикон?

Маленькая картинка на вкладке часто запоминается лучше, чем текст на ней. Поэтому когда в браузере открыто много вкладок favicon помогает пользователю быстро найти нужную.Но главное преимущество сайта с иконкой-фавиконом состоит в другом – она повышает посещаемость сайта! Дело в том, что поисковик Yandex отображает эти иконки в результатах поиска:favicon3Фавиконки в текстовой “простыне” найденных интернет-ресурсов неизбежно привлекают внимание пользователя. Специалистами по продвижению сайтов опытным путем доказано, что по ссылкам с фавиконом в Яндексе кликают чаще, чем по ссылкам без них.Поэтому у хорошего сайта favicon должен быть обязательно.

Фавикон = логотип?

Чаще всего в качестве фавикона используют уменьшенную графическую часть логотипа:favicon4Но этот способ годится далеко не всегда.

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

Вот как популярные сайты решают эти проблемы:favicon5Wikipedia вместо своего чересчур сложного знака использует первую букву названия. Так же поступает и Facebook со своим шрифтовым логотипом.У Youtube в качестве фавикона – узнаваемая кнопка “play”, созданная по мотивам логотипа. Flickr использует два кружка в цветах своего логотипа – этот элемент можно увидеть на сайте в анимированном виде пока загружается загружается большая фотография.

Как поступаю я?

Если позволяет логотип, я использую его уменьшенную версию, перед этим радикально ее упростив, чтобы мелкие детали не испортили впечатление от иконки:favicon-esufav11fav9fav5fav3Если логотип достаточно сложный – использую его узнаваемый фрагмент:fav10fav1fav2fav4Или строю фавикон на основе первой буквы названия:fav7fav6А иногда даже не использую логотип вообще:fav8

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

Самый простой способ — отдать его разработчикам сайта. Они знают, что делать.Некоторые системы управления сайтом позволяют загрузить фавикон в своем интерфейсе.А в общем случае нужно разместить его в корне сайта и добавить следующие строки после тега <head> в исходном тексте страницы или шаблона:<link rel="icon" href="http://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="http://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon" />

И в заключение:

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

Кстати, при заказе логотипа favicon для вашего сайта будет разработан бесплатно!

liketxt

logodiver.ru


Смотрите также