Что такое фавикон(favicon) и как его установить на сайт?

Привет, друзья! Сегодня у нас на очереди   фавикон. Слово новое, непонятное, неудобное.. Но, все просто. Мы уже давно видели эти фавиконы. Просто не знали, что это они и есть 🙂 . Так у нас бывает, что самые простые вещи всегда называют умно и непонятно. А на самом деле фавикон состоит из слова испанского фаворит и слова греческого икона(изображение). В переводе на русский язык,  любимое изображение 🙂 .  Мы узнаем что это. И зачем оно нужно.

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

Что такое фавикон(favicon) и как его установить на сайт?

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

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

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Как сделать фавикон для сайта в фотошопе?

Если Вы яркая индивидуальность, то рекомендую начать с фотошопа.  Можно сделать такой фавикон, которого нет ни у кого и еще при этом самовыразиться  😛 . Причем  его можно сделать опять же полностью с нуля. Бесплатно. Другой вариант можно скачать картинку (тот же  фавикон) и переделать его под себя. Но, нужен фотошоп или другой редактор попроще, которым можно  обрезать и уменьшать изображения.

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

Что такое фавикон(favicon) и как его установить на сайт?

Укажем имя файла, размеры одинаковые, этот вариант фавикона будет квадратный, и содержать только буквы из названия сайта, на каком нибудь ярком фоне. Нажимаем ОК.

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

Вот что выбрал я, и как это выглядело после печати того, как я набрал текст:

Что такое фавикон(favicon) и как его установить на сайт?

Нам теперь надо выровнять текст по центру:

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

Каждый новый элемент нашего рисунка мы создаем на так называемом слое. Текст мы разместили на одном фоне, а белый фон автоматически при создании файла на находится на  другом слое. Сейчас мы для эксперимента попробуем еще третий слой создать и на него нанести какой нибудь другой фон. Жмем правой кнопкой мыши  на слое. Или комбинацией клавиш Ctrl +Shift +N  (как на рисунке) создаем новый слой:

Что такое фавикон(favicon) и как его установить на сайт?

Получается сначала так:

Что такое фавикон(favicon) и как его установить на сайт?

А потом выглядит так:

Что такое фавикон(favicon) и как его установить на сайт?

Курсор должен находиться на этом слое, мы с ним будем работать.

Осталось чуть- чуть друзья. Все просто. Нужно подобрать фон.  Выбираем инструмент Заливка.

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

Получилось так:

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

Брюки превращаются в элегантные шортыОсталось сохранить наш рисунок и посмотреть, что получилось. Но сначала   уменьшим его размер до 32х32 пикселя.

Что такое фавикон(favicon) и как его установить на сайт?

Ставим нужный размер, ширину и высоту 32х32:

Что такое фавикон(favicon) и как его установить на сайт?

Нажимаем ОК. Затем Файл- Сохранить как, тип файла *.png.

Что такое фавикон(favicon) и как его установить на сайт?

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

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

 Как сделать фавикон онлайн бесплатно?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

Фавикон генератор что это такое и как?

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

Что такое фавикон(favicon) и как его установить на сайт?

Мы сейчас попробуем подгрузить туда наш готовый значок. Найдем его в папке

Что такое фавикон(favicon) и как его установить на сайт?

И вот, оно самое:

Что такое фавикон(favicon) и как его установить на сайт?

Вот как он выглядит, мой фавикончик. Нажимаем Загрузить.

Что такое фавикон(favicon) и как его установить на сайт?

Вот мой фавикон в браузере, уже закачанный:

Что такое фавикон(favicon) и как его установить на сайт?

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

М-да, не Малевич,  но главное не победа, а участие Рисовать по клеточкам можно наверное только самые простые значки. Некоторые люди рисуют анимированные фавиконы. Они шевелятся, меняют цвета.  Ну и наконец самый быстрый способ получить фавикон онлайн это заплатить за него. На момент написания статьи на этом же ресурсе цена заказа на  анимационный favicon  размером 32×32 px в формате gif  1200 ₽, обычный фавикон 700 рублей. Довольно недешево, но если разделить суммы на 64 пикселя, то нормально  🙂 

Как установить фавикон на сайт wordpress (вордпресс)?

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

Я попробую закинуть его через мой любимый Total Commander

Что такое фавикон(favicon) и как его установить на сайт?

После соединения с доменом мы скопируем фавикон с папку с шаблоном:

Что такое фавикон(favicon) и как его установить на сайт?

У меня cайт на Word Press, в других платформах пути другие, но идея одна фавикон должен лежать в папке с шаблонами или темами, например: ваш сайт.ru/wp-content/themes/папка_с_вашим_шаблоном/favicon.ico

Что такое фавикон(favicon) и как его установить на сайт?

Значок  скорее всего не сразу появится у вас на сайте. Роботы должны проиндексировать его. Если нужно быстро организовать появление фавикона, придется на каждой странице сайта в заголовках вставлять следующий код: между &lt,head&gt, и &lt,/head&gt,:

&lt,link href=/путь_к_файлу/favicon.ico rel=shortcut icon type=image/x-icon /&gt,

Еще проще настроить фавикон через административную панель Word Press. В настройках темы есть опция Активировать фавикон

Что такое фавикон(favicon) и как его установить на сайт?

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

Что такое фавикон(favicon) и как его установить на сайт?

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

восемь + девятнадцать =