Этапы создания сайта

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

Именно об этом и будет сегодняшний пост, в котором мы вкратце рассмотрим основные этапы создания сайта:

1. Цель создания сайта, т.е. для чего он вам собственно нужен

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

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

Более подробно о целях создания можно прочесть в статье Причины создания сайта

2. Выбор типа и структуры сайта

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

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

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

3. Выбор дизайна сайта

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

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

Подробнее о выборе дизайна сайта можно прочитать тут: Основы веб-дизайна

4. Выбор доменного имени и хостинга

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

В общем виде имя сайта выглядит следующим образом:

WWW.ИМЯ_САЙТА.RU или WWW.ИМЯ_САЙТА.COM

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

5. Подготовка контента и подбор ключевых слов.

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

О контенте и подборе ключевых слов читайте в разделе: Контент

6. Как именно вы создадите сайт, т.е. способ создания сайта

Существуют различные способы создания сайтов:

- «Написание» сайта на html полностью или на основе шаблона

- Создание сайта при помощи конструктора (site builder)

- Создание сайта при помощи системы управления контентом CMS (content management system)

- Заказать создание сайта в студии веб-дизайна

Подробнее об этих способах можно прочесть в посте: Способы создания сайта

7. Регистрация в поисковиках

Создать и разместить свой сайт в сети это далеко не все. Ведь если о вас и вашем сайте никто не знает, значит, никто на сайт и не придет. Поэтому необходимо привлечь на ваш ресурс пользователей сети. Как это добиться?

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

Подробнее об этих способах можно прочесть в посте (статья появится чуть позже)

8. Раскрутка

Раскрутка сайта это действия направленные на увеличение популярности и посещаемости вашего сайта/блога. Существует большое количество способов раскрутки сайта, как платные, так и бесплатные.

Подробнее об этих способах можно прочесть в разделе  продвижение

9. Регистрация в каталогах

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

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

Подробнее об этих способах можно прочесть в посте (статья появится чуть позже)

10. Частота обновления информации

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

DARPA ищет разработчиков мобильных приложений для военных целей

Известная организация — DARPA (Defense Advanced Research Projects Agency — агентство передовых оборонных исследовательских проектов США) — стоящая у истоков Интернета, опубликовала на своем официальном сайте заметку, в которой фактически на работу в агенство приглашаются разработчики мобильных приложений.

Суть будущей работы описывается следующим образом: DARPA располагает значительным резервом современного оборудования (в частности, следящими системами (sensor systems) — Adaptable Sensor System), потенциал технических возможностей которых используется далеко не полным образом из-за отсутствия соответствующего программного обеспечения. Более конкретно, беспилотные летательные аппараты (БПЛА) (UAV — unmmanned aerial vehicles), незаменимые для разведки, наблюдения и рекогносцировки, могли бы быть гораздо более эффективны на поле боя, если бы существовало приложение, позволяющее управлять ими всеми сразу, без необходимости управлять каждым аппаратом отдельно — утверждается в заметке.

Все эти серьезные проблемы в программном обеспечении аппаратных ресурсов следящих систем, которые построены на основе технологий, применяющихся в смартфонах (built on smartphone-like technolog) могут быть решены за счет сообщества разработчиков, имеющих опыт в создании мобильных приложений с точки зрения более эффективного использования сетевых возможностей, акселерометров, пользовательского интерфейса. Также важным является и другой момент: сейчас сроки создания программ для ADAPT колеблются от трех до восьми лет, а за счет привлечения новой команды DARPA рассчитывает значительно ускорить этот процесс.

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

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

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

Веб-мессенджер для сайта

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

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

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

Минимум изменений на вашем сайте. Для интеграции необходимо расставить ссылки на окно мессенджера в необходимых частях сайта.
Не требуется дополнительная регистрация пользователей. Все ваши существующие пользователи смогут сразу использовать мессенджер после подключения его к сайту.
Пользователи могут общаться как в режиме online, так и отправлять сообщения в offline неактивным пользователям. Вся история переписки хранится в базе и доступна в окне общения.
Для online пользователей общение идет в реальном времени без перезагрузок и постоянных ajax запросов. Используется непрерывный коннект к серверу на 80 порту с минимальным потреблением трафика.

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

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

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

Как подобрать домен

Домен — это то имя, по которому ваш сайт смогут найти в интернете. Это имя вводится в поле для URLа в браузере и открывается ваш сайт.

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

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

Можно просто придумать звучное имя, которое будет хорошо запоминаться. Такое имя не обязательно должно отражать что на сайте, или ваш бренд, основная задача — быть простым, звучным и запоминающимся. Например — zazzle.com

Графический дизайн

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

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

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

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

Как разогнать свой сайт?

Есть куча советов как убыстрить отдачу сайта – это и статика через nginx, и кластеризация, и анализ страницы сайта, и куча еще всяческих хитрых технологий. Однако во всех книжках, советующих как можно повысить загрузку сайтов можно найти две постоянно повторяющиеся темы – «склеивание CSS/JS» и «включение сжатия».

Склейка

Все просто – если например у Вас на страничке 3 CSS файла и 5 JS, браузеру при загрузке придется создавать 8 соединений и выкачивать по ним данные, а как известно, лучше несколько больших файлов чем множество мелких. Связано это с тем, что на каждую установку соединения браузер тратит время и зачастую немаленькое – до 40% времени загрузки.

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

Как говорят «никогда не переписывайте то, что можно просто вырезать и наклеить»

Сжатие

Чем меньше объем «прокачиваемых» файлов, тем соответственно меньше время тратится на загрузку. Даже если эти файлы сжаты и мы тратим некторое время на распаковку – при современных вычислительных мощностях на клиенте эта временная затрата практически не существенна. Большинство современных браузеров поддерживают метод сжатия deflate, иногда называемый gzip по имени стандартной *nix утилиты, осуществляющей это дело.

Что можно и нужно сжимать в веб? Любые текстовые запросы, как то: JS / CSS / JSON / HTML.

Есть замечательный модуль для Апача mod-deflate, которым можно прямо из .htaccess указать чего сжимать и чего не сжимать, очень прост в использовании, но увы и ах! – обычно запрещенный на стандартных хостингах по причине того, что они (хостеры) опасаются за свое процессорное время.

Доля разумного в этом конечно есть – этот модуль жмет все «на лету» и если не принять некоторых хитростей, каждый раз грузя страничку для нового пользователя он будет заново пережимать все CSS / JS и т.д.

Если же у вас VDS и Вы – сам себе хозяин – используйте mod-deflate, ибо он хорошо отлажен и примеров применения в сети масса.

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

Большинство JS / CSS и других текстов – это статика, т.е. они не меняются в процессе функционирования сайта — есть смысл их объеденить, чтобы удовлетворить пункту о «склейке» + сразу же сжать.

Полученные файлы мы положим в некий кэш, откуда наш Апач будет их брать и отдавать. Причем процесс мы автоматизируем через mod-rewrite.

Алгоритм получится примерно такой:
запрашивается некий файл со специального URL
если клиент поддерживает сжатие и сжатый файл такого типа есть в нашем кэше – отдаем и завершаем обработку
если же сжатие не поддерживается и есть просто файл такого типа – отдаем его и заканчиваем обработку
иначе запускаем наш обработчик

Условимся, что срабатывать наша модель при обращении к URLу вида «/glue/….»,
А файлы будут лежать в «/static/glue/…».

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

В принципе можно сделать так, чтобы папка совпадала с URL-ом, тогда чуть упростится конфиг mod-rewrite но будет не так интересно, вобщем упростить всегда можно

Надеюсь, что в корне Вашего сайта уже живет файл .htaccess с содержанием типа такого:

RewriteEngine On
RewriteBase /
RewriteRule ^.*$ index.php [QSA,L]

Ну либо похожий. Основное условие, что если mod-rewrite не нашел чего сделать с пришедшим URL, он в конце концов вызовет какой-то скриптовый файл. В данном случае – index.php

Для добавления нашего алгоритма пропишем в .htaccess следующее:

Добавляем поддержку сжатых файлов .gz, а также .jz.gz и .css.gz

AddEncoding gzip .gz

< FilesMatch “\.js.gz$”>
#для проксей
Header set Cache-control: private
Header append Vary User-Agent

ForceType “text/javascript”
Header set Content-Encoding: gzip
AddCharset windows-1251 .js.gz
< /FilesMatch>
< FilesMatch “\.css.gz$”>
#для проксей
Header set Cache-control: private
Header append Vary User-Agent

ForceType “text/css”
Header set Content-Encoding: gzip
< /FilesMatch>

Добавляем правило отдачи наших файлов (разыменовывание URL в физическую папку)

RewriteCond %{ENV:REDIRECT_GZ} =1
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1 -f
RewriteRule . – [L]

Добавляем проверку на поддержку клиентом сжатия

RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1.gz -f
RewriteCond %{HTTP:Accept-Encoding} ^.*?gzip.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^konqueror [NC]
RewriteRule ^siteglue/(.*)$ /static/glue/$1.gz [L,E=GZ:1]

Если сжатие не поддерживается

RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1 -f
RewriteRule . static/glue/%1 [L,E=GZ:1]

Теперь возьмемся за нашу самую главную магию – автоматическое формирование этих самых файлов.

Здесь еще одна есть хитрость, в данном случае скорее — еще одна условность – в файлах html мы будем писать запросы к css или js в следующтим виде: «/glue/1.css—2.css—3-4-5.css», где «-» — это замена «/», а «–» – это разделитель файлов. Кроме того в именах могут быть только английские буквы, цифры и символ «_», по мне — этого более, чем достаточно.

Конечно же, это условности и Вы можете выбрать себе другие правила и другие разделители. Например можно использовать «,» или что-либо еще.

Однако я выбрал «-» из-за того что это вполне нормальный и часто встречающийся символ URL и с ним врядли могут быть всякие дурацкие проблемы типа вырезания его кривыми скриптами на проксях по пути от Вас до клиента.

В файле в index.php (или что там у вас запускается согласно .htaccess?) добавляем обработчик, который проверяет URL на соответствие нашему «/glue/.*» и в случе совпадения делает echo( Glue::generate( $str ) ), где $str — то, что у нас идет в URL после последнего слэша, т.е. для «/glue/a.js» это будет «a.js»

Сам класс Glue вот такой

class Glue {
static $allowedExt = array(
“js” => array( “check” => “/^js/.*?.js$/”, “delimeter” => “;n”, “mime” => “text/javascript”),
“css” => array( “check” => “/^css/.*.css$/”, “delimeter” => “n”, “mime” => “text/css” ),
);

static function generate( $str ) {
if ( !$str ) return null; //не нашли URL

$files = array();
preg_replace( “/((?:[a-z0-9_.]+-)+[a-z0-9_.]+.([a-z0-9]+))(?:–|$)/ie”, “$files[]=str_replace( -, /, “1″)”, $str );
if ( count( $files ) == 0 ) return null; //не нашли ни одного файла в URL

$srcF = “/static”; //наша папка, откуда берется статика
$dstF = “/glue”; //папка, нашего кэша

$content = “”;

$cext = substr( strrchr( $files[0], . ), 1 );
if ( $cext === false ) return null; //не смогли определить расширение

$fd = null;
foreach( self::$allowedExt as $k => $v ) {
if ( $k == $cext ) {
$fd = $v;
break;
}
}
if ( !$fd ) return null; //не нашли среди доступных расширений

$usedNames = array();
$fdC = &$fd["check"];
$fdD = &$fd["delimeter"];
foreach( $files as $name ) {
$ext = substr( strrchr( $name, . ), 1 );
if (
$ext === false ||
in_array( $name, $usedNames ) ||
$ext != $cext ||
!preg_match( $fdC, $name )
) return null; //не смогли найти расширения, файл ч таким именем уже есть или расширение отличается от первоначального либо имя не удовлетворяет проверке

$usedNames[] = $name;
$filec = file_get_contents( “{$srcF}/{$name}” );
if ( !$filec ) return null; //не смогли найти или прочитать файл
$content .= $content != “” ? $fdD . $filec : $filec;
}

//сохранили файл
file_put_contents( “{$dstF}/{$str}”, $content );

//сохранили сжатый файл
$gzip = gzencode( $content, 9 );; //gzdeflate( $content, 9 );
if ( $gzip ) file_put_contents( “/{$dstF}/{$str}.gz”,$gzip );

//мы должны отдать по данному запросу содержимое и mime-тип
header( “Content-type: ” . $fd["mime"], true );
return $content;
}
}

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

Вот в принципе все, осталось пробежаться по файлам проекта – все таки остался кусочек «ручной» работы — и прописать вместо кучи скриптов один, но по правилам, описанным чуть Выше.

Все – при первом запросе автоматически все соберется и начнет отдаваться.

Еще одно маленькое дополнение – а что делать с контентом, отдаваемым PHP? Его тоже надо сжать!

Для этого в то месте где Вы отдаете файлы текстового вида, там где отдается сформированный контент – например так echo( $content );

Сделать следующее:

if ( isClientSupportGzip() ) {
ob_start(“ob_gzhandler”);
echo( $content );
ob_end_flush();
} else echo( $content );

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

function isClientSupportGzip() {
if ( headers_sent() || connection_aborted() ) return false;
if ( stripos( getenv( “HTTP_ACCEPT_ENCODING” ), “gzip” ) === false ) return false;
if ( stripos( getenv( “HTTP_USER_AGENT” ), “konqueror” ) !== false ) return false;
return true;
}

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

Вот и все – мы чуть-чуть разогнали свой сайт ) По моим наблюдениям прирост в скорости отдачи может составлять 30-40%.

Если есть какие-либо корректировки, предложения или критика – милости прошу в комменты – буду очень признателен, ибо как говорится – век учись )

Быстрых Вам сайтов, максимального сжатия и радостных клиентов

P.S.

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

При склейке JS помните особенность – склеивать надо через «;», т.к. в предыдущем файле после последней строчки может не оказаться «;»

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

Если у Вас в сайт в самой непопулярной кодировке, чтобы все было шоколадно, замените ForceType «text/javascript» на ForceType «text/javascript; content=windows-1251» и добавьте: AddCharset windows-1251 .js и AddCharset windows-1251 .css

И еще маленький совет, придерживайтесь одинаковой очередности в указании склеиваемых файлов, ибо технически «/glue/a.js—b.js» и «/glue/b.js—a.js» это одно и тоже, а на практике вы получите два файла в кэше…

Как создать фавикон? – уник

Фавикон – это небольшая картинка размером 16×16 пикселей в особом формате, отображающаяся в закладках, в адресной строке браузера до URL страницы, а также в выдаче поисковых систем и очень важен при использовании индивидуального подхода btl-маркетинга. Она может выглядеть по-разному, все зависит от фантазии создателя. Фавикон создать достаточно просто. Весь процесс можно разбить на два шага: создание картинки и последующее преобразование ее в формат ico из обычного  jpg.

Картинку создают в любом графическом редакторе, допустим, в Adobe Photoshop. Что будет на ней изображено – решать вам. Если у вас имеется логотип, можете его упростить и уменьшить до необходимого размера, получится ваш фавикон. Можно выполнить поиск картинок в Интернете и подобрать понравившиеся. Но лучше создать свой собственный, уникальный фавикон, для чего его придется нарисовать в фотошопе. Работать с картинкой 16×16 пикселей не слишком удобно, поэтому сначала задайте больший размер, скажем 48×48. Полученную картинку сохраните в наилучшем качестве.

Итак, картинка получилась, теперь следует преобразовать ее в формат ico. Для этой цели существуют разные способы. Самые распространенные – онлайн-сервисы. С ними работать очень просто. Достаточно перейти на такой сервис, указать путь к картинке на системе и нажать “создать favicon.ico ”. Затем просто скачайте готовый фавикон себе на винчестер и загрузите на хостинг.